HTML5 e ARIA (Accessible Rich Internet Applications) forniscono specifiche tecniche per aiutare gli sviluppatori a creare siti più accessibili.
Utilizzo degli Elementi semantici di HTML5
HTML5 ha introdotto elementi semantici che definiscono chiaramente la struttura di una pagina web, migliorando l'accessibilità per screen reader e dispositivi assistivi.
Elementi di Struttura come: header, footer, nav, section e article, vengono utilizzati per demarcare le varie parti della pagina. Ciò facilita la navigazione del contenuto per gli utenti screen reader.
<header>
<!-- Intestazione del sito -->
</header>
<nav>
<!-- Navigazione principale -->
</nav>
<main>
<article>
<!-- Contenuto principale -->
</article>
</main>
<footer>
<!-- Piede di pagina -->
</footer>
Inoltre, HTML5 arricchisce l'accessibilità dei form attraverso elementi e attributi specifici, come con l'attributo for, tipi di input (email, tel, date) e attributi quali placeholder e required.
Etichette Esplicite: Ogni campo di input dovrebbe avere un'etichetta associata, migliorando l'usabilità per gli utenti con dispositivi assistivi.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>ARIA per Potenziare l'Accessibilità
ARIA introduce attributi che possono essere aggiunti al markup HTML per fornire informazioni aggiuntive su ruoli, stati e proprietà degli elementi, particolarmente utile in componenti dinamici.
Ruoli e Proprietà ARIA: usa ruoli ARIA per definire il ruolo degli elementi (es. button, dialog) e proprietà come aria-labelledby e aria-hidden per migliorare l'accessibilità.
<div id="modalDialog" role="dialog" aria-labelledby="dialogTitle" aria-modal="true">
<h2 id="dialogTitle">Titolo Dialogo</h2>
<p>Contenuto del dialogo...</p>
</div>L'esempio definisce una dialog che utilizza l'attributo aria-labelledby per associare il titolo, situato in un elemento h2, alla dialog stessa. Attraverso l'attributo aria-modal="true", focalizziamo l'attenzione definendo la modale e rendedola accessibile per l'utente finale.
Ricordiamoci sempre di verificare che il sito sia accessibile completamente via tastiera.
Ordine di Focus: Controlla l'ordine di focus con tabindex durante la navigazione da tastiera.
L'ordine di focus determinato dall'attributo tabindex stabilisce la sequenza con cui gli elementi di una pagina web ricevono il focus quando l'utente naviga tramite la tastiera, in particolare usando il tasto Tab. Il valore di tabindex può influenzare direttamente l'accessibilità e l'usabilità di un sito web.
<a href="https://theartcode.dev" tabindex="1">Visualizza esempio</a>
<button tabindex="2">Clicca</button>Il link ha un tabindex="1", ciò significa che quando inizi a navigare nella pagina usando il tasto Tab, questo link sarà il primo elemento a ricevere il focus.
Lingua della Pagina: Specifica la lingua della pagina con l'attributo lang nell'elemento html. Questo aiuta gli screen reader a utilizzare la corretta pronuncia, migliorando l'esperienza per gli utenti.
<html lang="it">Titoli e Testi Alternativi: Utilizza l'attributo title per fornire contesto aggiuntivo e l'attributo alt per descrivere immagini.
<img src="logo.png" alt="Logo label">
<a href="document.pdf" title="Scarica il documento PDF">Documento</a>Il linguaggio CSS ci aiuta nell'accessibilità tramite la proprietà :focus-within: utilizza :focus-within per migliorare la visibilità degli elementi con focus, essenziale per la navigazione da tastiera.
.artcode__form-group:focus-within {
border: 2px solid blue;
}Inoltre, incoraggiamo l'utilizzo di strumenti come Accessibility Insights, Lighthouse in Google Chrome, o axe DevTools per testare e identificare problemi di accessibilità, assicurandoti che il tuo sito aderisca alle normative WCAG.
