Accessibilità HTML
Accessibilità HTML
Scrivi sempre codice HTML pensando all'accessibilità!
Fornisci all'utente un buon modo per navigare e interagire con il tuo sito. Rendi il tuo codice HTML il più semantico possibile.
HTML semantico
HTML semantico significa utilizzare gli elementi HTML corretti per il loro scopo corretto il più possibile. Gli elementi semantici sono elementi con un significato; se hai bisogno di un pulsante, usa l' <button>elemento (e non un
<div>elemento).
Semantico
<button>Report an Error</button>
Non semantico
<div>Report an Error</div>
L'HTML semantico fornisce un contesto agli screen reader, che leggono il contenuto di una pagina ad alta voce.
Con l'esempio del pulsante in mente:
- i pulsanti hanno uno stile più adatto per impostazione predefinita
- uno screen reader lo identifica come un pulsante
- focalizzabile
- cliccabile
Un pulsante è accessibile anche per le persone che si affidano alla navigazione solo tramite tastiera; può essere cliccabile sia con il mouse che con i tasti e può essere spostato tra le schede (usando il tasto Tab sulla tastiera).
Esempi di elementi non semantici : <div>e <span>- Non dice nulla sul suo contenuto.
Esempi di elementi semantici : <form>, <table>, e <article>- Definisce chiaramente il suo contenuto.
I titoli sono importanti
Le intestazioni sono definite con i tag <h1>to :<h6>
Esempio
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
I motori di ricerca utilizzano le intestazioni per indicizzare la struttura e il contenuto delle tue pagine web.
Gli utenti sfogliano le tue pagine in base alle intestazioni. È importante utilizzare le intestazioni per mostrare la struttura del documento e le relazioni tra le diverse sezioni.
Le utilità per la lettura dello schermo utilizzano anche le intestazioni come strumento di navigazione. I diversi tipi di intestazione specificano il contorno della pagina.
<h1>le intestazioni dovrebbero essere usate per le intestazioni principali, seguite dalle <h2>intestazioni, poi quelle meno importanti
<h3>e così via.
Nota: utilizzare le intestazioni HTML solo per le intestazioni. Non utilizzare i titoli per rendere il testo GRANDE o in grassetto .
Testo alternativo
L' altattributo fornisce un testo alternativo per un'immagine, se l'utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore
src
nell'attributo o se l'utente utilizza uno screen reader).
Il valore altdell'attributo dovrebbe descrivere l'immagine:
Esempio
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Se un browser non riesce a trovare un'immagine, visualizzerà il valore alt
dell'attributo:
Esempio
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Dichiara la lingua
Dovresti sempre includere l' lang
attributo all'interno del <html>tag, per dichiarare la lingua della pagina Web. Questo ha lo scopo di aiutare i motori di ricerca e i browser.
L'esempio seguente specifica l'inglese come lingua:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Usa un linguaggio chiaro
Usa sempre un linguaggio chiaro, facile da capire. Cerca anche di evitare caratteri che non possono essere letti chiaramente da un'utilità per la lettura dello schermo. Per esempio:
- Mantieni le frasi il più brevi possibile
- Evita i trattini. Invece di scrivere 1-3, scrivi da 1 a 3
- Evita le abbreviazioni. Invece di scrivere febbraio, scrivi febbraio
- Evita le parole gergali
Crea un buon testo di collegamento
Un testo di collegamento dovrebbe spiegare chiaramente quali informazioni il lettore otterrà facendo clic su quel collegamento.
Esempi di link buoni e cattivi:
Buono
Male
Nota: questa pagina è un'introduzione all'accessibilità al web. Visita il nostro tutorial sull'accessibilità per maggiori dettagli.