Gli elementi dei punti di riferimento HTML5 vengono utilizzati per migliorare la navigazione

Gli elementi HTML5 come main, nav e aside fungono da punti di riferimento o aree speciali della pagina a cui possono passare gli screen reader e altre tecnologie per la disabilità. L'utilizzo di elementi dei punti di riferimento può migliorare notevolmente l'esperienza di navigazione sul tuo sito per gli utenti di tecnologie per la disabilità. Scopri di più nei punti di riferimento HTML 5 e ARIA della Deque University.

Come controllare manualmente i punti di riferimento

Utilizza l'elenco degli elementi dei punti di riferimento di W3C per verificare che ogni sezione principale della pagina sia contenuta da un elemento punto di riferimento. Ad esempio:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Puoi anche utilizzare strumenti come l'estensione Accessibility Insights di Microsoft per visualizzare la struttura della pagina e le sezioni di individuazione che non sono contenute nei punti di riferimento:

Come utilizzare i punti di riferimento in modo efficace

• Utilizza gli elementi dei punti di riferimento per definire le sezioni principali della pagina anziché affidarti a elementi generici come <div> o <span>.
• Utilizza i punti di riferimento per trasmettere la struttura della pagina. Ad esempio, l'elemento <main> dovrebbe includere tutti i contenuti direttamente correlati all'idea principale della pagina, in modo che ce ne siano solo uno per pagina. Consulta il riepilogo degli elementi di sezionamento dei contenuti di MDN per informazioni su come utilizzare ciascun punto di riferimento.
• Utilizza i punti di riferimento con oculatezza. La presenza di un numero eccessivo di punti di riferimento può rendere la navigazione più difficile per gli utenti delle tecnologie per la disabilità, in quanto impedisce loro di passare facilmente ai contenuti desiderati.

Nota: se scopri che la tua pagina contiene, ad esempio, quattro elementi <nav> o dieci elementi <aside>, potrebbe essere necessario semplificare l'interfaccia utente o la struttura dei contenuti, il che probabilmente andrà a vantaggio di tutti gli utenti.

Per ulteriori informazioni, consulta il post su intestazioni e punti di riferimento.

Risorse

• Il codice sorgente degli elementi punto di riferimento HTML5 viene utilizzato per migliorare la navigazione
• Elementi di sezionamento HTML5 (W3C)
• Punti di riferimento HTML 5 e ARIA (Deque University)