Struttura dei contenuti

Uno degli aspetti più importanti dell'accessibilità digitale è la struttura sottostante della pagina. Quando crei il tuo sito web o la tua app utilizzando elementi strutturali invece di affidarti esclusivamente agli stili, fornisci un contesto fondamentale alle persone che utilizzano tecnologie per la disabilità, 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 elementi HTML semantici, il significato intrinseco di ogni elemento viene trasmesso alla struttura di accessibilità e utilizzato dall'AT, attribuendo un significato ai contenuti maggiore rispetto agli elementi non semantici. Potrebbero verificarsi casi in cui devi aggiungere altri attributi ARIA per creare relazioni o per migliorare l'esperienza utente complessiva, ma nella maggior parte dei casi, uno degli oltre 100 elementi HTML disponibili dovrebbe funzionare abbastanza bene da solo.

Anche se questo modulo si concentra sugli elementi strutturali più utilizzati, fondamentali per l'accessibilità digitale, ci sono sicuramente elementi aggiuntivi e fattori ambientali da considerare quando si sviluppa la struttura del sito web o dell'app. Questi esempi sono un'introduzione all'argomento, non esaustivi.

Punti di riferimento

Gli utenti di AT si basano su elementi strutturali per fornire loro informazioni sul layout generale della pagina. Quando separi grandi regioni di contenuti, puoi utilizzare i ruoli dei punti di riferimento ARIA o i più recenti elementi dei punti di riferimento HTML per aggiungere un contesto strutturale alla pagina.

I punti di riferimento assicurano che i contenuti siano in regioni navigabili. Ti consigliamo di fornire almeno un punto di riferimento per pagina.

Alcune risorse suggeriscono di combinare i punti di riferimento ARIA e HTML per fornire una migliore copertura AT. Anche se questo tipo di ridondanza non dovrebbe causare problemi agli utenti, verifica i pattern utilizzando uno screen reader per esserne certo. In caso di dubbi, è meglio utilizzare per impostazione predefinita solo gli elementi di riferimento HTML più recenti, poiché il supporto del browser è molto solido.

Confrontiamo gli elementi dei punti di riferimento HTML mappati con i rispettivi ruoli dei punti di riferimento ARIA.

Ora confrontiamo alcuni 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 l'implementazione è corretta, i livelli di intestazioni HTML formano un conciso riepilogo dei contenuti complessivi della pagina.

È possibile utilizzare sei livelli di intestazione. L'intestazione di livello uno, <h1>, viene utilizzata per le informazioni più importanti e più importanti della pagina, passando in modo incrementale al livello sesto <h6> per le informazioni più importanti e meno importanti.

La sequenza dei livelli di intestazioni è importante. Idealmente, non saltare i livelli di intestazione, ad esempio iniziare una sezione con un <h1> e seguirla immediatamente con un <h5>. Dovresti invece passare alla <h5> in ordine. L'ordine a livello di intestazioni è particolarmente importante per gli utenti AT in quanto questo è uno dei modi principali per spostarsi tra i contenuti.

Per aiutarti a rispettare la struttura semantica e l'ordine corretti delle intestazioni, valuta la possibilità di disaccoppiare gli stili CSS dai livelli delle intestazioni. Ciò consente una maggiore flessibilità negli stili delle intestazioni, mantenendo al contempo l'ordine a livello di intestazione. È fondamentale che non utilizzi gli stili da soli per creare le intestazioni, in quanto AT non lo considera un titolo.

Quando le intestazioni vengono falsificate, agli utenti di AT non viene comunicata la struttura appropriata.

Le intestazioni sono utili anche per le persone con disturbi cognitivi e deficit di attenzione. È importante rendere significativi i contenuti dell'intestazione per aiutarli a capire ciò che è 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, proprio come la lista della spesa o quell'elenco infinito di attività che continui a ignorare.

Esistono tre tipi di elenchi HTML:

• ha ordinato <ol>
• <ul> non ordinato
• descrizione <dl>

L'elemento elemento dell'elenco <li> viene utilizzato per rappresentare un elemento in un elenco ordinato o non ordinato, mentre gli elementi del termine di descrizione <dt> e della definizione <dd> sono disponibili nell'elenco delle descrizioni.

Se programmati correttamente, questi elementi possono informare gli utenti AT non vedenti sulla struttura visibile dell'elenco. Quando un AT incontra un elenco semantico, può indicare all'utente il nome dell'elenco e il numero di elementi che contiene. Quando l'utente naviga nell'elenco, l'AT leggerà ad alta voce ogni elemento dell'elenco e indicherà il numero corrispondente: voce uno di cinque, elemento due di cinque e così via.

Il raggruppamento degli elementi in elenchi è utile anche per le persone vedenti con disturbi cognitivi e dell'attenzione e per chi soffre di disabilità legate alla lettura, in quanto i contenuti degli elenchi sono in genere definiti in modo da avere più spazi vuoti visivi e i contenuti vanno dritti al punto.

<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

Nel codice HTML, le tabelle vengono generalmente utilizzate per organizzare i dati o il layout di pagina.

A seconda dello scopo della tabella, utilizzerai diversi elementi strutturali semantici. Le tabelle possono avere una struttura molto complessa, ma quando ti attieni alle regole semantiche di base, sono piuttosto accessibili senza un intervento eccessivo.

Layout

Agli albori di Internet, le tabelle di layout erano l'elemento HTML principale utilizzato per creare strutture visive. Oggi utilizziamo una combinazione di elementi semantici e non semantici, come <div> e punti di riferimento, per creare i layout.

Sebbene i tempi per la creazione delle tabelle di layout siano per lo più finiti, a volte si utilizzano ancora le tabelle di layout, ad esempio in email, newsletter e pubblicità visivamente accattivanti. In questi casi, le tabelle utilizzate solo per il layout non devono utilizzare elementi strutturali che trasmettono relazioni e aggiungono contesto, ad esempio <th> o <caption>.

Le tabelle di layout devono inoltre essere nascoste agli utenti AT con il ruolo di presentazione ARIA o lo stato nascosto di aria.

<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 AT, una tabella di dati e tutti i suoi elementi devono essere esposti. La struttura delle tabelle di dati è fondamentale per trasmettere informazioni semplici e complesse agli utenti.

Quando una tabella è strutturata correttamente, si formano relazioni tra le intestazioni di colonna e le righe e i dati all'interno della tabella. Se strutturato in modo errato, l'utente viene lasciato decifrare il significato e il contesto delle informazioni nella tabella.

A seconda della complessità della tabella, la creazione di relazioni tramite il codice avviene in modi diversi. Il primo passaggio per rendere accessibile una tabella è eseguire il markup delle celle di intestazione con <th> e delle celle di dati con gli elementi <td>.

Per le tabelle più complesse, potrebbe essere necessario utilizzare elementi aggiuntivi della tabella HTML, 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>