come gestire WAI ARIA role = "listbox"

Question

Ho una lista di opzioni tra cui è possibile selezionare una. A tutti gli effetti l'elemento HTML <select> copre questo. Poiché abbiamo bisogno di una presentazione visiva diversa, sto cercando di utilizzare WAI ARIA role="listbox". Non sono chiaro su come utilizzare aria-activedescendant, aria-selected e aria-checked.

Domande riguardanti attenzione Stato/attivo:

• Se uso aria-activedescendant sulla casella di riepilogo per puntare al [role="option"] che è attualmente attivo (ha "focus virtuale"), userei [aria-selected]. Come potrei dire meglio all'elemento opzione stesso che è attivo (ha "focus virtuale") per rappresentare ciò visivamente? (:focus è nella lista, dopotutto)
• un [role="option"] può avere [aria-checked] e [aria-selected]. Credo di aver bisogno di [aria-selected] ma non vedo cosa userò [aria-checked] per.
• C'è un trucco per evitare di dover inserire ID su ogni opzione semplicemente in modo che possa essere referenziata da aria-activedescendant?

Domande riguardanti :

• "Casella di controllo - Spazio alterna caselle di controllo, se le voci di elenco sono verificabili" - come faccio a capire se sono verificabili o selezionabile?

Domande concernenti la convalida:

Se la casella di riepilogo ha [aria-required="true"] una sorta di convalida deve essere effettuata. in particolare se è stata selezionata un'opzione (o selezionata).

• quando si attiva la convalida? è il sufficiente?
• se non valido, cosa devo fare oltre all'impostazione di [aria-invalid="true"] nella casella di riepilogo?

Answer 1

aria-checked è davvero più qualcosa per un elenco di opzioni strettamente correlate con caselle di controllo visibili reali che possono essere attivate o disattivate. Questo è più comune nel mondo Windows. Explorer può essere impostato su una modalità pseudo multi-selezione, o alcune app lo usano per attivare o disattivare un insieme di account. Su Mac, puoi pensare alla lista di account in Adium, che può essere selezionata (attiva) o meno. Una selezione sarà sempre lì, e una o più delle loro caselle di controllo possono essere controllate o meno.

aria-selected è sempre quello giusto per indicare lo stato selezionato di un'opzione. Per esempio. quando si attraversa la lista con i tasti freccia, aria-selected="true" si sposta da un elemento all'altro, mentre gli altri devono ottenere aria-selected="false". Come ha detto Patrick, puoi usare questo per generare anche dei bei CSS.

Come per l'interazione con la tastiera: le frecce su e giù selezionano una voce e, se anche le voci sono controllabili, lo spazio alterna lo stato selezionato o deselezionato della voce attualmente selezionata.

In una vera selezione multipla, come HTML: selezionare @size> 1, e multiselectable essere vera, l'interazione sarebbe:

• tasti freccia selezionare un singolo elemento.
• Ctrl + I tasti freccia spostano la messa a fuoco da un elemento all'altro, ma non selezionano ancora l'elemento.
• Ctrl + Spazio selezionare l'articolo.
• Maiusc +fino e giù frecce avrebbero selezionare elementi contigui.

Questo è, ancora una volta, il paradigma di Windows standard, può essere osservato in Explorer nella vista Dettagli, ad esempio.

Per quanto riguarda la convalida: onBlur è sufficiente, oppure è possibile eseguire dinamicamente tramite modifiche nella selezione/elemento focalizzato, assicurarsi che almeno un elemento sia selezionato o qualsiasi altra convalida necessaria.

aria-invalid="true" è sufficiente per gli screen reader per sapere, ma un messaggio di errore ed eventualmente un'indicazione visiva sarebbe bello per tutti di sapere cosa c'è che non va.

Answer 2

Come sarebbe meglio che dire l'elemento opzione di sé che è attiva (ha "focus virtuale") per rappresentare visivamente che?

In generale, si dovrebbe aggiungere aria-selected = "true" e quindi creare alcuni CSS che si occupano di esso utilizzando selettori di attributo, ad es. div [role = option] [aria-selected = true] {...}, o aggiungi una classe css in modo dinamico?

[aria-controllato] e [aria-selezionato]

Questo è più di una questione filosofica immagino. aria-selected corrisponde più strettamente a quello che avresti con un select ... ma poi di nuovo (in particolare per i widget multi-select) puoi immaginare che la listbox sia in effetti una serie di checkbox, e in questo caso useresti aria- controllato. non c'è né giusto né sbagliato su nessuno dei due (qualcosa che troverai molto quando ti immergi in widget ARIA più complessi).

C'è un trucco per evitare di dover mettere gli ID su ogni opzione semplicemente in modo che possa essere referenziato da aria-activedescendant

Hmm ... forse si potrebbe generare dinamicamente gli ID per tutte le opzioni a pagina caricare tramite script? Oppure - ma non testato - potresti avere qualcosa come un ID "vagante" che si muove attorno alle opzioni a seconda di quale è attivo (aggiungendo/rimuovendo l'ID all'opzione pertinente).