Accessibilità

Consentire alle pagine di rispondere a diverse dimensioni dello schermo è solo uno dei modi per assicurarsi che il tuo sito web sia accessibile al maggior numero possibile di persone. Tieni presente anche questi altri fattori.

Discromatopsia

Persone diverse percepiscono i colori in modo diverso. Le persone con protanopia non percepiscono il rosso come un colore distinto. Con la deuteranopia, manca il verde. Per le persone con tritanopia, manca il blu.

Alcuni strumenti possono darti un'idea generale di come gli schemi di colori vengono visualizzati dalle persone con diversi tipi di visione dei colori.

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

In Chrome DevTools, la scheda Rendering consente di emulare i difetti alla vista.

Questi sono strumenti specifici del browser. È anche possibile emulare diversi tipi di visione a livello di sistema operativo.

Su Mac, vai a:

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

Seleziona una delle opzioni.

In generale, non è una buona idea fare affidamento esclusivamente sul colore per distinguere i diversi elementi. Ad esempio, puoi e devi fare in modo che i link abbiano un colore diverso dal testo circostante. Tuttavia, devi anche applicare un altro indicatore di stile, ad esempio sottolineare i link o metterli in grassetto.

a {
  color: red;
}

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

Contrasto di colore

Alcune combinazioni di colori possono causare problemi. Se non c'è un contrasto sufficiente tra il colore di primo piano e il colore di sfondo, il testo diventa difficile da leggere. Il contrasto di colore insufficiente è uno dei problemi di accessibilità più comuni sul web, ma fortunatamente è uno di quelli che puoi individuare nelle prime fasi del processo di progettazione.

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

• VisBug è un'estensione del browser disponibile per tutti i principali browser desktop.
• L'ispettore di accessibilità di Firefox può verificare la presenza di problemi di contrasto visivo.
• Puoi anche scoprire e correggere il testo a basso contrasto con Chrome DevTools.
• Nel browser Edge di Microsoft, puoi testare il contrasto del colore del testo utilizzando il selettore dei colori.

È consigliabile dichiarare sempre color e background-color insieme nel CSS. Non dare per scontato che il colore di sfondo sia quello predefinito del browser. Gli utenti possono modificare i colori utilizzati dal browser e lo fanno.

body {
  color: black;
}

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

Alto contrasto

Alcune persone impostano i propri sistemi operativi in modo da utilizzare una modalità ad alto contrasto. Puoi provare a farlo sul tuo sistema operativo.

Su Mac, vai a:

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

Seleziona l'opzione per aumentare il contrasto.

Esiste una funzionalità multimediale per rilevare se qualcuno ha attivato la modalità ad alto contrasto. La funzionalità multimediale prefers-contrast può essere interrogata 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 sistema operativo per utilizzare i colori invertiti.

Su Mac, vai a:

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

Seleziona l'opzione per invertire i colori.

Assicurati che il tuo sito web abbia ancora senso per chi naviga con i colori invertiti. Fai attenzione alle ombre delle caselle: potrebbe essere necessario regolarle quando i colori vengono invertiti.

Dimensione carattere

Il colore non è l'unica cosa che gli utenti possono regolare nel browser, ma anche la dimensione del carattere predefinita. Man mano che la vista peggiora, potrebbero regolare la dimensione del carattere predefinita nei browser o nei sistemi operativi, aumentando i numeri con il passare degli anni.

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

Prova a modificare l'impostazione della dimensione del testo predefinita nel browser. Puoi farlo nelle preferenze del browser. In alternativa, puoi farlo mentre visiti una pagina web aumentando lo zoom. Il tuo sito web funziona ancora se la dimensione del carattere predefinita viene aumentata del 200%? E del 400%?

Un utente che visita il tuo sito web su un computer desktop con la dimensione del carattere aumentata al 400% dovrebbe ottenere lo stesso layout di un utente che visita il tuo sito su un dispositivo con schermo piccolo.

Navigazione con la tastiera

Non tutti utilizzano un mouse o un trackpad per navigare nelle pagine web. Una tastiera è un altro modo per spostarsi in una pagina, con il tasto tab particolarmente utile. Gli utenti possono spostarsi rapidamente da un link o da un campo del modulo all'altro.

I link con stile con le :hover e :focus pseudo-classi, visualizzeranno questi stili indipendentemente dal fatto che l'utente utilizzi un mouse, un trackpad o una tastiera. Utilizza la :focus-visible pseudo-classe per applicare lo stile ai link solo per la navigazione con la tastiera. Puoi rendere questi stili ancora più evidenti.

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

Man mano che l'utente passa da un link all'altro o da un campo del modulo all'altro, questi elementi verranno selezionati nell'ordine in cui appaiono nella struttura del documento. Questo ordine deve corrispondere anche all'ordine visivo.

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

Testa le tue pagine web utilizzando il tasto tab sulla tastiera per assicurarti che l'ordine di tabulazione abbia senso.

Nel riquadro Accessibilità degli strumenti per sviluppatori del browser Firefox è presente un'opzione Mostra ordine di tabulazione. Se la attivi, sui singoli elementi selezionabili verranno visualizzati dei numeri.

Movimento ridotto

Le animazioni e il movimento sono modi meravigliosi per dare vita ai design web. Tuttavia, per alcune persone questi movimenti possono essere molto disorientanti e persino causare nausea.

Esiste una query di funzionalità che comunica se l'utente preferisce un movimento ridotto. Si chiama prefers-reduced-motion. Includila ovunque 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 multimediale prefers-reduced-motion è specifica per il movimento sullo schermo. Se utilizzi transizioni sul colore di un elemento che non deve essere influenzato da prefers-reduced-motion. È anche possibile eseguire la transizione dell'opacità e il crossfade. Il movimento ridotto non deve necessariamente significare nessuna animazione.

Voce

Le persone vivono 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 visualizzate su 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, è necessario che nella pagina web a cui si accede siano presenti informazioni semantiche utili.

In precedenza, hai imparato che i pulsanti solo con icone devono includere un attributo per specificare lo scopo del pulsante per gli utenti non vedenti. Questo è solo un esempio dell'importanza di un HTML di base solido.

Headings

Utilizza le intestazioni come <h1>, <h2>, <h3> e così via in modo sensato. Gli screen reader utilizzano queste intestazioni per generare una struttura del documento che può essere esplorata 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 elementi 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>

Moduli

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

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

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

Google 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 di presentazione, devi comunque includere l'attributo alt, ma puoi assegnargli un valore vuoto.

<img src="texture.png">

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

Jake Archibald ha pubblicato un articolo sulla scrittura di un testo alt efficace.

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 sensato renderà le tue pagine web più accessibili alle tecnologie per la disabilità come gli screen reader e anche ad altri output audio come gli assistenti vocali.

Alcuni widget dell'interfaccia non hanno un elemento HTML corrispondente, tra cui caroselli, schede e fisarmoniche. Questi devono essere creati da zero con una combinazione di HTML, CSS, JavaScript e ARIA.

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

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

Più funzionalità personalizzate aggiungi con JavaScript, più dovrai comprendere ARIA. Se utilizzi elementi HTML standard, potresti non aver bisogno di ARIA.

Se possibile, esegui i test con utenti reali di screen reader. Non solo comprenderai meglio come navigano sul web, ma non dovrai più indovinare come progettare tenendo conto dell'accessibilità.

I test con persone reali sono un ottimo modo per scoprire eventuali ipotesi che potresti fare. Nel modulo successivo, scoprirai i diversi modi in cui le persone interagiscono con i tuoi siti web, un'altra area in cui è fin troppo facile fare ipotesi.

Mettiti alla prova

Verifica le tue conoscenze sull'accessibilità