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 armeggiare con tabindex
e più utenti soddisfatti.
Supporto della tastiera senza costi (e migliori esperienze sui dispositivi mobili)
Esistono diversi elementi interattivi integrati con semantica appropriata e supporto della tastiera. Quelli più usati dalla maggior parte degli sviluppatori sono:
Inoltre, talvolta gli elementi con l'attributo contenteditable vengono utilizzati per l'inserimento di testo in formato libero.
È facile trascurare il supporto per tastiera integrato offerto da questi elementi.
Di seguito sono riportati alcuni elementi di esempio da esplorare. Invece di usare il mouse, prova a usarli con la tastiera. Puoi usare TAB (o SHIFT +
TAB) per spostarti tra i controlli e puoi usare i tasti freccia e i tasti come
ENTER e SPACE per manipolare i relativi 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 sui dispositivi mobili richiede molto lavoro. Questo è un altro buon motivo per affermarsi agli elementi integrati, se possibile.
Usa button anziché div
Un anti-pattern di accessibilità comune consiste nel trattare un elemento non interattivo, come div o span, come un pulsante aggiungendovi un gestore dei clic.
Per essere considerato accessibile, un pulsante deve:
- Possibilità di impostare lo stato attivo tramite tastiera
- Disattivazione del supporto
- Supporta i tasti
ENTERoSPACEper eseguire un'azione - Essere annunciati correttamente da uno screen reader.
Un pulsante div non ha nessuna di queste cose. Ciò significa che dovrai scrivere
codice aggiuntivo per replicare quanto offerto senza costi dall'elemento button.
Ad esempio, gli elementi button hanno un trucco noto chiamato *attivazione clic sintetica*. Se aggiungi un gestore "clic" a button, questo 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 chiave sia ENTER o SPACE, quindi eseguire il gestore di clic. Ahi!
Significa tanto lavoro extra!
Confronta la differenza in questo esempio. TAB per controllare e usare ENTER
e SPACE per provare a selezionarli.
Se nel tuo sito o nella tua applicazione esistente sono presenti pulsanti div, valuta la possibilità di sostituirli per elementi button. button è facile da usare e ha molti vantaggi
in termini di accessibilità.
Link e pulsanti
Un altro anti-pattern comune è trattare i link come pulsanti, associando loro il comportamento JavaScript.
<a href="#" onclick="// perform some action">
Sia i pulsanti che i link supportano qualche tipo di attivazione con clic sintetici. Quindi, cosa dovresti scegliere?
- Se fai clic sull'elemento per eseguire un'azione sulla pagina, utilizza
<button>. - Se fa clic sull'elemento, sarà 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'uso dell'elemento corretto aiuta gli utenti di screen reader a capire quale risultato aspettarsi.
DA FARE: Sito per sviluppatori - Test Pensa e verifica
Stili
Può essere difficile definire lo stile di alcuni elementi integrati, in particolare <input>.
Con un po' di CSS intelligenti potresti aggirare alcune di queste limitazioni. Il progetto WTFForms (con nome esilarante) contiene un foglio di stile di esempio che illustra una serie di tecniche per applicare uno stile ad alcuni degli elementi integrati più difficili.
Passaggi successivi
L'utilizzo di elementi HTML integrati può migliorare notevolmente l'accessibilità del tuo sito e ridurre notevolmente il carico di lavoro. Scorri il sito e cerca i controlli che non supportano la tastiera. Se possibile, sostituiscili per alternative HTML standard.
A volte, potresti trovare un elemento che non ha una controparte nel codice HTML.
Nessun problema. Continua a leggere per scoprire come aggiungere il supporto della tastiera ai controlli interattivi personalizzati utilizzando tabindex.