Sperimentazioni con Jaws nel Creare Menù Accessibili


aria-html5Quando si sviluppano pagine web, dobbiamo preoccuparci non soltanto che siano belle, che sia anche accessibile a tutti gli utenti. Per far questo dobbiamo testare le nostre applicazioni con screen readers.
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!


Lascia un Commento!