10.1 Accessibilità
L'accessibilità (accessibility) del contenuto web è una parte importante del design web moderno. Si occupa di garantire che tutti gli utenti, comprese le persone con disabilità, possano interagire facilmente con le pagine web.
Uno degli strumenti chiave per raggiungere questo obiettivo sono gli attributi ARIA (Accessible Rich Internet Applications), che migliorano l'accessibilità del contenuto web rendendolo più comprensibile e accessibile per le tecnologie assistive, come i lettori di schermo.
Che cos'è ARIA?
ARIA (Accessible Rich Internet Applications) è un insieme di attributi speciali che possono essere aggiunti agli elementi HTML per migliorarne l'accessibilità. Questi attributi forniscono informazioni aggiuntive sulla struttura e il comportamento degli elementi, aiutando le tecnologie assistive a interpretare e interagire meglio con il contenuto web.
Attributi ARIA principali per migliorare la leggibilità del testo:
Attributo aria-label
L'attributo aria-label viene utilizzato per fornire un'etichetta testuale a un elemento, che verrà letta dal lettore di schermo. Questo attributo è utile quando un elemento non ha un'etichetta visibile o quando è necessaria una descrizione più dettagliata.
Esempio di utilizzo:
<button aria-label="Chiudi la finestra di dialogo">X</button>
Attributo aria-labelledby
L'attributo aria-labelledby collega un elemento a un'altra etichetta sulla pagina utilizzando l'id dell'etichetta. Questo è utile quando è necessario collegare un elemento a un'etichetta già esistente, fornendo contesto e descrizione.
Esempio di utilizzo:
<h2 id="section-title">Titolo della sezione</h2>
<p aria-labelledby="section-title">Questo è un paragrafo di testo relativo al titolo della sezione.</p>
Attributo aria-describedby
L'attributo aria-describedby collega un elemento a uno o più elementi che contengono una descrizione, utilizzando il loro id. Questo attributo è utile per fornire informazioni aggiuntive o contesto a un elemento.
Esempio di utilizzo:
<input type="text" aria-describedby="input-description">
<p id="input-description">Inserisci il tuo nome.</p>
10.2 Ruolo
Attributo role
L'attributo role definisce il ruolo di un elemento, indicando alle tecnologie assistive come interpretare l'elemento. Esistono molti ruoli, come button, navigation, main, article e molti altri.
Esempio di utilizzo:
<nav role="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Su di noi</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
Attributo aria-live
L'attributo aria-live viene utilizzato per contenuti aggiornati dinamicamente. Indica al lettore di schermo che il contenuto all'interno dell'elemento è cambiato e deve essere enunciato. I valori includono off, polite e assertive.
Esempio di utilizzo:
<div aria-live="polite">
<p>Qui verranno visualizzate informazioni importanti.</p>
</div>
Attributo aria-hidden
L'attributo aria-hidden indica alle tecnologie assistive se l'elemento deve essere accessibile agli utenti. Il valore true nasconde l'elemento dalle tecnologie assistive, mentre il valore false lo rende accessibile.
Esempio di utilizzo:
<div aria-hidden="true">
<p>Questo testo sarà nascosto ai lettori di schermo.</p>
</div>
Attributo aria-expanded
L'attributo aria-expanded indica se un elemento è espanso o compresso. È spesso utilizzato nei controlli, come gli "accordion" e i menu a tendina.
Esempio di utilizzo:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Elemento 1</a></li>
<li><a href="#item2">Elemento 2</a></li>
<li><a href="#item3">Elemento 3</a></li>
</ul>
Attributo aria-controls
L'attributo aria-controls indica quale elemento viene controllato dall'elemento corrente. Viene utilizzato insieme agli attributi come aria-expanded per creare elementi di controllo interattivi.
Esempio di utilizzo:
<button aria-controls="content" aria-expanded="false">Mostra/Nascondi</button>
<div id="content" hidden>
<p>Contenuto nascosto.</p>
</div>
GO TO FULL VERSION