Landmark
Vedi anche: ARIA landmark, landmark region
Una regione di una pagina identificata da un elemento HTML5 o da un ruolo ARIA a cui gli utenti di screen reader possono navigare direttamente. I landmark (banner, navigation, main, complementary, contentinfo) formano lo scheletro strutturale della pagina.
I landmark sono regioni a livello di pagina tra cui gli utenti di screen reader possono saltare direttamente, tramite scorciatoie da tastiera dedicate. Equivalgono per la pagina alle divisioni per capitoli di un libro: un utente vedente percepisce la struttura attraverso indizi visivi (l’intestazione visibile in cima, la barra laterale a destra, il footer in fondo); un utente di screen reader percepisce la struttura attraverso i landmark.
I landmark standard
Ognuno di questi è sia un elemento HTML5 sia un ruolo ARIA. Occorre usare l’elemento HTML5 dove possibile; il ruolo ARIA esiste per i casi in cui non è possibile usare l’elemento nativo.
| Regione | Elemento HTML5 | Ruolo ARIA |
|---|---|---|
| Banner della pagina (logo, nav primaria) | <header> (in cima alla pagina) | role="banner" |
| Navigazione principale | <nav> | role="navigation" |
| Contenuto primario | <main> | role="main" |
| Contenuto complementare (barra laterale) | <aside> | role="complementary" |
| Footer della pagina (copyright, link secondari) | <footer> (in fondo alla pagina) | role="contentinfo" |
| Ricerca | <search> (HTML5) oppure <form role="search"> | role="search" |
| Regione generica che richiede identificazione | — | role="region" (con etichetta) |
| Modulo (se non è ricerca) | <form> | role="form" |
Si noti che <header> e <footer> corrispondono rispettivamente a banner e
contentinfo solo quando sono figli diretti di <body>. Un <header>
all’interno di un <article> è semplicemente un’intestazione di articolo — non
diventa un landmark banner.
Come gli utenti di screen reader li utilizzano
Ogni screen reader principale dispone di una modalità di navigazione solo landmark:
- JAWS:
Rscorre tra i landmark;Shift+Rscorre all’indietro;Insert+F7apre un elenco di tutti i landmark. - NVDA:
Dscorre tra i landmark;Shift+Dall’indietro;Insert+F7apre l’elenco degli elementi. - VoiceOver (macOS): VO+U apre il rotor; si ruota su «Landmarks»; ci si sposta con i tasti freccia.
- VoiceOver (iOS): si ruota con due dita su «Landmarks» nel rotor; si scorre su/giù tra di essi.
- TalkBack (Android): si scorre su poi a destra per aprire il menu dei controlli di lettura; si seleziona la modalità «Landmarks»; si scorre a destra tra di essi.
Una pagina con landmark ben strutturati offre all’utente di screen reader un sommario accessibile con un solo tasto.
Errori comuni sui landmark
- Nessun
<main>. Senza un landmark main, gli utenti di screen reader devono scorrere con Tab oltre l’intestazione ad ogni caricamento di pagina. Ogni pagina deve avere esattamente un<main>. - Più
<nav>senza etichetta. Una pagina con una barra di navigazione principale e una barra laterale, entrambe come<nav>, fa sì che l’utente di screen reader debba scegliere tra due voci «navigation» indistinguibili. Occorre etichettare ognuna conaria-label:<nav aria-label="Primaria">,<nav aria-label="Contenuti della pagina">. role="banner"su un elemento interno. Un<header>all’interno di<main>o<article>non è un banner; è un’intestazione di articolo. Non si deve aggiungererole="banner"a questo elemento.- Landmark duplicati. Due
<main>sulla stessa pagina violano la regola «landmark-no-duplicate-main». axe e Lighthouse rilevano entrambi questa anomalia. - Region senza etichetta.
role="region"richiedearia-labeloaria-labelledby. In caso contrario gli screen reader lo ignorano.
Come effettuare l’audit dei landmark
Si apra la pagina in qualsiasi screen reader moderno, si prema la scorciatoia per l’elenco dei landmark e si verifichi:
- Esiste esattamente un banner, un main, un contentinfo.
- Ogni
<nav>ha un nome accessibile distinto. - La struttura dei landmark corrisponde alla struttura visiva della pagina.
Un elenco di landmark che recita «banner, navigation, navigation, main, complementary, contentinfo» senza ulteriori etichette significa che l’utente non è in grado di distinguere le due navigazioni. Occorre correggerlo.