Utilizzare l'HTML semantico per semplificare le vittorie sulla tastiera

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 ENTER o SPACE per 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!

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.