Accessibilità per gli sviluppatori web

Una migliore accessibilità rende il tuo sito più utile per tutti.

Addy Osmani

Suggerimento: segui Imparare l'accessibilità, un corso di accessibilità permanente e riferimento per migliorare il tuo sviluppo web.

È importante creare siti inclusivi e accessibili a tutti. Esistono almeno sei aree chiave di disabilità che puoi ottimizzare per: visiva, udito, mobilità, cognizione, voce e neurale. Molti strumenti e risorse possono esserti d'aiuto, anche se non hai mai usato l'accessibilità web.

Oltre un miliardo di persone vivono con una qualche forma di disabilità.

Per essere accessibili, i siti devono funzionare su più dispositivi con schermi di varie dimensioni e tipi di input differenti, come gli screen reader. Inoltre, i siti devono essere utilizzabili da un gruppo più ampio di utenti, inclusi quelli con disabilità.

Ecco alcune disabilità che potrebbero avere i tuoi utenti:

Visione artificiale	Audizione	Difficoltà di deambulazione
Ipovedenti Cecità Daltonismo Cataratte Bagliore di sole	Problemi di udito Sordità Rumore Infezione all'orecchio	Lesione del midollo spinale Destrezza limitata Mani impegnate
Intellettive	Parlato	Neurali
Difficoltà di apprendimento Sonnolenza o distrazione Emicrania Autismo Crisi	Rumore ambientale Mal di gola Impedimento del linguaggio Non posso parlare	Depressione Disturbo post-traumatico da stress Disturbo bipolare Ansia

I problemi visivi vanno dall'incapacità di distinguere i colori all'assenza di vista.

• Assicurati che i contenuti di testo soddisfino una soglia minima per il rapporto di contrasto.
• Evita di comunicare informazioni utilizzando esclusivamente colori e assicurati che tutto il testo sia resizable.
• Assicurati che tutti i componenti dell'interfaccia utente possano essere usati con tecnologie per la disabilità come screen reader, lenti di ingrandimento e display braille. Ciò comporta la garanzia che i componenti dell'interfaccia utente siano sottoposti a markup, in modo che le API di accessibilità possano determinare in modo programmatico il role, lo state, il value e il title di qualsiasi elemento.

Suggerimento: la funzionalità di ispezione degli elementi nel browser mostra una descrizione comando delle proprietà CSS che include un controllo rapido del rapporto di contrasto di colore.

Personalmente, ipovedente e spesso mi trovo a dover aumentare lo zoom sui siti, sui relativi DevTools e sul terminale. Anche se il supporto dello zoom non è quasi mai in cima all'elenco delle cose da fare degli sviluppatori, può fare davvero la differenza per utenti come me.

I problemi di udito indicano che un utente potrebbe avere problemi di udito da una pagina.

• Fornisci alternative testuali per tutti i contenuti che non sono strettamente testuali.
• Verifica che i componenti dell'interfaccia utente siano ancora funzionanti senza audio.

I problemi di mobilità possono includere l'impossibilità di usare un mouse, una tastiera o un touchscreen.

• Rendi i contenuti dei componenti dell'interfaccia utente funzionalmente accessibili da una tastiera per qualsiasi azione per le quali altrimenti utilizzeresti il mouse.
• Assicurati che le pagine siano correttamente sottoposte a markup per le tecnologie per la disabilità, tra cui screen reader, software di controllo vocale e controlli dei sensori fisici, che tendono a utilizzare le stesse API.

I problemi cognitivi indicano che un utente potrebbe aver bisogno di tecnologie per la disabilità che lo aiutino a leggere il testo, quindi è importante assicurarsi che esistano alternative di testo.

• Fai attenzione quando utilizzi le animazioni. Evita video e animazioni che ripetono o lampeggiano, che possono causare problemi per alcuni utenti.

  La query supporti CSS prefers-reduced-motion consente di limitare le animazioni e i video con riproduzione automatica per gli utenti che preferiscono un movimento ridotto:

  /*
  If the user expresses a preference for reduced motion, don't use animations on buttons.
  */
  @media (prefers-reduced-motion: reduce) {
    button {
      animation: none;
    }
  }
  

• Evita interazioni basate sul tempo.

Questi aspetti possono sembrare molti aspetti da trattare, ma ci occuperemo del processo di valutazione e miglioramento dell'accessibilità dei componenti dell'interfaccia utente.

Per un ulteriore supporto visivo, il team per l'accessibilità di GOV.UK ha creato una serie di poster digitali per l'accessibilità: cose da fare e da non fare, che puoi usare per condividere le best practice con il tuo team.

Sei poster che elencano le best practice relative all'accessibilità. Leggi il testo completo.

Misura l'accessibilità dei componenti UI

Quando controlli l'accessibilità dei componenti dell'interfaccia utente della pagina, chiediti:

• Puoi utilizzare il componente dell'interfaccia utente solo con la tastiera?

  Il componente gestisce la messa a fuoco ed evita i filtri per la messa a fuoco? Risponde agli eventi della tastiera appropriati?

• È possibile utilizzare il componente dell'interfaccia utente con uno screen reader?

  Hai fornito alternative di testo per alcune informazioni presentate visivamente? Hai aggiunto informazioni semantiche utilizzando ARIA?

• Il componente dell'interfaccia utente può funzionare senza audio?

  Spegni gli altoparlanti ed esamina i tuoi casi d'uso.

• Il componente dell'interfaccia utente può funzionare senza colore?

  Assicurati che il componente dell'interfaccia utente possa essere utilizzato da qualcuno che non può vedere i colori. Uno strumento utile per simulare il daltonismo è un'estensione di Chrome chiamata Daltonismo. (Prova tutte e quattro le forme di simulazione del daltonismo disponibili). Potresti anche trovare utile l'estensione Daltonize, che è altrettanto utile.

• Il componente dell'interfaccia utente può funzionare con la modalità ad alto contrasto attivata?

  Tutti i sistemi operativi moderni supportano una modalità ad alto contrasto. Alto contrasto è un'estensione di Chrome che può aiutarti in questo caso.

I controlli standardizzati (come <button> e <select>) hanno l'accessibilità integrata nel browser. Sono attivabili tramite il tasto Tab, rispondono agli eventi della tastiera (come Enter, Space e tasti freccia) e hanno ruoli, stati e proprietà semantici utilizzati dagli strumenti di accessibilità. Lo stile predefinito deve inoltre soddisfare i requisiti di accessibilità elencati.

I componenti personalizzati dell'interfaccia utente (ad eccezione dei componenti che estendono gli elementi standard come <button>) non hanno funzionalità integrate, inclusa l'accessibilità, quindi devi fornirla. Un buon punto di partenza per l'implementazione dell'accessibilità è confrontare il componente con un elemento standard analogo (o con una combinazione di più elementi standard, a seconda della complessità del componente).

La maggior parte degli strumenti per sviluppatori dei browser supporta l'ispezione dell'albero dell'accessibilità di una pagina. In Chrome DevTools è disponibile nella scheda Accessibilità del riquadro Elementi.

Firefox ha anche un riquadro Accessibilità.

Safari mostra le informazioni sull'accessibilità nella scheda Nodo del riquadro Elementi.

Di seguito è riportato un elenco di domande che puoi porti quando cerchi di rendere più accessibili i componenti dell'interfaccia utente.

Migliora la messa a fuoco della tastiera

Idealmente, assicurati che tutte le funzionalità del componente UI siano accessibili con una tastiera. In fase di progettazione dell'esperienza utente, pensa a come useresti l'elemento usando la sola tastiera e stabilisci un insieme coerente di interazioni da tastiera.

In primo luogo, assicurati di avere un obiettivo di messa a fuoco ragionevole per ogni componente. Ad esempio, un componente complesso come un menu può rappresentare un obiettivo all'interno di una pagina, ma dovrebbe gestire l'elemento attivo al suo interno in modo che la voce di menu attiva sia sempre attiva.

Gestire l'attenzione all'interno di un elemento complesso.

Usa tabindex

Puoi aggiungere lo stato attivo della tastiera per elementi e componenti UI con l'attributo tabindex. Gli utenti che usano solo la tastiera e le tecnologie per la disabilità devono essere in grado di attivare la tastiera sugli elementi per potervi interagire.

Gli elementi interattivi integrati (come <button>) possono essere attivati in modo implicito, pertanto non hanno bisogno di un attributo tabindex, a meno che non sia necessario cambiare la loro posizione nell'ordine delle schede.

Esistono tre tipi di valori tabindex:

• tabindex="0" è il più comune e posiziona l'elemento nell'ordine della scheda naturale (definito dall'ordine DOM).
• Un valore tabindex maggiore di 0 posiziona l'elemento in un ordine manuale delle schede. Tutti gli elementi nella pagina con un valore tabindex positivo vengono visitati in ordine numerico, prima degli elementi nell'ordine naturale delle schede.
• Un valore tabindex uguale a -1 fa sì che l'elemento sia attivabile in modo programmatico, ma non nell'ordine delle schede.

Per i componenti personalizzati dell'interfaccia utente, usa sempre valori tabindex pari a 0 o -1, poiché non potrai determinare in anticipo l'ordine degli elementi in una determinata pagina. Un valore tabindex pari a -1 è particolarmente utile per gestire lo stato attivo all'interno di componenti complessi.

Assicurati che lo stato attivo sia sempre visibile, utilizzando lo stile predefinito dell'anello di messa a fuoco o applicando uno stile personalizzato distinguibile. Ricordati di non intrappolare gli utenti che usano la tastiera: dovrebbero poter distogliere lo stato attivo da un elemento utilizzando solo la tastiera.

Nota: potrebbero interessarti anche gli approcci "roving tabindex" o aria-activedescendant, come indicato su MDN.

Utilizzare la messa a fuoco automatica

L'attributo di messa a fuoco automatica HTML consente a un autore di specificare che un determinato elemento deve essere impostato automaticamente quando la pagina viene caricata. autofocus è già supportato in tutti i controlli dei moduli web, inclusi i pulsanti. Per impostare la messa a fuoco automatica degli elementi nei tuoi componenti personalizzati dell'interfaccia utente, chiama il metodo focus(), supportato da tutti gli elementi HTML che possono essere attivati (ad esempio, document.querySelector('myButton').focus()).

Aggiungi interazione da tastiera

Dopo aver impostato lo stato attivo sul componente dell'interfaccia utente, fornisci una storia di interazione con la tastiera efficace gestendo eventi da tastiera appropriati. Ad esempio, consenti all'utente di utilizzare i tasti freccia per selezionare le opzioni di menu e Space o Enter per attivare i pulsanti. La guida ai pattern di progettazione di ARIA fornisce alcune indicazioni qui.

Infine, assicurati che le scorciatoie da tastiera siano rilevabili. È prassi comune creare una legenda delle scorciatoie da tastiera (testo sullo schermo) per informare l'utente dell'esistenza delle scorciatoie. Ad esempio, "Premi ? per le scorciatoie da tastiera." In alternativa, un suggerimento come questa descrizione comando può essere utilizzato per informare l'utente della scorciatoia.

Non si può sottovalutare l'importanza della gestione dell'attenzione. Un esempio importante è il riquadro di navigazione a scomparsa. Se aggiungi un componente dell'interfaccia utente alla pagina, devi impostare lo stato attivo su un elemento al suo interno; in caso contrario, gli utenti potrebbero dover scorrere l'intera pagina per arrivarci. Potrebbe essere un'esperienza frustrante, quindi assicurati di verificare lo stato attivo di tutti i componenti navigabili da tastiera nella pagina.

Suggerimento: puoi usare Puppeteer per automatizzare l'esecuzione dei test di accessibilità della tastiera per l'attivazione/disattivazione degli stati dell'UI. WalkMe Engineering ha un'ottima guida a questo proposito che ti consiglio di leggere.

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

Assicurati che lo screen reader venga utilizzato correttamente

Circa l'1%-2% delle persone utilizza uno screen reader. Riesci a comprendere tutte le informazioni importanti e a interagire con il componente utilizzando solo lo screen reader e la tastiera?

Le seguenti domande dovrebbero aiutarti a risolvere i problemi di accessibilità dello screen reader.

Tutti i componenti e le immagini hanno alternative di testo significative?

Ovunque vengano comunicate visivamente le informazioni sul nome o sullo scopo di un componente interattivo, fornisci un'alternativa di testo accessibile.

Ad esempio, se il componente dell'interfaccia utente di <fancy-menu> mostra solo un'icona a forma di ingranaggio per indicare che si tratta di un menu delle impostazioni, è necessaria un'alternativa di testo accessibile, ad esempio "impostazioni", che trasmette le stesse informazioni. A seconda del contesto, puoi fornire un'alternativa di testo utilizzando un attributo alt, un attributo aria-label, un attributo aria-labelledby o testo normale nel DOM shadow. Puoi trovare suggerimenti tecnici generali nella Guida di riferimento rapido di WebAIM.

Qualsiasi componente dell'interfaccia utente che mostra un'immagine deve fornire un meccanismo per fornire un testo alternativo per l'immagine in questione, analogo all'attributo alt.

I tuoi componenti forniscono informazioni semantiche?

La tecnologia per la disabilità trasmette informazioni semantiche altrimenti espresse agli utenti vedenti con indicazioni visive, come la formattazione, lo stile del cursore o la posizione. Gli elementi standardizzati hanno queste informazioni semantiche integrate dal browser, ma per i componenti personalizzati devi utilizzare ARIA per aggiungere le informazioni.

In generale, qualsiasi componente che rimane in ascolto di un evento di clic o passaggio del mouse deve avere un tipo di listener di eventi da tastiera e un ruolo ARIA, possibilmente anche stati e attributi ARIA.

Ad esempio, un componente UI personalizzato di <fancy-slider> potrebbe avere un ruolo ARIA di cursore, che ha alcuni attributi ARIA correlati: aria-valuenow, aria-valuemin e aria-valuemax. Associando questi attributi alle proprietà pertinenti del tuo componente personalizzato, puoi consentire agli utenti delle tecnologie per la disabilità di interagire con l'elemento, modificarne il valore e persino modificare la presentazione visiva dell'elemento di conseguenza.

Un componente di cursore di intervallo.

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

Gli utenti riescono a capire tutto senza affidarsi ai colori?

Il colore non deve essere utilizzato come unico mezzo per trasmettere informazioni, ad esempio indicare uno stato, richiedere una risposta all'utente o visualizzare i dati. Ad esempio, se hai un grafico a torta, fornisci etichette e valori per ogni sezione in modo che gli utenti con disabilità visiva possano capire le informazioni, anche se non possono vedere dove iniziano e finiscono le sezioni:

Un grafico a torta accessibile. (Dalla W3C Web Accessibility Initiative.)

Il contrasto è sufficiente?

Tutti i contenuti di testo visualizzati nel componente devono soddisfare la soglia di contrasto minima WCAG AA. Valuta la possibilità di fornire un tema ad alto contrasto che soddisfi la soglia AAA più alta e assicurati che i fogli di stile dello user agent possano essere applicati se gli utenti richiedono un contrasto personalizzato o colori diversi. Puoi utilizzare questo Strumento di controllo del contrasto del colore come supporto durante la progettazione del componente.

I contenuti in movimento o lampeggianti possono essere interrotti e sicuri?

Gli utenti dovrebbero essere in grado di mettere in pausa, interrompere o nascondere i contenuti che si spostano, scorrono o lampeggiano per più di cinque secondi. In generale, evita contenuti lampeggianti.

Se qualcosa deve lampeggiare, assicurati che non lampeggi più di tre volte al secondo.

Strumenti di accessibilità e test

Sono disponibili oltre 100 strumenti per valutare l'accessibilità del tuo sito e dei suoi componenti. Alcuni strumenti sono automatizzati, mentre altri richiedono test manuali.

Ecco alcuni suggerimenti da prendere in considerazione:

• Axe fornisce test automatici di accessibilità per il framework o il browser che preferisci. Axe Puppeteer può essere utilizzato per scrivere test di accessibilità automatici.

• Un controllo di accessibilità Lighthouse fornisce informazioni utili per scoprire problemi di accessibilità comuni. Il punteggio di accessibilità è una media ponderata di tutti i controlli di accessibilità in base alle valutazioni dell'impatto degli utenti dell'asse. Per il monitoraggio dell'accessibilità con integrazione continua, consulta Lighthouse CI.

  

• Tenon.io è utile per testare problemi di accessibilità più comuni. Tenon supporta l'integrazione con strumenti di creazione, browser (tramite estensioni) e persino editor di testo.

• Esistono molti strumenti specifici di librerie e framework per evidenziare i problemi di accessibilità con i componenti. Ad esempio, utilizza eslint-plugin-jsx-a11y per evidenziare i problemi di accessibilità per i componenti di React nell'editor.

  

  Se usi Angular, codelyzer offre anche controlli dell'accessibilità nell'editor:

  

Lavorare con le tecnologie per la disabilità

Suggerimento: scopri come eseguire i test delle tecnologie per la disabilità.

• Puoi esaminare il modo in cui le tecnologie per la disabilità vedono i contenuti web utilizzando Accessibility Inspector (Mac) o Strumenti di test dell'API Windows Automation e AccProbe (Windows). Puoi anche visualizzare l'albero dell'accessibilità creato da Chrome accedendo a about://accessibility.
• Il modo migliore per verificare il supporto dello screen reader su Mac è utilizzare l'utilità VoiceOver. Usa ⌘F5 per attivarla o disattivarla, Ctrl+Option ←→ per spostarti nella pagina e Ctrl+Shift+Option + ↑↓ per spostarti in alto e in basso nell'albero dell'accessibilità. Per istruzioni più dettagliate, consulta l'elenco completo dei comandi di VoiceOver e l'elenco dei comandi web di VoiceOver.

• Su Windows, NVDA è uno screen reader open source senza costi. Tuttavia, ha una curva di apprendimento ripida per gli utenti vedenti.

  

• ChromeOS ha uno screen reader integrato.

Abbiamo molto da fare per migliorare l'accessibilità sul web. Secondo l'Almanacco del web:

• 4 siti su 5 hanno testo che si confonde con lo sfondo, il che li rende illeggibili.
• Il 49,91% delle pagine continua a non fornire gli attributi alt per alcune immagini.
• Solo il 24% delle pagine che utilizzano pulsanti o link include le etichette.
• Solo il 22,33% delle pagine fornisce etichette per tutti gli input dei moduli.

C'è molto che possiamo fare per creare esperienze più accessibili a tutti.

Suggerimento: per saperne di più sugli aspetti fondamentali dell'accessibilità e per contribuire a migliorare le statistiche, consulta le sezioni Accessibile a tutti e Imparare l'accessibilità.