Uno degli aspetti più importanti dell'accessibilità digitale è la la struttura della pagina. Quando crei il tuo sito web o la tua app utilizzando elementi strutturali di affidarsi solo agli stili, fornisci un contesto fondamentale alle persone che usano tecnologie (AT), come gli screen reader.
Gli elementi strutturali fungono da contorno dei contenuti sullo schermo, ma fungono anche da punti di ancoraggio per facilitare la navigazione all'interno dei contenuti.
Quando utilizzi gli elementi HTML semantici, il significato intrinseco di ogni elemento viene trasmesso all'albero dell'accessibilità utilizzati dall'AT, dando più significato ai contenuti rispetto agli elementi non semantici. Potrebbero verificarsi casi in cui è necessario aggiungere ulteriori attributi ARIA per creare relazioni o per migliorare l'esperienza utente complessiva, ma nella maggior parte di Compute Engine, uno dei oltre 100 elementi HTML disponibile dovrebbe funzionare abbastanza bene da solo.
Anche se questo modulo si concentra sugli elementi strutturali più comuni, all'accessibilità digitale, ci sono sicuramente elementi aggiuntivi e i fattori ambientali da considerare quando si struttura il sito web o dell'app. Questi esempi sono un'introduzione all'argomento, piuttosto che un'offerta esaustiva.
Punti di riferimento
Gli utenti di AT si affidano a elementi strutturali per fornire loro informazioni layout generale della pagina. Quando si separano grandi aree di contenuti, è possibile utilizzare i ruoli dei punti di riferimento ARIA o i più recenti elementi dei punti di riferimento HTML per aggiungere contesto strutturale della pagina.
I punti di riferimento garantiscono che i contenuti si trovino in regioni navigabili. Ti consigliamo di fornire almeno un punto di riferimento per pagina.
Alcune risorse suggeriscono la combinazione di punti di riferimento ARIA e HTML per fornire una migliore copertura AT. Sebbene questo tipo di ridondanza non dovrebbe causare problemi agli utenti, verifica i pattern utilizzando uno screen reader essere sicuri. In caso di dubbi, è meglio utilizzare per impostazione predefinita solo la versione più recente elementi di riferimento, come il supporto del browser è molto robusto.
Confrontiamo gli elementi HTML dei punti di riferimento mappato al suo i ruoli dei punti di riferimento ARIA corrispondenti.
| Elemento punto di riferimento HTML | Ruolo punto di riferimento ARIA |
|---|---|
<header> |
banner |
<aside> |
complementare |
<footer> |
contentinfo |
<nav>
|
navigazione |
<main> |
principale |
<form> 1 |
modulo |
<section> 1 |
region [regione] |
Confrontiamo ora esempi di struttura di 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, livelli di intestazione HTML formano uno schema conciso dei contenuti complessivi della pagina.
Puoi utilizzare sei livelli di intestazione. Per le informazioni più importanti e importanti della pagina viene utilizzato il livello 1 <h1>, che si sposta in modo incrementale
heading level sei <h6> per le informazioni più basse e meno importanti.
La sequenza dei livelli delle intestazioni è importante. L'ideale è non saltare
a livelli di intestazione, ad esempio iniziare una sezione con <h1> e
seguendolo con un <h5>. Puoi invece passare al <h5> in
ordine. L'ordine dei livelli di testa è particolarmente importante per gli utenti di AT
poiché è uno dei modi
principali per navigare tra i contenuti.
Per aiutarti a rispettare la struttura semantica e l'ordine corretti per le intestazioni, valuta la possibilità di disaccoppiare gli stili CSS dai livelli di intestazione. Questo consente di maggiore flessibilità negli stili delle intestazioni, mantenendo l'ordine dei livelli delle intestazioni. È fondamentale non usare da soli gli stili per creare titoli, in quanto non sono visti da AT come intestazione.
Quando i titoli vengono falsificati, la struttura appropriata non viene comunicata agli utenti AT.
Le intestazioni sono utili anche per le persone con deficit cognitivo e di attenzione disturbi. È importante che il titolo del titolo abbia senso per aiutarlo 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
Elenchi HTML un modo per raggruppare semanticamente gli elementi simili l'uno all'altro, fornendo loro un po' come la lista della spesa o l'infinita lista di cose da fare continuano a ignorare.
Esistono tre tipi di elenchi HTML:
La voce dell'elenco <li>
viene utilizzato per rappresentare un elemento in un elenco ordinato o non ordinato, mentre l'elemento
termine descrittivo
<dt> e definizione
Gli elementi <dd> possono
disponibile nell'elenco delle descrizioni.
Se programmati correttamente, questi elementi possono informare gli utenti AT non vedenti del la struttura visibile dell'elenco. Quando un AT incontra un elenco semantico, può indicare all'utente il nome dell'elenco e quanti elementi contiene. Come utente naviga all'interno della lista, l'AT leggerà ogni voce ad alta voce e dirà il numero che si trova nell'elenco: uno di cinque, due di cinque e così via.
Il raggruppamento degli elementi in elenchi aiuta anche le persone vedenti con disturbi dell'attenzione e persone con disabilità legate alla lettura, in quanto i contenuti degli elenchi in genere hanno uno spazio visivo più ampio e i contenuti sono dritti.
<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 sono generalmente utilizzate per organizzare i dati o il layout di pagina.
A seconda dello scopo della tabella, utilizzerai diverse strutture semantiche elementi. Le tabelle possono avere una struttura molto complessa, ma se segui il regole semantiche di base, sono piuttosto accessibili senza un grande intervento.
Layout
Agli albori di internet, le tabelle di layout erano l'elemento HTML principale
utilizzati per creare strutture visive. Oggi utilizziamo un mix di semantica e
elementi non semantici come <div> e punti di riferimento per creare layout.
Anche se i tempi della creazione delle tabelle di layout sono quasi terminati, ci sono dei momenti in cui
le tabelle di layout vengono ancora utilizzate, ad esempio in email, newsletter e
pubblicità. 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 inoltre essere nascoste agli utenti AT con l'ARIA ruolo presentazione o 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 dovrebbe essere nascosta agli utenti AT, tabella di dati e tutti i suoi elementi devono essere esposti. La struttura delle tabelle di dati è fondamentale per trasmettere e complesse per gli utenti.
Quando una tabella è strutturata correttamente, le relazioni si formano tra la colonna intestazioni e righe e i dati contenuti nella tabella. Se strutturata in modo errato, l'utente è lasciato a decifrare il significato e il contesto delle informazioni .
A seconda della complessità della tabella, la creazione di relazioni tramite il codice
realizzato in diversi modi. Il primo passaggio per rendere una tabella accessibile
per eseguire il markup delle celle di intestazione
<th> e celle di dati
con elementi <td>.
Per tabelle più complesse, potresti dover utilizzare altri elementi di tabella HTML
come
<rowgroup>,
<colgroup>,
<caption>,
e
Da scope a
comunicano 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>