Quando si realizza un sito web è importante renderlo il più accessibile possibile. L'accessibilità consiste nel progettare pagine che possano essere utilizzate da tutte le persone, comprese quelle con disabilità visive, motorie, uditive o cognitive. In questa lezione vedremo alcune semplici regole HTML che permettono di migliorare notevolmente l'accessibilità di un sito.
Una pagina accessibile può essere compresa e utilizzata da chiunque, anche attraverso strumenti come i lettori di schermo (o "screen reader"), che leggono il contenuto della pagina ad alta voce per le persone non vedenti o ipovedenti.
Per ottenere questo risultato è importante scrivere un codice HTML corretto e descrittivo, utilizzando i tag e gli attributi appropriati. In questo modo sia i browser sia le tecnologie assistive riescono a interpretare correttamente la struttura della pagina.
L'accessibilità migliora l'esperienza di navigazione per tutti gli utenti e rende il sito più semplice da utilizzare anche in situazioni particolari, ad esempio quando si naviga solo con la tastiera oppure con connessioni lente.
Inoltre, un codice HTML ben strutturato facilita il lavoro dei motori di ricerca. Sebbene l'accessibilità non sia l'unico fattore che influenza il posizionamento, un sito accessibile e semanticamente corretto contribuisce generalmente a migliorare anche la SEO.
Esistono diversi accorgimenti che permettono di migliorare l'accessibilità. Molti di questi consistono semplicemente nell'aggiungere attributi che descrivono meglio gli elementi della pagina oppure nello scrivere testi più chiari e significativi.
Nel tag <html> è buona norma inserire sempre l'attributo lang="lingua". Questo permette ai lettori di schermo di utilizzare la pronuncia corretta e ai browser di identificare la lingua della pagina, facilitandone anche l'eventuale traduzione.
<html lang="it">
<!-- Lingua italiana -->
</html>
Il testo di un link o di un pulsante deve descrivere chiaramente la sua funzione. Chi utilizza un lettore di schermo spesso ascolta un elenco di tutti i collegamenti presenti nella pagina: testi generici come "Clicca qui" oppure "Leggi" non permettono di capire dove porterà quel collegamento.
L'esempio seguente mostra un <a> scritto in modo non corretto dal punto di vista dell'accessibilità.
<a href="esempio.html">Clicca qui</a> per cambiare pagina.
Questo, invece, è un esempio di link scritto correttamente, perché il testo descrive chiaramente la destinazione del collegamento.
<a href="esempio.html">Clicca qui per cambiare pagina</a>.
Lo stesso principio vale anche per i pulsanti creati con il tag <button>: il testo deve spiegare chiaramente quale azione verrà eseguita.
Le immagini non possono essere interpretate direttamente da un lettore di schermo. Per questo motivo il tag <img> mette a disposizione l'attributo alt="descrizione dell'immagine", che contiene un testo alternativo capace di descrivere il contenuto dell'immagine.
Ogni volta che inserisci un'immagine significativa nella tua pagina HTML, dovresti sempre compilare questo attributo con una descrizione breve ma chiara.
<img src="fiori.jpg" alt="Campo di fiori rossi">
Se invece un'immagine o un'icona ha esclusivamente uno scopo decorativo e non aggiunge alcuna informazione al contenuto della pagina, è consigliabile lasciare vuoto l'attributo alt="". In questo modo il lettore di schermo ignorerà quell'immagine, evitando di fornire informazioni inutili all'utente.