Accessibilità

Consentire alle tue pagine di rispondere a schermi di dimensioni diverse è solo un modo per assicurarti che il tuo sito web sia accessibile al maggior numero possibile di persone. Considera alcuni di questi altri fattori da tenere presenti.

Deficit della visione dei colori

Persone diverse percepiscono il colore in modo diverso. Le persone affette da protanopia non percepiscono il rosso come un colore distinto. Con deuteranopia, manca il verde. Per le persone affette da tritanopia, è blu.

Alcuni strumenti possono darti un'idea generale dell'aspetto delle tue combinazioni di colori alle persone con diversi tipi di visione dei colori.

La scheda Accessibilità di Firefox include un menu a discesa Simula con un elenco di opzioni.

In Chrome DevTools, la scheda Rendering ti consente di emulare carenze di visione.

Si tratta di strumenti specifici del browser. È anche possibile emulare diversi tipi di visione artificiale a livello di sistema operativo.

Su un Mac, vai a:

1. Preferenze di sistema
2. Accessibilità
3. Display
4. Filtri cromatici
5. Attiva i filtri di colore

Seleziona una delle opzioni.

In generale, non è consigliabile fare affidamento esclusivamente sul colore per distinguere i diversi elementi. Ad esempio, puoi e devi rendere i link di un colore diverso rispetto al testo circostante. Tuttavia, ti consigliamo di applicare anche un altro indicatore di stile, come la sottolineatura o il grassetto dei link.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Contrasto di colore

Alcune combinazioni di colori possono causare problemi. Se il contrasto tra il colore in primo piano e il colore di sfondo non è sufficiente, il testo diventa difficile da leggere. Un contrasto cromatico scarso è uno dei problemi di accessibilità più comuni sul Web, ma per fortuna è uno che puoi cogliere nelle prime fasi del processo di progettazione.

Ecco alcuni strumenti che puoi utilizzare per verificare il rapporto di contrasto dei colori di testo e di sfondo:

• tota11y è un bookmarklet che puoi aggiungere alla barra degli strumenti del browser.
• VisBug è un'estensione disponibile per tutti i principali browser desktop.
• L'ispettore di accessibilità di Firefox può verificare la presenza di problemi di contrasto visivo.
• Puoi anche rilevare e correggere il testo a basso contrasto con Chrome DevTools.
• Nel browser Microsoft Edge, puoi verificare il contrasto dei colori del testo usando il selettore colori.

Ti consigliamo di dichiarare sempre color e background-color insieme nel tuo CSS. Non dare per scontato che il colore di sfondo sia il colore predefinito del browser. Le persone possono e cambiano i colori utilizzati dal browser.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Alto contrasto

Alcune persone impostano i loro sistemi operativi in modo da utilizzare una modalità ad alto contrasto. Puoi provarlo sul tuo sistema operativo.

Su un Mac, vai a:

1. Preferenze di sistema
2. Accessibilità
3. Display

Seleziona l'opzione per aumentare il contrasto.

È disponibile una funzionalità multimediale che rileva se qualcuno ha attivato la modalità ad alto contrasto. È possibile eseguire query sulla funzionalità dei contenuti multimediali prefers-contrast per tre valori: no-preference, less e more. Puoi utilizzare queste informazioni per regolare la tavolozza dei colori del tuo sito.

Gli utenti possono anche impostare una preferenza nel loro sistema operativo per utilizzare i colori invertiti.

Su un Mac, vai a:

1. Preferenze di sistema
2. Accessibilità
3. Display

Seleziona l'opzione per invertire i colori.

Assicurati che il tuo sito web sia comunque adatto a chi naviga con colori invertiti. Fai attenzione alle ombreggiature dei riquadri, che potrebbero dover essere regolate quando i colori vengono invertiti.

Dimensione carattere

Il colore non è l'unica cosa che le persone possono modificare nel proprio browser, ma possono anche regolare le dimensioni predefinite dei caratteri. Con il declino della loro visione, potrebbero modificare la dimensione predefinita dei caratteri nei loro browser o sistemi operativi, aumentando le cifre con il passare degli anni.

Puoi rispondere a queste impostazioni utilizzando dimensioni di carattere relative. Evita di utilizzare unità come px. Utilizza invece unità relative, come rem o ch.

Prova a modificare l'impostazione predefinita per le dimensioni del testo nel browser. Puoi farlo nelle preferenze del browser. In alternativa, puoi farlo mentre visiti una pagina web aumentando lo zoom. Il tuo sito web continua a funzionare anche se la dimensione predefinita dei caratteri viene aumentata del 200%? E il 400%?

Un utente che visita il tuo sito web da un computer desktop con dimensioni dei caratteri aumentate fino al 400% dovrebbe ottenere lo stesso layout di un utente che visita il tuo sito da un dispositivo con uno schermo piccolo.

Navigazione con tastiera

Non tutti utilizzano un mouse o un trackpad per navigare nelle pagine web. La tastiera è un altro modo per spostarsi in una pagina, con il tasto tab particolarmente utile. Gli utenti possono passare rapidamente da un link o un campo di modulo a quello successivo.

I link definiti con le pseudo-classi :hover e :focus mostreranno questi stili a prescindere dall'utilizzo di un mouse, di un trackpad o di una tastiera. Utilizza la pseudo-classe :focus-visible per definire lo stile dei link solo per la navigazione da tastiera. Puoi rendere questi stili ancora più evidenti.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Poiché l'utente seleziona le schede da link a link o da campo modulo a campo modulo, questi elementi verranno evidenziati nell'ordine in cui appaiono nella struttura del documento. Anche questo dovrebbe corrispondere all'ordine visivo.

Fai attenzione alla proprietà order CSS. Puoi utilizzarla in combinazione con flexbox e griglia per posizionare gli elementi in un ordine visivo diverso rispetto al loro ordine nel codice HTML. Si tratta di una funzionalità potente, ma potrebbe confondere le persone che navigano con una tastiera.

Testa le tue pagine web usando il tasto tab sulla tastiera per assicurarti che l'ordine di tabulazione sia corretto.

Nel riquadro Accessibilità degli strumenti per sviluppatori del browser Firefox è presente l'opzione Mostra l'ordine delle schede. Se attivi questa opzione, i numeri verranno sovrapposti a ogni elemento attivabile.

Movimenti ridotti

L'animazione e il movimento sono ottimi modi per dare vita al web design. Tuttavia, per alcune persone questi movimenti possono disorientare molto e persino causare nausea.

Esiste una query di funzionalità che comunica se l'utente preferisce meno movimento. Si chiama prefers-reduced-motion. Includilo ogni volta che utilizzi transizioni o animazioni CSS.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

La query supporti prefers-reduced-motion è specifica per il movimento sullo schermo. Se utilizzi transizioni sul colore di un elemento che non dovrebbe essere influenzato da prefers-reduced-motion. Inoltre, è possibile eseguire la transizione dell'opacità e della dissolvenza incrociata. La riduzione del movimento non deve necessariamente significare nessuna animazione.

Voce

Le persone utilizzano il Web in modo diverso. Non tutti vedono il tuo sito web su uno schermo. Le tecnologie per la disabilità come gli screen reader convertono le informazioni in uno schermo in parole pronunciate.

Gli screen reader funzionano con tutti i tipi di applicazioni, inclusi i browser web. Affinché un browser web possa comunicare in modo utile con uno screen reader, la pagina web a cui si accede attualmente deve contenere informazioni semantiche utili.

In precedenza hai imparato in che modo i pulsanti delle sole icone devono includere un attributo per specificarne la finalità per gli utenti non vedenti. Questo è solo un esempio dell'importanza di un codice HTML di base efficace.

Headings

Usa intestazioni come <h1>, <h2>, <h3> ecc. in modo sensato. Gli screen reader utilizzano questi titoli per generare una struttura del documento in cui è possibile navigare con le scorciatoie da tastiera.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Struttura

Utilizza gli elementi dei punti di riferimento come <main>, <nav>, <aside>, <header> e <footer> per strutturare i contenuti della pagina. Gli utenti di screen reader possono quindi passare direttamente a questi punti di riferimento.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Forms

Assicurati che a ogni campo del modulo sia associato un elemento <label>. Puoi associare un'etichetta a un campo del modulo utilizzando l'attributo for nell'elemento <label> e l'attributo id corrispondente nel campo modulo.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Immagini

Fornisci sempre una descrizione testuale delle immagini utilizzando l'attributo alt.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Se l'immagine è puramente rappresentativa, devi comunque includere l'attributo alt, ma puoi assegnare un valore vuoto.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald ha pubblicato un articolo su come scrivere un ottimo testo in alt.

Link

Prova a fornire un testo descrittivo all'interno dei link. Evita di utilizzare frasi come "fai clic qui" o "altro".

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

L'utilizzo di un HTML semantico ragionevole renderà le tue pagine web più accessibili alle tecnologie per la disabilità come gli screen reader e ad altri output audio come gli assistenti vocali.

Alcuni widget dell'interfaccia che non hanno un elemento HTML corrispondente: caroselli, schede, accordion e così via. Questi elementi devono essere creati da zero utilizzando una combinazione di HTML, CSS, JavaScript e ARIA.

ARIA è l'acronimo di Accessible Rich Internet Applications. Il suo vocabolario consente di fornire informazioni semantiche quando non è disponibile un elemento HTML adatto.

Se devi creare elementi dell'interfaccia non ancora disponibili come elementi HTML, acquisisci dimestichezza con ARIA.

Più funzionalità su misura aggiungi con JavaScript, più dovrai capire ARIA. Se utilizzi gli elementi HTML nativi, potrebbe non essere necessario alcun ARIA.

Se è possibile, esegui dei test con utenti reali di screen reader. In questo modo, non solo potrai capire meglio come gli utenti navigano sul web, ma ti aiuterai a non basarti su congetture per la progettazione tenendo a mente l'accessibilità.

Eseguire test con persone reali è un ottimo modo per esporre eventuali ipotesi. Nel prossimo modulo scoprirai i diversi modi in cui gli utenti interagiscono con i tuoi siti web, un'altra area in cui è fin troppo facile fare ipotesi.

Verifica la tua comprensione

Verifica le tue conoscenze dell'accessibilità