Accessibilità per gli sviluppatori web

Migliorare l'accessibilità rende il tuo sito più utilizzabile per tutti.

Addy Osmani

È importante creare siti inclusivi e accessibili a tutti. Ci sono almeno sei aree chiave di disabilità per le quali è possibile ottimizzare: visiva, udito, mobilità, cognizione, voce e neurali. Molti strumenti e risorse possono essere d'aiuto in questo caso, anche se è la prima volta che conosci l'accessibilità web.

Oltre un miliardo di persone convivono con qualche forma di disabilità.

Per essere accessibili, i siti devono funzionare su più dispositivi con schermi di varie dimensioni e diversi tipi di input, come gli screen reader. Inoltre, i siti devono essere utilizzabili dal maggior numero di utenti, incluse le persone con disabilità.

Di seguito sono riportate alcune disabilità che potrebbero avere i tuoi utenti:

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

• Assicurati che i contenuti di testo soddisfino le soglie minime soglia del rapporto di contrasto.
• Evitare di comunicare informazioni usando solo il colore e assicurati che tutto il testo ridimensionabile.
• Assicurati che tutti i componenti dell'interfaccia utente possano essere utilizzati con tecnologie per la disabilità come screen reader, lenti d'ingrandimento e display braille. Ciò significa garantire che i componenti dell'interfaccia utente siano sottoposti a markup in modo che le API di accessibilità possano determinare in modo programmatico I campi role, state, value e title di qualsiasi elemento.

Io vivo con una persona ipovedente e spesso mi trovo ad aumentare lo zoom sui siti, ai relativi DevTools e al terminale. Sebbene il supporto dello zoom non sia quasi mai ai vertici della categoria elenchi di cose da fare, può fare davvero la differenza per gli utenti come me.

Problemi di udito significa che un utente potrebbe avere problemi a sentire l'audio emesso da una pagina.

• Fornire alternativa testuale per tutti i contenuti non strettamente testuali.
• Verifica che i componenti dell'interfaccia utente siano ancora funzionanti senza audio.

I problemi di mobilità possono includere l'impossibilità di utilizzare il mouse, la tastiera o un touchscreen.

• Rendere i contenuti dei componenti dell'interfaccia utente funzionalmente accessibile da una tastiera per qualsiasi azione che altrimenti userebbe il mouse.
• Assicurati che il markup delle pagine sia corretto per le tecnologie per la disabilità, tra cui screen reader, software di controllo vocale e controlli fisici, che tendono a utilizzare le stesse API.

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

• Fai attenzione quando utilizzi le animazioni. Evita video e animazioni che ripetizione o flash, e questo può causare problemi per alcuni utenti.

  La prefers-reduced-motion La query multimediale CSS consente di limitare le animazioni e con riproduzione automatica dei video per gli utenti che preferiscono la riduzione dei movimenti:

  /*
  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 che siano basato sul tempo.

Questi aspetti potrebbero sembrare molti, ma esamineremo la procedura di valutazione e il 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 fare e non riconoscere i poster digitali per l'accessibilità, che puoi utilizzare per condividere le best practice con il tuo team.

Misurare l'accessibilità del componente dell'UI

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

• Puoi utilizzare il componente UI solo con la tastiera?

  Il componente gestisce lo stato attivo ed evita il focus trap? Può rispondere agli eventi della tastiera appropriati?

• Puoi utilizzare il componente UI con uno screen reader?

  Hai fornito alternative testuali per le informazioni presentate visivamente? Hai aggiunto informazioni semantiche utilizzando ARIA?

• Il componente della UI può funzionare senza audio?

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

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

  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 Indisciplinati. (Prova tutte e quattro le forme di simulazione del daltonismo disponibili.) Potrebbero interessarti anche Daltonizza , che è altrettanto utile.

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

  Tutti i sistemi operativi moderni supportano la modalità ad alto contrasto. Contrasto elevato è un'estensione di Chrome che può aiutarti.

I controlli standardizzati (ad esempio <button> e <select>) hanno funzioni di accessibilità integrati nel browser. È possibile impostare lo stato attivo usando il tasto Tab; rispondono agli eventi della tastiera (come Enter, Space e tasti freccia); e hanno ruoli, stati e proprietà semantici usati dagli strumenti di accessibilità. Anche il loro stile predefinito deve soddisfare i requisiti di accessibilità elencati.

Componenti dell'interfaccia utente personalizzati (ad eccezione dei componenti che estendono come <button>) non hanno funzionalità integrate, tra cui: per l'accessibilità, quindi devi fornirla. Un buon punto di partenza l'implementazione dell'accessibilità consiste nel confrontare il componente con uno standard analogo (o una combinazione di diversi elementi standard, a seconda della complessità del componente).

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

Firefox ha anche un riquadro Accessibilità.

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

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

Migliora lo stato attivo della tastiera

Idealmente, assicurati che sia possibile accedere a tutte le funzionalità del componente dell'interfaccia utente usando una tastiera. Quando progetti l'esperienza utente, pensa a come useresti l'elemento solo con la tastiera e di trovare un insieme coerente di interazioni da tastiera.

Innanzitutto, accertati di avere un target pertinente per ogni componente. Ad esempio, un componente complesso come un menu può essere un obiettivo attivo all'interno di una pagina, ma dovrebbe quindi gestire lo stato attivo al suo interno in modo che la voce di menu attiva si focalizza sempre.

Usa Tabindex

Puoi aggiungere lo stato attivo della tastiera a elementi e componenti UI con l'tabindex . Gli utenti che usano solo la tastiera e le tecnologie per la disabilità devono poter posizionare lo stato attivo della tastiera sugli elementi per interagire con essi.

Gli elementi interattivi integrati (come <button>) sono implicitamente attivabili, quindi non è necessario un attributo tabindex, a meno che non sia necessario modificarne la posizione nell'ordine delle schede.

Esistono tre tipi di valori tabindex:

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

Trova alcuni casi d'uso di tabindex nell'articolo Utilizzo di tabindex.

Assicurati che lo stato attivo sia sempre visibile, utilizzando l'anello di messa a fuoco predefinito oppure applicando uno stile di messa a fuoco personalizzato distinguibile. Ricordati di non intrappolare utenti di tastiera: devono essere in grado di spostare lo stato attivo su un elemento. usando solo la tastiera.

Utilizzare la messa a fuoco automatica

L'attributo Messa a fuoco automatica HTML consente a un autore di specificare che una determinata dovrebbe diventare automaticamente lo stato attivo quando la pagina viene caricata. autofocus è già supportato su tutti i controlli dei moduli web, inclusi i pulsanti. Per mettere a fuoco automaticamente gli elementi nei tuoi componenti personalizzati dell'interfaccia utente, chiama il metodo focus(), supportato da tutti gli elementi HTML che possono essere incentrati (ad es. document.querySelector('myButton').focus()).

Aggiungi interazione da tastiera

Una volta che il componente dell'interfaccia utente è attivabile, fornisci una storia di interazione con la tastiera efficace. quando viene impostato lo stato attivo su un componente gestendo gli eventi della 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.

Infine, assicurati che le scorciatoie da tastiera siano rilevabili. È pratica comune avere una legenda delle scorciatoie da tastiera (testo sullo schermo) per informare l'utente dell'esistenza di scorciatoie. Ad esempio, "Premi ? per tastiera scorciatoie." In alternativa, è possibile utilizzare un suggerimento, ad esempio una descrizione comando, per informare l'utente su una scorciatoia.

L'importanza di gestire l'attenzione non può essere sottovalutata. Un esempio importante è un riquadro di navigazione a scomparsa. Se aggiungi un componente UI alla pagina, devi concentrarti su un elemento al suo interno; altrimenti gli utenti potrebbero dover scorrere intera pagina per arrivarci. Può essere un'esperienza frustrante, quindi assicurati di verificare lo stato attivo di tutti i componenti navigabili da tastiera della pagina.

// 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 di utilizzare correttamente lo screen reader

L'1-2% circa delle persone utilizza uno screen reader. Riesci a capire tutti i fattori importanti le informazioni e interagire con il componente usando lo screen reader e la tastiera da soli?

Le seguenti domande dovrebbero aiutarti a gestire l'accessibilità dello screen reader.

I componenti e le immagini hanno alternative di testo significative?

Dove sono disponibili informazioni sul nome o sulla scopo di un componente interattivo viene rappresentato a livello visivo, offrono un'alternativa accessibile al testo.

Ad esempio, se il componente UI <fancy-menu> mostra solo un'icona a forma di ingranaggio per indicare che si tratta di un menu Impostazioni, necessita di un'alternativa accessibile al testo, come "impostazioni", che trasmette le stesse informazioni. In base al contesto, puoi fornire un'alternativa testuale utilizzando un attributo alt, un attributo aria-label, un attributo aria-labelledby o testo normale nel DOM shadow. Puoi trovare suggerimenti tecnici generali nel Riferimento rapido di WebAIM.

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

I tuoi componenti forniscono informazioni semantiche?

La tecnologia per la disabilità trasmette informazioni semantiche che vengono altrimenti espresse a utenti vedenti con segnali visivi, come la formattazione, lo stile del cursore o la posizione. Gli elementi standardizzati hanno queste informazioni semantiche integrate nel browser, ma per i componenti personalizzati devi usare ARIA per aggiungere le informazioni.

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

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

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

Gli utenti sono in grado di capire tutto senza fare affidamento sul colore?

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

Il contrasto è sufficiente?

Qualsiasi contenuto testuale visualizzato nel componente deve rispettare i soglia di contrasto minima di livello WCAG AA. Valuta l'idea di fornire un tema ad alto contrasto che soddisfi le soglia AAA più alta, e garantire che i fogli di stile dello user agent possano essere applicati se gli utenti richiedono un contrasto personalizzato o colori diversi. Puoi usare questo controllo del contrasto di colore come supporto durante la progettazione del componente.

I contenuti in movimento o lampeggianti sono bloccabili e sicuri?

Gli utenti devono essere in grado di mettere in pausa, interrompere o nascondere i contenuti che si muovono, scorrono o lampeggia 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 più di 100 strumenti valutare l'accessibilità del sito e dei relativi componenti. Alcuni strumenti sono automatizzati, mentre altri richiedono test manuali.

Ecco alcuni esempi:

• Axe offre funzionalità di accessibilità automatica per il framework o il browser che preferisci. Battinaio con asce può essere utilizzata per scrivere test di accessibilità automatizzati.

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

  

• Tenon.io è utile per testare i problemi di accessibilità più comuni. Tenon offre un solido supporto per l'integrazione tra gli strumenti di creazione, i browser (attraverso estensioni) e persino editor di testo.

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

  

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

  

Lavora con le tecnologie per la disabilità

• Puoi esaminare il modo in cui le tecnologie per la disabilità vedono i contenuti web utilizzando Controllo accessibilità (Mac) o strumenti di test dell'API Windows Automation e AccProbe (Windows). Puoi anche vedere l'intero albero dell'accessibilità creato da Chrome andando su about://accessibility.
• Il modo migliore per verificare il supporto dello screen reader su un Mac è utilizzare VoiceOver utilità. Usa ⌘F5 per attivarlo o disattivarlo, Ctrl+Option ←→ per spostarti la pagina e Ctrl+Shift+Option + ↑↓ per spostarti in alto e in basso nella sezione albero di Natale. Per istruzioni più dettagliate, Consultare l'elenco completo dei comandi di VoiceOver. e l'elenco dei comandi web di VoiceOver.

• Su Windows, NVDA è una schermata open source senza costi Reader. Tuttavia, presenta una curva di apprendimento ripida per gli utenti vedenti.

  

• ChromeOS ha un screen reader integrato.

Abbiamo molto da fare per migliorare l'accessibilità sul web. Secondo il Web Almanac:

• 4 siti su 5 contengono testo che si confonde con lo sfondo, rendendole 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 etichette.
• Solo il 22,33% delle pagine fornisce etichette per tutti gli input del modulo.

Possiamo fare molto per creare esperienze più accessibili per tutti.