Come eseguire controlli sull'accessibilità

Rob Dodson

Determinare se il tuo sito web o la tua applicazione sono accessibili può sembrare un'impresa ardua. Se ti avvicini all'accessibilità per la prima volta, l'ampiezza dell'argomento potrebbe chiederti da dove iniziare. Dopotutto, elaborare per soddisfare una vasta gamma di abilità significa che devi considerare una gamma corrispondentemente diversificata di problemi.

Questo post suddivide questi problemi in una procedura logica e passo passo per la revisione dell'accessibilità di un sito esistente.

Inizia con la tastiera

Per gli utenti che non possono o scelgono di non usare il mouse, la navigazione da tastiera è il mezzo principale per raggiungere tutti gli elementi sullo schermo. Questo segmento di pubblico include utenti con disabilità motorie, come lesioni da stress ripetitivo (RSI) o paralisi, nonché 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 chiaramente distinguibili.

  • Inizia navigando con le schede all'interno del sito. L'ordine in cui gli elementi sono attivi deve seguire l'ordine del DOM. Se hai dubbi su quali elementi devono essere impostati come attivo, consulta la sezione Concetti fondamentali di Focus per un ripasso. La best practice prevede che qualsiasi controllo con cui un utente può interagire o per cui può interagire deve essere attivabile e mostrare un indicatore di messa a fuoco (ad esempio un anello di messa a fuoco).

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

  • Rendi focalizzabile solo i contenuti interattivi. L'aggiunta di tabindex a elementi non interattivi come i titoli rallenta gli utenti della tastiera che possono vedere la schermata e non aiuta gli utenti di screen reader perché lo screen reader sa già di annunciarli.

  • Se aggiungi nuovi contenuti a una pagina, indirizza l'utente prima su quei contenuti in modo che possa intraprendere un'azione. Per alcuni esempi, consulta Gestire il focus a livello di pagina.

  • Progetta il tuo sito in modo che l'utente possa sempre focalizzare l'elemento successivo quando lo desidera. Fai attenzione ai widget di completamento automatico e ad altri contesti che possono bloccare lo stato attivo della tastiera. Puoi bloccare temporaneamente lo stato attivo quando vuoi che l'utente interagisca con una finestra modale e non con il resto della pagina, ma dovresti sempre fornire un modo accessibile dalla tastiera per uscire dalla finestra modale. Per un esempio, consulta Modali e trappole per tastiera.

Rendi utilizzabile il controllo della messa a fuoco

Se hai creato un controllo personalizzato, consenti agli utenti di usufruire di tutte le funzionalità utilizzando solo la tastiera. Per conoscere le tecniche per migliorare l'accesso da tastiera, consulta Gestione dell'attenzione nei componenti.

Gestire i contenuti fuori schermo

Molti siti presentano contenuti fuori schermo che sono presenti nel DOM ma non visibili, ad esempio link all'interno di un menu a scomparsa adattabile o un pulsante all'interno di una finestra modale non ancora visualizzata. Lasciare questi elementi nel DOM può creare un'esperienza di digitazione confusa, in particolare per gli screen reader, che annunciano i contenuti fuori schermo come se fossero 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 costituisce una base per il passaggio successivo, ovvero controllare la pagina per verificare che l'etichettatura e la semantica siano corrette, nonché per eventuali ostruzioni alla navigazione dello screen reader.

Se non hai dimestichezza con l'interpretazione del markup semantico dalle tecnologie per la disabilità, leggi Struttura dei contenuti.

  • Controlla che il testo alt sia corretto in tutte le immagini. L'eccezione è quando le immagini sono principalmente a scopo di presentazione e non sono parti di contenuti essenziali. Per indicare che gli screen reader devono saltare un'immagine, imposta il valore su una stringa vuota: alt="".
  • Seleziona tutti i controlli di un'etichetta. Per i controlli personalizzati, potrebbe essere necessario l'utilizzo di aria-label o aria-labelledby. Per alcuni esempi, consulta Etichette e relazioni ARIA.
  • Controlla tutti i controlli personalizzati per un valore role appropriato e gli eventuali attributi ARIA obbligatori che comunicano il loro stato. Ad esempio, una casella di controllo personalizzata ha bisogno dei valori role="checkbox" e aria-checked="true|false" per comunicare correttamente lo stato. Consulta Introduzione ad ARIA per una panoramica generale di come ARIA può fornire una semantica mancante per i controlli personalizzati.
  • Fai in modo che il flusso di informazioni all'interno della pagina abbia un senso. Poiché gli screen reader navigano nella pagina in ordine DOM, annunceranno tutti gli elementi che hai riposizionato visivamente usando CSS in un ordine incomprensibile. Se hai bisogno di visualizzare qualcosa in precedenza nella pagina, spostalo fisicamente prima nel DOM.
  • Cerca di supportare la navigazione con screen reader per tutti i contenuti della pagina. Assicurati che nessuna sezione del sito sia nascosta definitivamente o bloccata dall'accesso dello screen reader.
    • Se i contenuti devono essere nascosti da uno screen reader, ad esempio se sono fuori schermo o solo di presentazione, impostali su aria-hidden="true". Per una spiegazione più dettagliata, consulta la sezione Nascondere contenuti.

Acquisire familiarità con gli screen reader

Anche se può sembrare difficile imparare a usare uno screen reader, in realtà sono piuttosto facili da usare. In genere, gli sviluppatori possono risolvere il problema con pochi semplici comandi chiave.

Se utilizzi Mac, guarda questo video su VoiceOver, lo screen reader fornito con Mac OS. Se utilizzi un PC, guarda questo video su NVDA, una donazione supportata con 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 un elemento, ma non sul comportamento dell'elemento. Puoi nascondere un elemento agli screen reader con aria-hidden="true", ma questo non modifica 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 effettivamente rimosso dal flusso della tastiera. Per i browser meno recenti, combina aria-hidden="true" con tabindex="-1".

Gli elementi interattivi devono indicarne lo scopo e lo stato

Fornire suggerimenti visivi, o convenienti, sulle funzionalità di un controllo consente a un'ampia varietà di persone su una vasta gamma di dispositivi di operare e navigare sul tuo sito.

  • Gli elementi interattivi, come link e pulsanti, devono essere distinguibili da quelli non interattivi. È difficile per gli utenti navigare in un sito o in un'app quando non riescono a capire se un elemento è cliccabile. Esistono molti modi validi per indicare gli elementi interattivi. Una pratica comune è sottolineare i link per distinguerli dal testo circostante.
  • Analogamente al requisito di impostazione 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 un elemento selezionabile. Tuttavia, per renderli accessibili ad altri metodi di input, questi elementi devono essere distinguibili senza uno stato hover.

Sfrutta intestazioni e punti di riferimento

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

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

  • Utilizza la gerarchia h1-h6. Le intestazioni sono strumenti per creare una struttura per la pagina. Non fare affidamento sullo stile integrato delle intestazioni. Considerali invece come se fossero tutti della stessa dimensione e utilizza il livello semanticamente appropriato per i contenuti primari, secondari e terziari. Poi utilizza CSS per far corrispondere le intestazioni al tuo design.
  • Utilizza ruoli e elementi di riferimento in modo che gli utenti possano bypassare i contenuti ripetitivi. Molte tecnologie assistive forniscono scorciatoie per passare a parti specifiche della pagina, ad esempio quelle definite dagli elementi <main> o <nav>. Questi elementi hanno ruoli di riferimento impliciti. Puoi anche utilizzare l'attributo role ARIA per definire esplicitamente le regioni nella pagina, come in <div role="search">. Per altri esempi, consulta la pagina relativa alla semantica e all'esplorazione dei contenuti.
  • Evita role="application", a meno che tu non abbia esperienza nell'uso. Il ruolo del punto di riferimento application indica alle tecnologie per la disabilità di disabilitare le scorciatoie e di eseguire tutte le pressioni dei tasti per visualizzare la pagina. Ciò significa che i tasti che gli utenti di screen reader solitamente utilizzano per spostarsi nella pagina non funzionano più e dovrai implementare in autonomia 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 per passare alle regioni importanti della pagina. Durante i test di accessibilità, puoi utilizzare questi menu per ottenere una panoramica della pagina e determinare se i livelli delle intestazioni sono appropriati e quali punti di riferimento sono in uso.

Per ulteriori informazioni, consulta questi video didattici sulle nozioni di base di VoiceOver e di NVDA.

Automatizza il processo

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

  • La pagina supera tutti i test delle estensioni del browser aXe o WAVE? Sono disponibili altre opzioni, ma queste estensioni possono essere utili da aggiungere a qualsiasi procedura di test manuale, perché possono rilevare problemi lievi come errori dei rapporti di contrasto e attributi ARIA mancanti.
    • Se preferisci lavorare sulla riga di comando, axe-cli offre le stesse funzionalità dell'estensione browser aXe, ma può essere eseguito dal tuo terminale.
  • Per evitare regressioni, soprattutto in un ambiente di integrazione continua, incorpora una libreria come axe-core nella tua suite di test automatizzata. axe-core è lo stesso motore su cui si basa l'estensione aXe Chrome, ma in un'utilità a riga di comando.
  • Se utilizzi un framework o una libreria, fornisce i propri strumenti di accessibilità? Ad esempio, protractor-accessibility-plugin per Angular. Se possibile, sfrutta gli strumenti disponibili.

Usa Lighthouse per testare le PWA

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

Se usi già Lighthouse, cerca nel report eventuali test di accessibilità non riusciti. Correggi gli errori per migliorare l'esperienza utente complessiva del tuo sito.

Altre risorse