Normative · ARIA

Ruolo Punto di riferimento

region

Un landmark generico per contenuti che non rientrano in banner, main, navigation, complementary o contentinfo — ma che sono comunque abbastanza importanti da giustificare la navigazione diretta. Un <section> diventa un landmark region quando, e solo quando, ha un nome accessibile.

Quando usarlo

Per una sezione di pagina significativa che non corrisponde a nessun altro landmark e alla quale gli utenti di screen reader dovrebbero poter saltare direttamente: un carosello «Prodotti in evidenza», il passaggio corrente di un form a più fasi, una regione di trascrizione di chat all’interno di un’applicazione più ampia.

<section> viene esposto come landmark region SOLO quando ha un nome accessibile (aria-label o aria-labelledby). Un <section> senza nome è semplicemente un gruppo generico — nessuna esposizione come landmark. Questo è voluto: troppi landmark rendono inutile il menu dei landmark.

role="region" su un <div> funziona allo stesso modo — il nome è obbligatorio.

Quando usare region vs. group

Usare role="region" (o <section aria-label>)Usare role="group"
Sezione principale della pagina che giustifica la navigazione tramite landmarkInsieme di controlli correlati senza status di landmark
Una o due per paginaPuò essere presente molte volte per pagina
Ha sempre un nome accessibileIl nome è facoltativo

In caso di dubbio: si ponga la domanda «un utente di screen reader vorrebbe poter saltare direttamente qui?». Se sì, region. Se no, group.

Errori comuni

  • <section> senza aria-label né aria-labelledby. Non è un landmark; il wrapper non apporta alcun beneficio all’accessibilità.
  • Contrassegnare ogni <section> come region. Riempie il menu dei landmark e ne sminuisce il valore complessivo.
  • aria-label="Section" — privo di significato. L’etichetta deve descrivere ciò che rende questa sezione distinta.
  • Usare role="region" per una sidebar — quella è complementary. Occorre scegliere il landmark più specifico.
  • role="region" sul <div> esterno E su un <section> interno — landmark duplicati per lo stesso contenuto.

Esempio

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>