In sostanza spegnendo lo schermo ed ascoltando quello che lo screen reader ci dice, dobbiamo essere in grado di muoverci ed utilizzare tutte le funzioni del sito.
Mi sono trovato a lavoro nel dover creare un menu accessibile, le caratteristiche di questo menu sono:
- Il menu dev’essere accessibile con la tastiera
- I pulsanti del menu devono essere annunciati dallo screen reader
- I pulsanti devono poter essere attivati
- Se un pulsante è attivo, questo dev’esser annunciato dallo screen reader.
- Infine: il menu non è semplicemente orizzontale ma assomiglia di più ad una griglia, quindi l’utente deve usare le freccette per accedere alle varie sezioni.
Il problema non è di semplicissima soluzione per via dei requisiti stringenti che ha: innanzitutto per lo standar ARIA un menu è verticale, quindi impostando qualcosa come un menu, jaws dirà “per muoversi premere la freccia in basso oppure verso l’alto”. Purtroppo non è quello che vogliamo.
MenuItemCheckbox
Nelle specifiche W3C-ARIA, si legge che affinché un menu possa mantenere uno stato, ad esempio premuto, si può utilizzare “menuitemcheckbox” come role.
In questo primo esempio vado ad utilizzare una struttura di questo genere:
Il container del menu ha role=”menu”, mentre ogni pulsante al suo interno avrà role=”menuitemcheckbox” in questo modo però Jaws da delle instruzioni incorrette sul come muoversi tra i vari elementi.
<body role=application>
<h3>Case 1</h3>
<div style="background:blue;" aria-label="Available options" role="menu">
<div tabindex="-1" >
<div tabindex="-1" aria-checked="false" aria-label="Option 1" role="menuitemcheckbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 2" role="menuitemcheckbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 3" role="menuitemcheckbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 4" role="menuitemcheckbox">
Button
</div>
</div>
</div>
</body>
Esempio
Button
Proviamo ad utilizzare il parametro che rappresenta i vari pulsanti che abbiamo, cioé role="button".
Cosa succede in questo caso?
Che Jaws non da istruzioni circa come muoversi, ma non da legge neanche se il pulsante è stato selezionato o meno.
<body role=application>
<div style="background:yellow;" aria-label="Available Options" role="menu">
<div tabindex="-1" >
<div tabindex="-1" aria-checked="false" aria-label="Option 1" role="button">
Button</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 2" role="button">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 3" role="button">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 4" role="button">
Button
</div>
</div>
</div>
</body>
Esempio
Checkbox
Il pulsante deve mantenere l’opzione, quindi possiamo provare con la checkbox. Il messaggio è “pulito”, ed in effetti sembra essere il candidato ideale per quello che cercavamo:
<body role=application>
<div style="background:orange;" aria-label="Available Options" role="menu">
<div tabindex="-1" >
<div tabindex="-1" aria-checked="false" aria-label="Option 1" role="checkbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 2" role="checkbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 3" role="checkbox">
Button
</div>
<div tabindex="-1" aria-checked="false" aria-label="Option 4" role="checkbox">
Button
</div>
</div>
</div>
</body>
Esempio
Migliorare l’esperienza utente
Ci sono altre cose che possiamo fare per migliorare l’esperienza utente?
Sicuramente, ad esempio possiamo provare a:
- Provare altri stati per lo standard aria, come ad esempio aria-pressed
- Aggiungere altre istruzioni su come utilizzare i pulsanti con un attributo aria-label più descrittivo.
Se avete altri suggerimenti sul come migliorare l’esperienza dei vostri utenti con aria, scrivetelo nei commenti!