4 problemi comuni di accessibilità del Web da conoscere

Problema del rapporto di contrasto

Il problema di accessibilità più comune che ho riscontrato nel corso degli anni è quello della problema di accessibilità del contrasto e del coloreUn cattivo rapporto di contrasto renderà difficile vedere il contenuto della pagina e questo sarà molto dannoso per gli utenti, compresi quelli con disabilità visive.

Il contrasto è una misura della differenza di "luminanza" o luminosità percepita tra due colori, ad esempio la differenza tra il colore di sfondo e il colore di primo piano del contenuto della pagina. Diamo un'occhiata a questa barra navale.

Supponiamo che al cliente piaccia molto quel colore verdastro e lo trovi fantastico, ma c'è un problema di contrasto. Abbiamo un #FFFF sfondo con un #83A94C Il colore del testo risulta in un rapporto di contrasto di 2,71:1, molto al di sotto del valore minimo previsto. 4.5:1 necessario. Per individuare questo problema abbiamo diverse soluzioni:

1. Utilizzate un verificatore di contrasto online come il Controllo del contrasto Webaimche calcolerà il rapporto di contrasto e fornirà un valore di Passo o Bocciatura grado.
2. Utilizzate una delle numerose estensioni di controllo del contrasto del browser, ad esempio: WCAG Controllo del contrasto cromatico.
3. Provate il verificatore di contrasto integrato nel browser. Per utilizzarlo su Google Chrome, aprite gli strumenti di sviluppo, ispezionate l'elemento in questione (ad esempio, il link Home della nostra navbar), andate alla proprietà CSS color e fate clic sul rettangolo del colore per aprire il selezionatore di colori; in basso, vi verrà presentato un valore del rapporto di contrasto, espandetelo per maggiori dettagli. La procedura è esattamente la stessa per Firefox, con una piccola differenza nel rapporto mostrato in basso a sinistra del selezionatore di colori.

Per avere maggiori dettagli sul contrasto, guardate qui Articolo sull'accessibilità di contrasto e colore.

Problema del testo del link

I link sono una parte importante del web al giorno d'oggi, quindi renderli accessibili è molto importante. Un link deve avere un senso e informare l'utente del suo contesto, quindi un link poco informativo con un testo come leggi di più, clicca qui, controlla i dettagli non è molto utile. prodotto dettagli, ad esempio, utilizzare il nome del prodotto come "The Mandalorian Helmet" è meglio e più informativo. Parole come clicca qui o di più su può essere omesso perché un link è cliccabile per impostazione predefinita e qualcosa come "maggiori informazioni sulle notizie di oggi" può essere abbreviato in "notizie di oggi". Non ci sono regole o limiti particolari per la lunghezza dei link, l'opzione il link deve essere leggibile e abbastanza lungo da fornire una buona descrizione del suo scopo.

Le immagini come link sono un modello molto diffuso, quindi deve seguire le stesse regole di cui abbiamo parlato sopra. L'attributo alt dell'immagine svolgerà il ruolo di testo del link e sarà annunciato dagli screen reader. Ci sono diversi scenari quando si trattano le immagini come link: se l'immagine è l'unico contenuto del link, allora deve avere un attributo alt, se il link contiene del testo e un'immagine, allora possiamo omettere l'attributo alt; ecco alcuni esempi:

<a href="/it/notifications/">
  <img src="/img/notification.png" alt="Notifiche">
</a>

Per saperne di più sull'accessibilità dei link, consultate i link qui presenti:Testo e aspetto dei link, Immagini funzionali.

L'input del modulo manca di un'etichetta

Abbiamo visto tutti questi input di form senza etichetta e con un segnaposto per descrivere lo scopo dell'input. Una prima nota è che non appena l'utente compila tutti gli input e i segnaposto non sono più visibili, non avremo alcun contesto visivo sullo scopo degli input, ma concentriamoci sull'accessibilità.

Associare un etichetta a un input ci offre due vantaggi principali: uno screen reader leggerà l'etichetta quando l'utente è focalizzato sull'input del form e quando un'etichetta viene cliccata o toccata il browser passa il focus all'input associato. Una soluzione semplice per questo tipo di situazione è aggiungere le etichette come segue:

    Nome

    
  

    Cognome

    
  

    Indirizzo e-mail

    
  

    Invia
  

```

Ecco, tutti gli input hanno le loro etichette associate che li rendono accessibili a tutti. Possiamo anche rimuovere i segnaposto per evitare di duplicare lo scopo dell'input, ma sappiamo tutti che gli scenari del mondo reale non sono così facili da gestire: avete appena ricevuto un progetto con questi input del modulo senza etichette e il cliente non vuole cambiare questa parte. La prima soluzione che ci viene in mente è quella di applicare un'etichetta visualizzazione: nessuna; o visibilità: nascosto; alle nostre etichette, questo le nasconderà, ma sono ancora lì, giusto? Queste proprietà nascondono gli elementi non solo sullo schermo, ma anche per gli utenti di screen reader, quindi non risolvono il problema.

Possiamo utilizzare il modello a clip per risolvere questo problema. In questo modo, nasconderemo il contenuto visivamente, ma lo forniremo ai lettori di schermo. Creeremo il seguente CSS sr-solo e applicarla a tutte le nostre etichette:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   percorso clip: inset(50%);
   altezza: 1px;
   overflow: nascosto;
   posizione: assoluta;
   spazio bianco: nowrap;
   larghezza: 1px;
 }

Questo nasconderà le nostre etichette, le renderà disponibili per gli screen reader e si adatterà al nostro design. Il :not(:focus):not(:active) La pseudo-classe impedisce che elementi focalizzabili come a, pulsante, ingresso di essere nascosti quando si riceve l'attenzione.

Nessun indicatore di messa a fuoco

Una volta lo facevo nel mio foglio di stile CSS globale:

* {
contorno: nessuno; /* orribile errore */
}

Intorno al 2020 ho notato che i bordi neri comparivano sugli input dei moduli di Google Chrome quando erano focalizzati o sui pulsanti quando si entrava in una scheda - era davvero strano perché all'epoca non lo capivo; dopo alcune ricerche ho scoperto che è a causa della proprietà CSS outline e la rimozione ha risolto il problema.

All'epoca non avevo idea di quale fosse il modo corretto di farlo. Dopo aver indagato sui perché e sui percome di questa nuova impostazione predefinita, ho scoperto che l'outline è un indicatore di messa a fuoco dell'elemento e che se viene rimosso deve essere fornito uno stile di messa a fuoco evidente; in pratica, quello che stavo facendo è considerato una cattiva pratica. È possibile personalizzare gli indicatori di attenzione come si ritiene opportuno, ma rimuoverli completamente dal sito web è un grosso problema di accessibilità. Personalizzare lo stile di messa a fuoco di un elemento è abbastanza facile, ad esempio:

 a:focus {
   contorno: 4px solido #ee7834;
   outline-offset: 4px;
 }

Strumenti per l'accessibilità

Controllare tutti gli aspetti di cui abbiamo parlato può essere molto impegnativo, soprattutto sapendo che c'è ancora molto da fare in materia di accessibilità, quindi per aiutarci a gestire l'accessibilità abbiamo due ottime estensioni del browser.

Strumento di valutazione WAVE è una suite di strumenti di valutazione che ci aiuta a rendere più accessibili i nostri contenuti web. È disponibile sia in Google Chrome che in Firefox.

Proviamola su una piccola pagina web contenente una barra di navigazione e un input privo di etichetta e vediamo cosa restituisce; dopo aver installato l'estensione, dobbiamo solo fare clic sull'icona dell'estensione per utilizzarla.

La scheda Riepilogo mostra 1 errore (elemento del modulo mancante di un'etichetta), 2 errori di contrasto e 1 avviso (struttura dell'intestazione mancante); come si può vedere, il risultato è molto chiaro e dettagliato. La scheda Dettagli restituirà un elenco di tutti gli errori, gli avvisi e le caratteristiche. Possiamo anche interagire direttamente sulla pagina facendo clic sui rettangoli rossi per controllare la descrizione e il tipo di errore.

Strumenti di sviluppo Axe è un toolkit per l'accessibilità potente e accurato. È disponibile sia in Google Chrome che in Firefox. Dopo aver installato l'estensione, dovremo aprire gli strumenti di sviluppo del browser, andare alla scheda DevTools di Axe e fare clic su Scansiona tutte le mie pagine.

Come si può notare, Axe DevTools ha segnalato gli stessi problemi con lo strumento di valutazione WAVE: problemi di contrasto, elementi del modulo privi di etichetta e elementi di intestazione mancanti, e ci ha anche fornito alcune best practice da seguire.

Un ulteriore modo per verificare l'accessibilità è quello di utilizzare uno screen reader e testare il vostro sito web con esso; sono disponibili molti screen reader, solo per citarne alcuni:

• NVDA
• Voce fuori campo è disponibile sui dispositivi MacOs.
• Orca è un lettore di schermo gratuito e open source per Linux.

Sintesi

In questo articolo abbiamo visto alcuni problemi comuni di accessibilità del Web, i modi per risolverli e alcuni ottimi strumenti per testare l'accessibilità del Web. C'è ancora molto da dire sull'accessibilità di elementi come le finestre di dialogo, gli accrocchi e i caroselli, ma come avete visto in questo articolo c'è molta documentazione e strumenti che vi aiutano a gestire l'accessibilità.

Alcuni punti chiave da ricordare:

• Controllare sempre il rapporto di contrasto.
• Fornite sempre contenuti informativi ai link.
• A un elemento del modulo deve essere associata un'etichetta.
• È necessario fornire uno stile di focalizzazione evidente.