Utilizzando gli elementi HTML semantici corretti, potresti essere in grado di soddisfare la maggior parte o tutti
delle 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)
Sono presenti una serie di elementi interattivi integrati con una semantica appropriata e il supporto della tastiera. Quelle utilizzate dalla maggior parte degli sviluppatori sono:
Inoltre, gli elementi con
contenteditable
vengono talvolta 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 esempi di elementi da esplorare. Anziché utilizzare il tuo
con il mouse, prova a usarli con la tastiera. Puoi usare TAB (o SHIFT +
TAB) per spostarti tra i controlli e 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 spesso questi elementi integrati hanno interazioni univoche 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 attivabili da tastiera
- Assistenza disattivata
- Supporta i tasti
ENTERoSPACEper eseguire un'azione - Essere annunciate correttamente da uno screen reader
Un pulsante div non presenta nessuna di queste caratteristiche. Ciò significa che dovrai scrivere
codice aggiuntivo per replicare ciò che ti offre senza costi l'elemento button.
Ad esempio, gli elementi button hanno un trucco interessante chiamato *attivazione dei click
sintetici*. Se aggiungi un "clic" 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 usare ENTER
e SPACE per tentare di fare clic su di essi.
Se nel tuo sito o nella tua applicazione sono presenti pulsanti div, prendi in considerazione
sostituendoli con elementi button. button è facile da stile e pieno di
l'accessibilità è la chiave giusta!
Confronto tra 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 l'utente fa clic sull'elemento naviga in 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 screen reader. L'utilizzo dell'elemento corretto aiuta gli utenti di screen reader a sapere quale i risultati previsti.
DA FARE: DevSite - Valutazione Think and Check
Stili
Alcuni elementi integrati, in particolare <input>, possono essere difficili da stilare.
Con un po' di CSS intelligente, potresti essere in grado di aggirare alcuni di questi
limitazioni. Il (nome esilarante) del progetto WTFForms
contiene un esempio
foglio di stile
che illustra varie tecniche per applicare lo stile ad alcune delle
integrati.
Passaggi successivi
L'utilizzo di elementi HTML incorporati può migliorare notevolmente l'accessibilità del tuo sito, e ridurre significativamente il carico di lavoro. Prova a navigare nel tuo sito e cerca i controlli che non supportano la tastiera. Se possibile, sostituiscile per le 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.