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 a modificare 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 della tastiera integrato 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. Riprodurre autonomamente queste interazioni su 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 attivabile 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 interessante chiamato *attivazione dei click
sintetici*. 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 ciascun controllo e ENTER
e SPACE per tentare di fare clic su di essi.
Se nel tuo sito o nella tua applicazione esistente sono presenti pulsanti div, valuta la possibilità di sostituirli con elementi button. button è facile da personalizzare e offre numerosi vantaggi in termini di 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, quale scegliere?
- Se il clic sull'elemento eseguirà un'azione nella pagina, utilizza
<button>. - Se il clic sull'elemento indirizza 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 riuscire a ovviare ad 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 e cerca i 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 ai controlli interattivi personalizzati utilizzando tabindex.