Regions landmark ARIA - Docs de MetricSpot

Què comprova aquesta auditoria

Analitza l’HTML renderitzat buscant regions landmark: els elements de seccionament <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (amb un nom accessible) i els seus equivalents ARIA (role="main", role="navigation", etc.). La comprovació falla si no hi ha cap <main> (o role="main") a la pàgina.

Per què importa

Els lectors de pantalla exposen un menú de landmarks: JAWS utilitza R, NVDA utilitza D, VoiceOver utilitza el rotor. Un usuari arriba a la teva pàgina i prem una tecla per saltar al contingut principal, sense passar per la capçalera ni el menú global.

Sense landmarks, aquesta drecera no existeix. L’usuari ha de navegar amb fletxes per cada enllaç de la capçalera, cada banner promocional, cada desplegable de login, cada selector d’idioma abans d’arribar a l’article que buscava. En un lloc de marketing típic són entre 30 i 60 elements d’àudio abans de la primera frase útil.

Els landmarks també són com es compleix el criteri d’èxit 1.3.1 de WCAG 2.1 (informació i relacions) per a l’estructura de la pàgina, i com les auditories de la European Accessibility Act esperen que les regions navegables s’exposin programàticament.

Com solucionar-ho

El mínim: envolta el contingut principal amb <main>. Afegeix <nav> al voltant de la navegació principal, <header> per a la capçalera del lloc, <footer> per al peu.

HTML:

<body>
  <header>
    <nav aria-label="Principal">...</nav>
  </header>
  <main>
    <h1>Títol de la pàgina</h1>
    <article>...</article>
    <aside aria-label="Articles relacionats">...</aside>
  </main>
  <footer>...</footer>
</body>

Regles on la gent ensopega:

Només un <main> per pàgina. Diversos <main> trenquen el mapa de landmarks.
Diverses regions <nav> necessiten noms accessibles perquè un lector de pantalla les pugui distingir. Utilitza aria-label="Principal", aria-label="Engrunes", aria-label="Peu", no les deixis sense nom.
<header> i <footer> només compten com a landmarks banner/contentinfo quan són fills directes de <body>. Dins d’un <article> són només contingut de seccionament, no landmarks.
No afegeixis redundantment role="main" a <main>. L’element natiu ja exposa el rol.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="ca">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro:

---
// src/layouts/Base.astro
---
<html lang="ca">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress: els temes moderns basats en blocs envolten el contingut de l’entrada amb <main> automàticament; els temes clàssics necessiten <?php wp_body_open(); ?> seguit del teu embolcall <main> a header.php i </main> abans de get_footer().

Si no pots canviar el marcat (CMS bloquejat, widget incrustat), afegeix role="main" al div embolcall existent, el mateix efecte per a la tecnologia assistiva, menys ideal per als parsers.

Combina-ho amb declarar l’idioma de la pàgina i etiquetes de camps de formulari: les tres juntes cobreixen la majoria de millores d’accessibilitat fàcils d’aplicar.

Preguntes freqüents

Necessito `role="banner"` i `role="contentinfo"` a `<header>` i `<footer>`?

No. Quan <header> i <footer> són fills directes de <body>, els navegadors els exposen com a banner i contentinfo automàticament. Afegir el rol és redundant i pot confondre alguns lectors de pantalla antics.

I `<section>`, compta com a landmark?

Només quan té un nom accessible (aria-label o aria-labelledby). Una <section> sense nom és només una regió genèrica. Si la secció no ha d’aparèixer al menú de landmarks, utilitza <div>.

Afegir landmarks afectarà l’SEO?

Indirectament. Google no posiciona per landmarks, però sí que utilitza l’esquema d’HTML5 (especialment <main> i <article>) per identificar el contingut principal respecte del chrome. Una estructura de landmarks més neta correlaciona amb una extracció més neta a les AI Overviews i als featured snippets.