Uno degli aspetti più importanti dell'accessibilità digitale è la struttura della pagina. Quando crei il tuo sito web o la tua app utilizzando elementi strutturali anziché basarti solo sugli stili, fornisci un contesto fondamentale alle persone che utilizzano tecnologie di assistenza (AT), come gli screen reader.
Gli elementi strutturali fungono da scheletro dei contenuti sullo schermo, ma fungono anche da punti di ancoraggio per facilitare la navigazione all'interno dei contenuti.
Quando utilizzi elementi HTML semantici, il significato intrinseco di ciascun elemento viene trasmesso all'albero di accessibilità e utilizzato dall'AT, conferendo più significato ai contenuti rispetto agli elementi non semantici. In alcuni casi potrebbe essere necessario aggiungere altri attributi ARIA per creare relazioni o migliorare l'esperienza utente complessiva, ma nella maggior parte delle situazioni, uno degli oltre 100 elementi HTML disponibili dovrebbe funzionare abbastanza bene da solo.
Sebbene questo modulo si concentri sugli elementi strutturali più utilizzati e fondamentali per l'accessibilità digitale, esistono sicuramente elementi e fattori ambientali aggiuntivi da considerare quando crei la struttura del tuo sito web o della tua app. Questi esempi sono un'introduzione all'argomento, non sono esaustivi.
Punti di riferimento
Gli utenti di AT si basano sugli elementi strutturali per avere informazioni sul layout complessivo della pagina. Quando suddividi in sezioni ampie regioni di contenuti, puoi utilizzare i ruoli di landmark ARIA o gli elementi landmark HTML più recenti per aggiungere contesto strutturale alla pagina.
I landmark assicurano che i contenuti si trovino in regioni navigabili. Ti consigliamo di fornire almeno un punto di riferimento per pagina.
Alcune risorse suggeriscono di combinare landmark ARIA e HTML per fornire una migliore copertura AT. Anche se questo tipo di ridondanza non dovrebbe causare problemi agli utenti, per sicurezza testa i pattern utilizzando uno screen reader. In caso di dubbi, è meglio utilizzare per impostazione predefinita solo gli elementi landmark HTML più recenti, in quanto il supporto dei browser è molto affidabile.
Confrontiamo gli elementi landmark HTML come mappati ai relativi ruoli landmark ARIA.
| Elemento punto di riferimento HTML | Ruolo del punto di riferimento ARIA |
|---|---|
<header> |
banner |
<aside> |
complementari |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
form |
<section> 1 |
region |
Ora, confronta alcuni esempi di struttura dei contenuti accessibili.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div><header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>Headings
Se implementati correttamente, i livelli di intestazione HTML formano un breve riepilogo dei contenuti complessivi della pagina.
Possiamo utilizzare sei livelli di intestazione. Il livello di intestazione 1 <h1> viene utilizzato per le informazioni più importanti della pagina, passando in modo incrementale al livello di intestazione 6 <h6> per le informazioni meno importanti.
La sequenza dei livelli di intestazione è importante. Idealmente, non dovresti saltare i livelli di intestazione, ad esempio iniziare una sezione con un <h1> e seguirla immediatamente con un <h5>. Dovresti invece passare all'<h5> in ordine. L'ordine dei livelli di intestazione è particolarmente importante per gli utenti di AT, poiché è uno dei modi principali per navigare tra i contenuti.
Per aiutarti a rispettare la struttura e l'ordine semantico appropriati per le intestazioni, valuta la possibilità di disaccoppiare gli stili CSS dai livelli di intestazione. In questo modo, hai una maggiore flessibilità negli stili di intestazione, mantenendo l'ordine dei livelli di intestazione. È fondamentale non utilizzare solo gli stili per creare le intestazioni, in quanto non vengono visualizzate da AT come intestazioni.
Quando falsifichiamo le intestazioni, la struttura appropriata non viene trasmessa agli utenti di AT.
I titoli sono utili anche per le persone con disturbi cognitivi e di disattenzione. È importante che i contenuti delle intestazioni siano significativi per aiutarli a capire cosa è più importante nella pagina.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div><header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>Elenchi
Gli elenchi HTML sono un modo per raggruppare semanticamente elementi simili tra loro assegnando loro un significato intrinseco, molto simile alla lista della spesa o a quella infinita di cose da fare che continui a ignorare.
Esistono tre tipi di elenchi HTML:
L'elemento elemento dell'elenco <li> viene utilizzato per rappresentare un elemento in un elenco ordinato o non ordinato, mentre gli elementi termine della descrizione
<dt> e definizione
<dd> possono essere trovati nell'elenco delle descrizioni.
Se programmati correttamente, questi elementi possono fornire agli utenti di ausili tecnologici non vedenti informazioni sulla struttura visibile dell'elenco. Quando un AT rileva un elenco semantico, può indicare all'utente il nome dell'elenco e il numero di elementi al suo interno. Mentre l'utente naviga nell'elenco, l'AT legge ad alta voce ogni elemento dell'elenco e indica il numero corrispondente nell'elenco: elemento 1 di 5, elemento 2 di 5 e così via.
Raggruppare gli elementi in elenchi aiuta anche le persone vedenti con disturbi cognitivi e di attenzione e quelle con disabilità di lettura, poiché i contenuti degli elenchi sono tipicamente progettati per avere più spazi vuoti visivi e sono pertinenti.
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div><div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>Tabelle
In HTML, le tabelle vengono generalmente utilizzate per organizzare i dati o il layout della pagina.
A seconda dello scopo della tabella, utilizzerai diversi elementi strutturali semantici. Le tabelle possono avere una struttura molto complessa, ma se rispetti le regole semantiche di base, sono abbastanza accessibili senza molto intervento.
Layout
Nei primi tempi di internet, le tabelle di layout erano l'elemento HTML principale utilizzato per creare strutture visive. Attualmente, per creare i layout utilizziamo una combinazione di elementi semantici e non semantici, come <div> e landmark.
Anche se i tempi della creazione di tabelle di layout sono quasi finiti, a volte vengono ancora utilizzate, ad esempio in email, newsletter e annunci con elementi visivi. In questi casi, le tabelle utilizzate solo per il layout non devono
utilizzare elementi strutturali che trasmettono relazioni e aggiungono contesto, come
<th> o <caption>.
Le tabelle di layout devono essere nascoste anche agli utenti AT con il ruolo di presentazione ARIA o lo stato aria-hidden.
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table><table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>Dati
A differenza di una tabella di layout, che deve essere nascosta agli utenti di Accesso in tempo reale, una tabella di dati e tutti i suoi elementi devono essere esposti. La struttura delle tabelle di dati è fondamentale per trasmettere agli utenti informazioni semplici e complesse.
Quando una tabella è strutturata correttamente, si formano relazioni tra le intestazioni e le righe delle colonne e i dati all'interno della tabella. Se non sono strutturate correttamente, l'utente deve decifrare il significato e il contesto delle informazioni nella tabella.
A seconda della complessità della tabella, la formazione delle relazioni tramite codice avviene in modi diversi. Il primo passaggio per rendere accessibile una tabella consiste nel eseguire il markup delle celle di intestazione con <th> e delle celle di dati con gli elementi <td>.
Per tabelle più complesse, potrebbe essere necessario utilizzare elementi di tabelle HTML aggiuntivi come <rowgroup>, <colgroup>, <caption> e scope per trasmettere significato e relazioni.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table><table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>