-» -» L'accessibilità di un sito web

L'accessibilità di un sito web

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

Le WCAG (Web Content Accessibility Guidelines)

Questa pagina è parte della guida Come creare un sito da zero

Le WCAG (Web Content Accessibility Guidelines) sono le linee guida per l'accessibilità dei siti web stilate e pubblicate dal Web Accessibility Initiative (WAI) che fa parte del World Wide Web Consortium (W3C).
W3C Web Accessibility


Gli sviluppatori di siti web sono tenuti a seguire queste linee guida al fine di rispettare criteri e requisiti di accessibilità per tutti gli utenti e soprattutto per gli utenti disabili.
Al di là dell'obbligo, rendere il proprio sito accessibile è una scelta consapevole e responsabile. Per questo motivo, tale scelta sarà sicuramente premiata, in ambito di posizionamento, dai motori di ricerca.
Le WCAG nascono nel 1999 e vengono rinnovate nel corso degli anni in diverse versioni.
Dal 2018 diventano raccomandazione del World Wide Web Consortium (W3C).
Nel settembre 2020 diventano obbligatorie per i siti della pubblica amministrazione.
Dal 28 giugno 2025, anno di entrata in vigore dell'European Accessibility Act (EAA), l'UE è tenuta ad estendere l'obbligo di adeguamento anche ad altre tipologie di siti web:
Ecco alcune indicazioni di base per ottimizzare il sito in questo senso. La guida verrà completata e aggiornata nel tempo.

Contrasto dei colori

Il contrasto dei colori è un aspetto molto importante da considerare quando si crea un sito web. Questo perchè le persone con disabilità visive possono avere difficoltà durante la navigazione nelle pagine se i colori non rendono ben visibile il testo scritto.
Web Content Accessibility Guidelines (WCAG)
Per scegliere i colori in fase di progettazione del sito web ci sono strumenti come questo:
Color contrast

Lo strumento importante e valido per testare il sito web anche per il contrasto dei colori e conoscere, in generale, tutte le correzioni da eseguire sulle singole pagine è sempre PageSpeed Insights

Testo

La dimensione del testo dovrebbe essere sempre di almeno 11px, o valore equivalente utilizzando em, rem e percentuali.
Le lettere devono essere distanziate di almeno 1px.

Unità fluide vw e vh

L'utilizzo delle unità viewport fluide (vw e vh) crea problemi di accessibilità in quanto i browser non ridimensionano le unità basate sulla viewport quando si esegue lo zoom della pagina. La viewport, infatti, non cambia anche se l'utente esegue lo zoom avanti o indietro. Il problema non si verifica utilizzando le percentuali o l'unità di misura rem.

Titoli (headings)

I livelli dei titoli h1, h2, h3 ecc, non devono mai essere saltati, ma seguire la corretta gerarchia.
Per esempio, non possono esserci un h1 e un h3 senza che ci sia un h2 fra di loro.

Link e pulsanti

I link devono distinguersi dal resto del testo. Il testo dei link deve essere di colore diverso, oppure sottolineato. Dato che può essere complicato conciliare le esigenze di contrasto tra testo e link con le esigenze di contrasto tra sfondo e testo, la strada più semplice è sicuramente la sottolineatura.
I link devono contenere sempre testo descrittivo affinchè l'utente sappia cosa accadrà al click. Ove non sia possibile inserire il testo, o il testo non sia descrittivo, bisogna aggiungere un attributo "aria-label" che contenga la descrizione.
Esempio: <a href="gardening.html" aria-label="Read more about gardening">Read more <a>
I link con il medesimo collegamento devono avere identico testo descrittivo, o identico aria-label per non creare confusione per gli utenti che usano gli screen readers o altri tecnologie di assistenza.
Nel caso in cui un link non preveda il click da parte dell'utente, ma serva solo per una funzionalità, si può aggiungere l'attributo "aria-hidden="true". Questo attributo lo nasconderà agli screen reader.
Esempio: <a href="#" aria-hidden="true"></a>
Gli elementi interattivi come collegamenti, button e campi modulo dovrebbero essere tutti navigabili da tastiera utilizzando un tag attivabile (a, button, input, ecc.).
Gli elementi che si comportano come pulsanti ma sono creati con altri tag come span, div ecc, dovrebbero avere un attributo "role=button" per indicare la loro funzione e/o includere l'attributo "tabindex=0" per indicare che sono attivabili da tastiera (tasto tab).
Con l'attributo "tabindex" si può definire anche l'ordine di passaggio da un campo all'altro. Il valore di tabindex va da 0 a 32767.
Il role (ruolo) applica un significato semantico al contenuto.
Per informazioni dettagliate sui role leggi: WAI-ARIA Roles.

Se i link interni si aprono in nuove schede o in nuove finestre, questo va segnalato all'utente per non disorientarlo. Non basta aggiungere al link un'icona apposita visibile (anch'essa richiesta), ma è necessario inserire un'indicazione per gli assistenti di lettura.
Per esempio:
<a href="" aria-label="link in new tab" target='_blank'>titolo</a>

Se nel link non è presente testo descrittivo, come nel caso di link in immagini, esso va aggiunto all'aria-label.
Esempio:
<a href="" aria-label="descrizione (opens in a new tab)" target='_blank'>titolo</a>

Navigazione

Per agevolare gli utenti che utilizzano tecnologie assistite è opportuno inserire, nella parte alta della pagina, sotto a <body>, un anchor link visibile solo agli screen reader che permetta di saltare i contenuti ripetitivi e portare l'utente direttamente al contenuto che lo interessa.
Esempio, subito sotto a <body> mettiamo:
<a style="display:none" href="#main">Skip to main content</a>
.... e applichiamo l'id relativo all'elemento principale:
<div id="main">
Leggi anche la sezione dedicata agli anchor text nella pagina: Cose utili per il sito web.

Precisazione sul tag main

Il tag semantico main indica la zona del contenuto "pulito" della pagina. Qualora assente, andrebbe indicato con il ruolo il div che lo sostituisce.
Es: <div class="container" aria-label="main">
Leggi anche: La pagina perfetta.

Parole o frasi in grassetto, o in corsivo

Dovrebbero essere usati, rispettivamente, i tag semantici <strong></strong> e <em></em> al posto dei tag <b></b> e <i></i>.
I tag semantici indicano agli screen readers l'intonazione da dare alle parole, mentre gli altri tag servono solo per l'aspetto visivo.

I moduli

Ogni campo del form deve avere un <label> associato e una descrizione. Senza questo, un utente che usa tecnologie di assistenza non è in grado di compilare i campi correttamente.
Vai alla voce "Le etichette" nella guida: Il modulo di contatto.
I moduli di ricerca dovrebbero avere un tag "role=search" (es. <form role="search">).
I campi input dovrebbero avere un attributo "autocomplete" per essere meglio interpretati. Se non è possibile applicare un attributo valido, bisogna mettere autocomplete="off".
Per la lista degli attributi validi leggi: HTML <input> autocomplete Attribute

Per approfondimento leggi: Autocomplete attributes

Tabelle

L'attributo table dovrebbe essere usato solo per vere tabelle e non per la struttura del layout della pagina, perchè può disturbare l'ordine di lettura del contenuto.

Mappe

Gli elementi "area" del codice delle mappe devono sempre contenere il tag alt con la descrizione.
Esempio:
<map>
   <area shape="rect" coords="0,0,82,126" href="" alt="descr 1">
   <area shape="circle" coords="90,58,3" href="" alt="descr 2">
   <area shape="circle" coords="124,58,8" href="" alt="descr 3">
</map>

Leggi anche: Velocità e performance di un sito web

Nella sezione: "Risorse per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Elenco argomenti correlati:
Altro di interesse
Mappa del sito
Mappa del sito