Oto przykład dostosowany prawdziwy świat - to się na poziomie markup został już przekształcony z nieuporządkowanej listy z linkami do wybierz menu poprzez JS. Rzeczywisty kod jest dużo bardziej złożony i oczywiście nie można go w całości uwzględnić, więc pamiętaj, że będzie to musiało zostać ponownie przemyślane do wykorzystania w produkcji. Aby menu wyboru było dostępne na klawiaturze, zarejestrowaliśmy zdarzenia zmiany stanu klawiatury i wywołaliśmy wywołanie AJAX, gdy użytkownicy wybrali się z listy (uwaga na różnice w czasie wyświetlania zdarzeń onchange). To była poważna PITA, aby była dostępna, ale jest to możliwe.
// HTML
<!-- select element with content URL -->
<label for="select_element">State</label>
<select id="select_element">
<option value="#URL_TO_CONTENT_PAGE#" rel="alabama">Alabama</option>
</select>
<p id="loading_element">Content Loading</p>
<!-- AJAX content loads into this container -->
<div id="results_container"></div>
// JAVASCRIPT (abstracted from a Prototype class, DO NOT use as-is)
var selectMenu = $('select_element');
var loadingElement = $('loading_element');
var resultsContainer = $('results_container');
// listen for keypress event (omitted other listeners and support test logic)
this.selectMenu.addEventListener('keypress', this.__keyPressDetector, false);
/* event callbacks */
// Keypress listener
__keyPressDetector:function(e){
// if we are arrowing through the select, enable the loading element
if(e.keyCode === 40 || e.keyCode === 38){
if(e.target.id === 'select_element'){
this.loadingElement.setAttribute('tabIndex','0');
}
}
// if we tab off of the select, send focus to the loading element
// while it is fetching data
else if(e.keyCode === 9){
if(targ.id === 'select_element' && targ.options[targ.selectedIndex].value !== ''){
this.__changeStateDetector(e);
this.loadingElement.focus();
}
}
}
// content changer (also used for clicks)
__changeStateDetector:function(e){
// only execute if there is a state change
if(this.selectedState !== e.target.options[e.target.selectedIndex].rel){
// get state name and file path
var stateName = e.target.options[e.target.selectedIndex].rel;
var stateFile = e.target.options[e.target.selectedIndex].value;
// get the state file
this.getStateFile(stateFile);
this.selectedState = stateName;
}
}
getStateFile:function(stateFile){
new Ajax.Request(stateFile, {
method: 'get',
onSuccess:function(transport){
// insert markup into container
var markup = transport.responseText;
// NOTE: select which part of the fetched page you want to insert,
// this code was written to grab the whole page and sort later
this.resultsContainer.update(markup);
var timeout = setTimeout(function(){
// focus on new content
this.resultsContainer.focus();
}.bind(this), 150);
}.bind(this)
});
}
Czytniki ekranowe czytają pola formularzy i łącza, gdy uzyskają ostrość. Tak więc jedną z możliwości jest umieszczenie kotwicy wokół tekstu i skupienie się na tej kotwicy. Dzięki CSS możesz uzyskać link, który nie będzie wyświetlany jako link dla użytkowników przeglądających stronę. Ale ta metoda nie jest zbyt satysfakcjonująca, ponieważ użytkownicy czytników ekranu będą błędnie wierzyć, że jest to link. – avernet
Dodaj tabindeks do dowolnego elementu i stanie się czytelny, jak sądzę (tabindex = -1 powoduje, że jest skryptowalny, ale nie tabbable). Często programowo wysyłam fokus do nowej treści po kliknięciu łącza (jak przełącznik kart lub akordeon) - ale nie musi to być link do ustawienia ostrości. Czytaj na tabindex. –