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 untabindex="0"
. I valoritabindex
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
oaria-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 valorirole="checkbox"
earia-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.
- Se i contenuti devono essere nascosti da uno screen reader, ad esempio se sono
fuori schermo o solo di presentazione, impostali su
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 statohover
.
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'attributorole
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 riferimentoapplication
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.