Utilizzando gli elementi HTML semantici corretti, potresti essere in grado di soddisfare la maggior parte o tutte le tue esigenze di accesso alla tastiera. Ciò significa meno tempo speso ad armeggiare con tabindex e più utenti soddisfatti.
Supporto della tastiera senza costi aggiuntivi (e migliori esperienze mobile)
Esistono diversi elementi interattivi integrati con semantica e supporto della tastiera adeguati. Quelli più utilizzati dagli sviluppatori sono:
Inoltre, a volte gli elementi con l'attributo
contenteditable
vengono utilizzati per l'inserimento di testo in formato libero.
È facile trascurare il supporto integrato della tastiera offerto da questi elementi.
Di seguito sono riportati alcuni elementi di esempio da esplorare. Anziché utilizzare il mouse, prova a usare la tastiera per gestirli. Puoi utilizzare TAB (o SHIFT +
TAB) per spostarti tra i controlli e i tasti Freccia e tasti come
ENTER e SPACE per manipolarne i valori.
Se hai uno smartphone a portata di mano, puoi vedere che molte volte questi elementi integrati hanno interazioni uniche sui dispositivi mobili. Cercare di riprodurre autonomamente queste interazioni con i dispositivi mobili richiede molto lavoro. È un altro buon motivo per attenersi agli elementi integrati, se possibile.
Utilizza button anziché div
Un anti-pattern di accessibilità comune è trattare un elemento non interattivo, come un div o un span, come un pulsante aggiungendo un gestore dei clic.
Tuttavia, per essere considerato accessibile, un pulsante deve:
- Essere attivabili da tastiera
- Assistenza disattivata
- Supporta i tasti
ENTERoSPACEper eseguire un'azione - Essere annunciati correttamente da uno screen reader
Un pulsante div non ha nessuna di queste caratteristiche. Ciò significa che dovrai scrivere codice aggiuntivo per replicare ciò che l'elemento button ti offre senza costi.
Ad esempio, gli elementi button hanno un trucco intelligente chiamato *attivazione clic sintetico*. Se aggiungi un gestore "click" a un button, verrà eseguito quando l'utente preme ENTER o SPACE. Un pulsante div non ha questa funzionalità, quindi
dovrai scrivere codice aggiuntivo per ascoltare l'evento keydown, verificare
che il codice a tasti sia ENTER o SPACE e poi eseguire il gestore dei clic. Ahi!
È un sacco di lavoro extra.
Confronta la differenza in questo esempio. TAB per controllare e usa ENTER
e SPACE per tentare di fare clic su questi elementi.
Se nel tuo sito o nella tua applicazione esistente sono presenti pulsanti div, valuta la possibilità di sostituirli con elementi button. button è uno stile semplice
e favorisce l'accessibilità.
Link e pulsanti
Un altro antipattern comune è trattare i link come pulsanti associandovi un comportamento JavaScript.
<a href="#" onclick="// perform some action">
Sia i pulsanti che i link supportano una qualche forma di attivazione dei clic sintetici. Quindi, cosa dovresti scegliere?
- Se il clic sull'elemento eseguirà un'azione nella pagina, utilizza
<button>. - Se il clic sull'elemento indirizzerà l'utente a una nuova pagina, utilizza
<a>. Sono incluse le app web a pagina singola che caricano nuovi contenuti e aggiornano l'URL utilizzando l'API History.
Il motivo è che i pulsanti e i link vengono annunciati in modo diverso dagli screen reader. L'utilizzo dell'elemento corretto aiuta gli utenti di screen reader a sapere quale risultato aspettarsi.
TODO: DevSite - Valutazione di Pensa e controlla
Stili
Alcuni elementi integrati, in particolare <input>, possono essere difficili da stilare.
Con un po' di CSS intelligente potresti essere in grado di aggirare alcune di queste
limitazioni. Il progetto WTFForms (dal nome esilarante) contiene un stylesheet di esempio che mostra una serie di tecniche per applicare stili ad alcuni degli elementi integrati più difficili.
Passaggi successivi
L'utilizzo di elementi HTML incorporati può migliorare notevolmente l'accessibilità del tuo sito e ridurre notevolmente il tuo carico di lavoro. Prova a navigare nel tuo sito con i tasti Tab e cerca eventuali controlli che non supportano la tastiera. Se possibile, sostituiscile con alternative HTML standardizzate.
A volte potresti trovare un elemento che non ha una controparte in HTML.
Nessun problema. Continua a leggere per scoprire come aggiungere il supporto della tastiera a controlli interattivi
personalizzati utilizzando tabindex.