Questa è una guida completa all'accessibilità, scritta in modo da semplificare il concetto di accessibilità e coprire l'intero processo. Questa guida è stata preparata mentre stavo sviluppando un sito web con React e dovevo occuparmi della sua accessibilità.

Suggerimenti generali

L'accessibilità è quanto è leggibile e navigabile il tuo sito web per gli utenti con determinate disabilità.

L'accessibilità consiste in tre cose:

1. Se gli utenti utilizzano una tastiera per navigare nel tuo sito web, quanto è navigabile.
2. Se gli utenti utilizzano lettori di schermo per leggere il tuo sito Web, quanto è leggibile.
3. Se la tua UI/UX, in termini di contrasto cromatico, stile e dimensione del carattere, elementi nativi , è all'altezza degli standard di un sito web accessibile.

Secondo l' Organizzazione Mondiale della Sanità (OMS) , il 15% delle persone nel mondo ha qualche tipo di disabilità, il che significa che il tuo sito web ha un problema per circa 1,3 miliardi di utenti o una persona su sei, anche se il problema è piccolo come un contrasto cromatico che lo rende illeggibile per alcuni utenti con problemi di vista, ad esempio il rapporto di contrasto cromatico non è abbastanza evidente da consentire loro di distinguere lo sfondo dal primo piano.

I motori di ricerca non preferirebbero un sito Web senza un'adeguata accessibilità.

La metà delle opzioni di accessibilità sono controllate dai progettisti .

Accessibilità da tastiera

• Usa la scheda per vedere se puoi selezionare (mettere a fuoco) gli elementi selezionabili sulla tua pagina web di conseguenza e uno dopo l'altro. Ciò include elementi della barra di navigazione, ricerca, pulsanti, collegamenti, icone, ecc., non immagini o testo non collegato.
• Controlla Invio e barra spaziatrice sugli elementi cliccabili e verifica se funziona (pulsanti, icone, collegamenti)
• Controlla il tasto Esc per vedere se puoi spostare lo stato attivo da un input.
• Controlla i tasti freccia su più elementi di opzione
• Per rendere un elemento (che non è focalizzabile, come div) un'abilità di focus, usa l'attributo tabindex.

<div tabindex="0">Order</div>
<div tabindex="1">Order</div>

• Su Mac, usa CMD + F5 per attivare/disattivare il voice over sullo schermo (sito Web) o Preferenze di Sistema -> Accessibilità -> Voice Over
• Chiavi importanti per testare il tuo sito web:
• Modificatore voce fuori campo: Ctrl + Alt
• Pagina di navigazione: Ctrl + Alt + frecce sinistra e destra
• Naviga tra le intestazioni: Ctrl + Alt + H
• Per fare clic: Ctrl + Alt + Spazio
• Controlla la velocità dell'altoparlante: Ctrl + Alt + Frecce su e giù
1. Ruolo
2. Nome
3. Stato (facoltativo): se è un pulsante, è disabilitato o attivo, se è una scelta, è selezionato o meno.
4. Valore

<select role="pop-up button" name="seatType" state="collapsed" value="0">
 <option value="0">No Preference</option>
 <option value="1">Aisle Seat</option>
 <option value="2">Window Seat</option>
</select>

5. È importante utilizzare elementi nativi come body , section o aside , anziché solo div.
6. Per l'accessibilità, è importante utilizzare elementi nativi h1 — h6 quando si contrassegnano intestazioni e punti di riferimento, questo suggerisce una gerarchia corretta.
7. Non creare troppi standard, troppi div danno una pessima UX agli utenti che usano i lettori di schermo.
8. Se hai elementi nidificati, prova a collegarli insieme, se sono personalizzati, usa gli attributi ARIA.
9. Cerca di evitare il più possibile di creare elementi personalizzati, in quanto non hanno alcuna funzione di accessibilità.

• L'attributo Aria label fornisce nomi ed etichette ai tuoi elementi che non hanno una funzione nativa, come un hamburger nav.

<button aria-label="Menu">☰</button>

<h2 id="men's shirts">Shop Men's Shirts</h2>
<div id="men's shirts btn" role="button" aria-labelledby="men's shirts men's shirts btn">
Shop Now
</div>

• Nei devtools del browser, controlla la scheda Lighthouse e scegli l'opzione di accessibilità, se non c'è il faro, prova a installarlo come estensione.
• In Chrome, vai su Dev tools, Setting, quindi Experiments, quindi seleziona Enable full accessibility... , una volta selezionato, avrai un'opzione di accessibilità.
• Utilizzare il sito Web WebAIM per verificarlo.
• Per verificare l'accessibilità UI/UX, scarica un'estensione del browser come axe extension o Access Assistant .
• Utilizza almeno un lettore di schermo (Voice Over) per controllare il tuo sito web.
• Per il contrasto del colore, controlla il sito Web Contrast Ratio , collegato sotto le risorse. Se hai colori complessi o testo sull'immagine, puoi controllare con estensioni come Color Contrast Analyzer per Chrome.

Miglior corso Youtube sull'accessibilità:https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=1

Tutti i ruoli, gli stati e gli attributi di ARIA:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

Contrasto di colore

https://contrast-ratio.com/

Controllo dell'accessibilità web

https://www.webaccessibility.com/

Informazioni sulla disabilità

https://www.who.int/teams/noncommunicable-diseases/sensory-functions-disability-and-rehabilitation/world-report-on-disability