Come eseguire controlli sull'accessibilità

Rob Dodson

Stabilire se il tuo sito web o la tua applicazione sono accessibili può sembrare un'attività troppo impegnativa. Se ti stai avvicinando all'accessibilità per la prima volta, il l'ampiezza dell'argomento può portarti a chiederti da dove iniziare. Dopotutto, lavorare per soddisfare una gamma diversificata di capacità significa che una gamma di problemi da considerare.

Questo post suddivide questi problemi in una procedura logica passo passo per rivedere un sito esistente per verificarne l'accessibilità.

Inizia con la tastiera

Per gli utenti che non possono o scelgono di non utilizzare il mouse, la navigazione da tastiera è il mezzo principale per raggiungere tutto ciò che compare sullo schermo. Questo segmento di pubblico include utenti con disabilità motorie, ad esempio una lesione da stress ripetitivo (RSI) o paralisi e gli utenti di screen reader.

Per una buona esperienza con la tastiera, cerca di avere un ordine logico delle schede e stili di messa a fuoco distinguibili.

  • Inizia esplorando il tuo sito con il tasto Tab. L'ordine in cui vengono attivati gli elementi deve seguire l'ordine DOM. In caso di dubbi su quali elementi dovrebbero ricevere consulta il modulo del corso "Scopri l'accessibilità relativamente a questo argomento". Il meglio è che qualsiasi controllo con cui un utente può interagire o fornire input a devono essere regolabili e visualizzare un indicatore di messa a fuoco (come un anello di messa a fuoco).

  • I controlli interattivi personalizzati devono essere attivabili. Se utilizzi JavaScript per attivare <div> in un menu a discesa fantasioso, non verrà inserito automaticamente nel nell'ordine delle schede. Per rendere attivabile un controllo personalizzato, assegnagli un tabindex="0". I valori di tabindex superiori a 0 modificano l'ordine delle schede e possono creare confusione per utenti di screen reader.

  • Rendi attivabili solo i contenuti interattivi. Aggiunta di tabindex a elementi non gli elementi interattivi come le intestazioni rallentano gli utenti della tastiera che possono schermo e non aiuta gli utenti di screen reader perché lo screen reader sa già di doverle annunciare.

  • Se aggiungi nuovi contenuti a una pagina, indirizza l'attenzione dell'utente su quei contenuti in modo che possa intervenire. Consulta Gestire l'attenzione a livello di pagina per consultare alcuni esempi.

  • Progetta il tuo sito in modo che l'utente possa sempre concentrarsi sull'elemento successivo quando che vuoi. Attenzione ai widget di completamento automatico e ad altri contesti che possono bloccare il focus della tastiera. Puoi bloccare temporaneamente lo stato attivo quando vuoi che l'utente interagiscono con una finestra modale e non con il resto della pagina, ma devi sempre che fornisca un modo accessibile da tastiera per eseguire l'interpretazione letterale. Consulta Modali e trappole per tastiera per vedere un esempio.

Rendi utilizzabile il controllo della concentrazione

Se hai creato un controllo personalizzato, consenti agli utenti di raggiungere tutte le sue funzionalità usando solo la tastiera. Letto Gestione dell'attenzione ai componenti per scoprire tecniche per migliorare l'accesso alla tastiera.

Gestire i contenuti fuori schermo

Molti siti presentano contenuti fuori schermo che sono presenti nel DOM ma non sono visibili come link all'interno di un riquadro a scomparsa adattabile o un pulsante all'interno di una finestra modale che non è stato ancora visualizzato. Lasciando questi elementi nel DOM, puoi creare un'esperienza di digitazione confusa, soprattutto per gli screen reader, che annuncia i contenuti fuori schermo come se facessero parte della pagina.

Consulta la sezione Gestione dei contenuti fuori schermo. per suggerimenti sulla gestione di questi elementi.

Eseguire test con uno screen reader

Il miglioramento del supporto generale della tastiera pone alcune basi per il passaggio successivo, è controllare la pagina per verificare che le etichette e la semantica siano corrette e che non ci siano ostacoli a la navigazione con screen reader.

Se non hai dimestichezza con il modo in cui il markup semantico viene interpretato dai di tecnologia, consulta Struttura dei contenuti.

  • Controlla se in tutte le immagini è presente il testo alt corretto. L'eccezione a questa pratica è quando le immagini servono principalmente per la presentazione e non sono parti essenziali contenuti. Per indicare che gli screen reader devono saltare un'immagine, imposta il valore con una stringa vuota: alt="".
  • Seleziona tutti i controlli di un'etichetta. Per i controlli personalizzati, potrebbe essere necessario utilizzo di aria-label o aria-labelledby. Consulta Etichette e relazioni ARIA per consultare alcuni esempi.
  • Seleziona tutti i controlli personalizzati per verificare se è presente un role appropriato e gli eventuali ARIA richiesti che ne comunicano lo stato. Ad esempio, una casella di controllo personalizzata deve role="checkbox" e aria-checked="true|false" per comunicare correttamente stato. Consulta l'articolo Introduzione ad ARIA per informazioni generali panoramica su come ARIA può fornire una semantica mancante per i controlli personalizzati.
  • Fai in modo che il flusso di informazioni attraverso la pagina abbia senso. Poiché lo schermo lettori navigano nella pagina in ordine DOM, annunceranno tutti gli elementi che riposizionate visivamente tramite CSS in un ordine incomprensibile. Se hai bisogno che venga visualizzato all'inizio della pagina, spostarlo fisicamente in precedenza nel DOM.
  • Cerca di supportare la navigazione con screen reader per tutti i contenuti della pagina. Assicurati nessuna sezione del sito è nascosta definitivamente o bloccata sullo schermo e accesso in lettura.
    • I contenuti devono essere nascosti a uno screen reader, ad esempio se sono fuori schermo o solo in termini di presentazione, imposta i contenuti su aria-hidden="true". Per una spiegazione più approfondita, consulta Nascondere contenuti.

Acquisisci familiarità con gli screen reader

Può sembrare difficile imparare a usare uno screen reader, ma in realtà sono molto facile da usare. In generale, la maggior parte degli sviluppatori può svolgere questa operazione con poche semplici i comandi principali.

Se utilizzi un Mac, guarda questo video su VoiceOver, lo screen reader fornito con Mac OS. Se stai utilizzando un PC, dai un'occhiata a questo video su NVDA, una donazione di screen reader open source per Windows.

aria-hidden non impedisce lo stato attivo della tastiera

È importante capire che ARIA può influire solo sulla semantica di una element; non ha effetto sul comportamento dell'elemento. Puoi rendere un elemento nascosto agli screen reader con aria-hidden="true", ma non e modificare il comportamento dello stato attivo per quell'elemento. Per i contenuti interattivi fuori schermo, Per i contenuti interattivi fuori schermo, utilizza l'attributo inert per assicurarti che venga davvero rimosso dal flusso della tastiera. Per i browser meno recenti, combina aria-hidden="true" con tabindex="-1".

Gli elementi interattivi devono indicarne scopo e stato

Fornire suggerimenti visivi, o abbonamenti, relativi allo scopo di un controllo un'ampia varietà di persone su una vasta gamma di dispositivi utilizzano e navigano sul tuo sito.

  • Gli elementi interattivi, come link e pulsanti, devono essere distinguibili elementi non interattivi. L'utente ha difficoltà a navigare su un sito o un'app quando non sono in grado di capire se un elemento è cliccabile. Esistono molti modi validi per indicare elementi interattivi. Una prassi comune è quella di sottolineare i link per distinguerli dal testo circostante.
  • Analogamente al requisito dello stato attivo, gli elementi interattivi come link e pulsanti richiedono uno stato hover per indicare agli utenti del mouse quando il puntatore si trova su qualcosa cliccabile. Tuttavia, per rendere questi elementi accessibili ad altri metodi di input, devono essere distinguibili senza uno stato hover.

Sfrutta intestazioni e punti di riferimento

Le intestazioni e gli elementi di riferimento conferiscono alla pagina semantica la struttura semantica, e aumentano notevolmente l'efficienza di navigazione degli utenti delle tecnologie per la disabilità. Molti gli utenti di screen reader segnalano che, quando arrivano per la prima volta a una pagina sconosciuta, di solito provano a navigare per intestazioni.

Analogamente, gli screen reader offrono la possibilità di passare a punti di riferimento importanti come <main> e <nav>. Per questi motivi è importante considerare in che modo della pagina può essere utilizzata per guidare l'esperienza utente.

  • Utilizza la gerarchia h1-h6. Le intestazioni sono strumenti per creare la tua pagina. Non fare affidamento sullo stile integrato delle intestazioni. trattali invece che fossero tutte delle stesse dimensioni e di utilizzare il livello semanticamente appropriato per i contenuti primari, secondari e terziari. Quindi utilizza CSS per che corrispondano al design.
  • Usa ruoli ed elementi di riferimento in modo che gli utenti possano bypassare contenuti ripetitivi. Molti le tecnologie per la disabilità offrono scorciatoie per passare a parti specifiche della pagina, come quelle definite dagli elementi <main> o <nav>. Questi elementi hanno i ruoli dei punti di riferimento impliciti. Puoi utilizzare anche l'attributo ARIA role per definisci esplicitamente le regioni nella pagina, come in <div role="search">. Consulta Semantica e navigazione dei contenuti per saperne di più esempi.
  • Evita role="application" se non hai esperienza nell'uso di questo servizio. Il ruolo del punto di riferimento application indica alle tecnologie per la disabilità di disattivare la relativa le scorciatoie da tastiera e le pressioni dei tasti nella pagina. Ciò significa che le chiavi che gli utenti di screen reader in genere usano per spostarsi nella pagina non funzionano più, e dovrai implementare personalmente tutte la gestione della tastiera.

Esamina intestazioni e punti di riferimento con uno screen reader

Gli screen reader, come VoiceOver e NVDA, offrono un menu contestuale che consente di passare alle le aree più importanti della pagina. Durante il test di accessibilità, è possibile utilizzare questi menu per avere una panoramica della pagina e determinare se il tuo titolo i livelli sono appropriati e i punti di riferimento vengono utilizzati.

Per saperne di più, guarda questi video didattici sulle nozioni di base VoiceOver e NVDA:

Automatizza il processo

Testare manualmente un sito per verificarne l'accessibilità può essere noioso e soggetto a errori. È utile automatizzare i test poiché il più possibile. Puoi usare le estensioni del browser e l'accessibilità tramite riga di comando suite di test.

  • La pagina supera tutti i test del aXe o WAVE estensioni del browser? Sono disponibili altre opzioni, ma queste estensioni possono essere un'utile aggiunta a qualsiasi processo di test manuale perché possono rilevare problemi lievi come rapporti di contrasto non funzionanti e ARIA mancanti attributi.
    • Se preferisci lavorare dalla riga di comando, axe-cli offre le stesse funzionalità come estensione del browser aXe, ma può essere avviata dal tuo terminale.
  • Per evitare regressioni, soprattutto in un ambiente di integrazione continua, incorporare una libreria come axe-core nella tua suite di test automatizzata. axe-core è lo stesso motore che alimenta aXe, ma in un'utilità a riga di comando.
  • Se utilizzi un framework o una libreria, fornisce la sua accessibilità Google Workspace? Ad esempio, protractor-accessibility-plugin per Angular. Sfrutta gli strumenti a tua disposizione, quando possibile.

Usa Lighthouse per testare le PWA

Lighthouse è uno strumento misura le prestazioni della tua app web progressiva (PWA). Inoltre, utilizza la libreria axe-core per eseguire i test di accessibilità.

Se usi già Lighthouse, verifica che non si verifichi un problema di accessibilità test nel tuo report. Correggi gli errori per migliorare l'esperienza utente complessiva di nel tuo sito.

Risorse aggiuntive