Sezione 2 - L'accessibilità nella pratica


Quali sono gli elementi fondamentali dell'accessibilità?

Scroll down icon

Scorri verso il basso

Gli standard di accessibilità, come le WCAG, possono sembrare scoraggianti, in quanto sono di natura tecnica e sembrano complessi a coloro che sono alle prime armi con l'accessibilità. Per fortuna, alcune delle più importanti prassi inclusive del Web sono semplici da implementare tramite il tuo CMS. Concentrati su queste aree per migliorare la fruibilità del tuo sito Web e fornisci una struttura solida per ulteriori miglioramenti dell'accessibilità con:

Icon with a big letter T and text lines

Titoli di pagina

Icon with H1 written

Intestazioni

Icon representing a graphic

Grafici

Icon of a link

Link

Icon of a table

Tabelle e schede

Icon of a semantic markup

Markup semantico (definito)

Può essere difficile sapere da dove iniziare se non hai mai implementato l'accessibilità Web prima. Da dove cominci e a cosa dai la priorità? Per iniziare, ti suggeriamo di implementare queste sei best practice relative all'accessibilità.

1. Dai alle tue pagine Web titoli significativi

La prima cosa che un lettore di schermo vede su una pagina Web è il titolo della pagina. Il titolo è un elemento importante per il lettore di schermo in quanto li informa del contenuto che possono trovare sulla pagina. Dando alle tue pagine Web dei titoli significativi, sei conforme al criterio di successo per le WCAG 2.4.2.

Come ulteriore vantaggio, i titoli descrittivi migliorano la SEO della tua pagina. Usa uno strumento automatizzato che identifichi rapidamente le pagine con titoli mancanti, troppo lunghi o troppo corti.

2. Fornisci supporto agli utenti che non possono usare il mouse

Crea un link "passa a" o "ignora blocco" su tutte le tue pagine Web come primo elemento sulla pagina. Consentirà agli utenti di saltare le aree di contenuto che si ripetono in ogni pagina, come un'intestazione o l'intero menu. Usando i link "passa a", gli utenti che usano la tastiera possono passare direttamente a specifiche aree di contenuti sulla pagina, come la navigazione, i contenuti principali o il piè di pagina. In caso contrario, gli utenti che usano la tastiera devono navigare in modo sequenziale tra le pagine, da sinistra a destra, selezionando ogni elemento mentre si spostano avanti e indietro. Questo può essere noioso e frustrante e indurli a lasciare velocemente il tuo sito e quindi influire negativamente sulla percentuale di rimbalzo.

Se vuoi, puoi nascondere visivamente il link "passa a" sulla pagina, a condizione che rimanga visibile quando riceve lo stato attivo (ad es. viene evidenziato quando un utente preme il tasto "Tab"). Aiutando gli utenti che non possono usare il mouse, sei conforme al criterio di successo per le WCAG 2.4.1.

3. Aggiungi il testo alt alle immagini pertinenti

Scorri la tua pagina principale e le pagine modello e valuta se le tue immagini devono avere una descrizione, denominata testo alternativo, o più comunemente testo alt. Il codice per aggiungere il testo alternativo (alt = "") deve essere sempre presente per ogni immagine. In ogni caso, se l'immagine è decorativa, la descrizione del testo alt tra virgolette può essere lasciata vuota. Se l'immagine trasmette informazioni che non riusciresti a riconoscere senza vedere l'immagine, queste informazioni devono essere scritte nella descrizione del testo alt. Se l'immagine è un link, descrivi la destinazione a cui il link ti rimanda.

Con l'aggiunta dei testi alternativi alle tue immagini, sei conforme a una parte essenziale del criterio di successo per le WCAG 1.1.1.

4. Garantisci l'accessibilità agli elementi multimediali del sito Web

Il contenuto multimediale sul tuo sito Web, come i video, i file PDF, l'audio e l'infografica sono coinvolgenti e condivisibili, ma possono diventare rapidamente un ostacolo per le persone con disabilità se non offri un accesso paritario al contenuto. Secondo lo standard WCAG, i filmati, le clip audio e le animazioni devono essere accompagnati da opzioni accessibili, come trascrizioni, didascalie o descrizioni audio immediatamente disponibili. Un altro aspetto da considerare è che il tuo contenuto multimediale non diventi una "keyboard trap", il che significa che coloro che utilizzano la tastiera per navigare sul tuo sito Web, ad esempio, non sono in grado di uscire dal video. In questo modo sarai conforme ai criteri di successo per le WCAG 1.2, 1.2.1, 1.2.2 e 1.2.4.

5. Accertati che il contrasto di colore sia adeguato

Può sembrare che le scelte di colore, branding ed elementi visivi siano complesse quando si tratta dell'accessibilità digitale. È comunque possibile avere un sito Web colorato ed elegante che sia accessibile a diversi tipi di condizioni di visione. Un buon punto di partenza è utilizzare un correttore di contrasto per garantire un contrasto di colore adeguato tra il testo e lo sfondo del tuo sito Web. Con questa integrazione nel tuo brand e nelle linee guida di stile, sarai conforme al criterio di successo per le WCAG 1.4.3.

6. Non trascurare l'esperienza mobile del Web

Uno dei principi fondamentali dell'ottimizzazione dell'accessibilità è garantire che il tuo sito Web sia compatibile con la piattaforma ma anche indipendente dal punto di vista tecnologico, vale a dire che funzioni e si possa utilizzare su diverse piattaforme. Ad esempio, accertati che il tuo sito Web sia reattivo, così che si possa adattare a diversi dispositivi e dimensioni pur mantenendo una buona esperienza utente. Garantendo l'adattabilità di un sito Web che non perde le informazioni o la struttura sui dispositivi mobili, sei conforme al criterio di successo per le WCAG 1.3.

Affrontare l'accessibilità cognitiva del Web

Seguendo buone pratiche di progettazione, contenuto e codifica, puoi migliorare l'esperienza utente per molte persone con abilità e disabilità cognitive diverse.

Quando prendi in considerazione gli stili visivi e l'organizzazione dei contenuti, ad esempio, puoi migliorare l'esperienza utente per le persone con disabilità cognitive:

  • usando una formattazione adeguata per le intestazioni e gli elenchi, ad esempio utilizzando H1 per un'intestazione invece che scriverla semplicemente in grassetto
  • aggiungendo più spazi vuoti nel design
  • "suddividendo" il contenuto in sezioni più corte e gestibili per consentire una lettura veloce
  • semplificando i moduli e dividendoli in fasi sequenziali separate
  • fornendo un ordine di lettura logico per le pagine e i documenti Web
  • essendo coerente rispetto alle posizioni degli elementi della pagina e all'uso dei font e dei colori
  • offrendo l'accesso solo dalla tastiera alle persone che navigano nelle pagine Web e nei documenti senza mouse
  • offrendo contenuti in formati multipli, come le trascrizioni per un podcast