Aprèn a implementar els landmarks ARIA (main, nav, header, footer, aside) per millorar l'accessibilitat web. Guia pràctica amb exemples de codi, skip links i ordre de tabulació lògic per a lectors de pantalla NVDA, JAWS i VoiceOver.
Què són els landmarks ARIA i per què els necessites?
Imagina que entres en un supermercat on no hi ha cap cartell indicant on són les fruites, la carn o la fleca. Simplement camines entre passadissos idèntics sense saber on ets. Això és exactament el que experimenta una persona que utilitza un lector de pantalla quan el teu web no té landmarks ARIA. Navegues a cegues, sense referències, sense estructura.
Els landmarks ARIA són regions semàntiques que divideixen la teva pàgina web en blocs amb significat: la navegació principal, el contingut central, la capçalera, el peu de pàgina i les barres laterals. Són com els cartells del supermercat: diuen a les tecnologies d'assistència «aquí hi ha el menú», «aquí comença el contingut important», «això és informació complementària».
Personalment, crec que els landmarks són una de les millores d'accessibilitat amb més impacte i menys esforç. No necessites redissenyar res, no canvies l'aspecte visual del teu web. Només afegeixes estructura semàntica que fa la vida enormement més fàcil a les persones que depenen de lectors de pantalla com NVDA, JAWS o VoiceOver.
Els cinc landmarks fonamentals que tot web necessita
L'especificació WAI-ARIA del W3C defineix diversos rols de landmark, però n'hi ha cinc que formen la columna vertebral de qualsevol lloc web ben estructurat. Vegem-los en detall:
1. main: el cor del teu contingut
El landmark main identifica el contingut principal de la pàgina. Només n'hi ha d'haver un per pàgina, i és on el lector de pantalla espera trobar el que realment importa. Si fas servir l'etiqueta HTML5 <main>, el navegador assigna automàticament el role="main". No cal duplicar-lo.
Alguna vegada has buscat alguna cosa en un web i has hagut de passar pel menú, el logotip, les xarxes socials i tres bàners abans d'arribar al contingut? Per a algú amb NVDA, aquesta experiència es multiplica per deu. Amb un landmark main ben col·locat, l'usuari prem una tecla i salta directament al contingut.
2. nav: el teu sistema de navegació
El landmark nav marca els blocs de navegació. Pots tenir-ne diversos en una pàgina (navegació principal, navegació secundària, fil d'Ariadna), però cadascun ha de tenir una etiqueta aria-label o aria-labelledby que el diferenciï. L'etiqueta HTML5 <nav> porta el role="navigation" implícit.
Un error comú que trobo en auditories d'accessibilitat és tenir tres elements <nav> sense cap etiqueta. L'usuari de JAWS escolta «navegació, navegació, navegació» sense saber quina és quina. Afegir aria-label="Navegació principal" i aria-label="Fil d'Ariadna" resol el problema en segons.
3. header: la capçalera que orienta
El landmark header, quan és fill directe del body, es converteix en el bàner del lloc. Aquí va el teu logotip, el nom del lloc i típicament la navegació principal. En HTML5, l'element <header> dins del body actua com a role="banner".
Atenció: un <header> dins d'un <article> o una <section> no genera un landmark banner. Només ho fa quan és fill directe del body o d'un element sense rol semàntic. Això confon molts desenvolupadors en la remediació d'accessibilitat web.
4. footer: informació de tancament
El landmark footer, com a fill directe del body, es mapeja al role="contentinfo". Aquí col·loques informació de copyright, enllaços legals, dades de contacte i polítiques de privacitat. Igual que el header, només genera landmark quan està al nivell superior del document.
Segons dades de WebAIM al seu informe d'accessibilitat de 2025, el 68 % dels llocs web tenen un <footer> correctament posicionat, però només el 41 % afegeix etiquetes descriptives quan hi ha múltiples footers. La diferència entre un footer correcte i un d'accessible està en els detalls.
5. aside: contingut complementari
El landmark aside marca contingut relacionat però no essencial: barres laterals, widgets, publicitat, articles relacionats. En HTML5, <aside> es mapeja automàticament a role="complementary". És important que aquest contingut tingui sentit fora del flux principal.
T'has preguntat mai per què alguns blogs accessibles col·loquen la barra lateral després del contingut principal al DOM, encara que visualment apareix al costat? És una estratègia deliberada perquè l'ordre de tabulació lògic porti primer al contingut important i després al complementari.
Taula de correspondència HTML5 i rols ARIA
| Element HTML5 | Rol ARIA implícit | Landmark | Quants per pàgina? |
|---|---|---|---|
| <main> | main | Sí | Exactament 1 |
| <nav> | navigation | Sí | Diversos (amb aria-label) |
| <header> (fill de body) | banner | Sí | 1 (nivell superior) |
| <footer> (fill de body) | contentinfo | Sí | 1 (nivell superior) |
| <aside> | complementary | Sí | Diversos (amb aria-label) |
| <section> | region (amb nom) | Condicional | Diversos |
| <form> | form (amb nom) | Condicional | Diversos |
L'skip link: accessibilitat amb una sola tecla
L'skip link (o enllaç per saltar al contingut) és un mecanisme que permet als usuaris de teclat i lectors de pantalla saltar-se la navegació repetitiva i anar directament al contingut principal. La WCAG 2.2 el recull al criteri d'èxit 2.4.1 «Evitar blocs» amb nivell A.
La implementació és senzilla: un enllaç al principi del document que apunta a l'id del <main>. Normalment s'amaga visualment i només apareix quan rep el focus per tabulació. Això beneficia no només persones cegues, sinó també les que naveguen exclusivament amb teclat per discapacitats motrius.
Personalment, considero l'skip link com la prova de foc de l'accessibilitat bàsica. Si el teu web no el té, probablement hi ha moltes altres coses que falten. És tan fonamental com el cinturó de seguretat en un cotxe: simple, barat i salva vides (digitals).
Estructura d'encapçalaments i landmarks: el duo perfecte
Els landmarks i l'estructura d'encapçalaments per a l'accessibilitat són dues cares de la mateixa moneda. Els landmarks divideixen la pàgina en regions funcionals; els encapçalaments (h1-h6) creen una jerarquia de contingut dins d'aquestes regions. Junts, ofereixen dos sistemes de navegació complementaris.
Un usuari de NVDA pot llistar tots els landmarks amb la tecla D o obrir el diàleg d'elements amb Insert+F7. També pot navegar per encapçalaments amb la tecla H. Tenir ambdós sistemes ben implementats és com oferir tant un índex com un mapa en un llibre: cada persona tria la forma que li resulta més còmoda.
El W3C recomana que cada landmark tingui almenys un encapçalament que el descrigui. Així, si l'usuari navega per encapçalaments, troba la mateixa estructura que si navega per landmarks. Aquesta redundància no és un defecte; és una característica del disseny accessible.
Ordre de tabulació lògic: quan el Tab té sentit
L'ordre de tabulació lògic és la seqüència en què els elements interactius reben el focus quan prems la tecla Tab. Ha de seguir un flux natural: de dalt a baix, d'esquerra a dreta (en idiomes LTR), seguint l'estructura visual de la pàgina. Els landmarks ajuden a organitzar aquest flux.
Un error freqüent en la remediació d'accessibilitat web és fer servir tabindex amb valors positius per «arreglar» l'ordre de tabulació. Això crea un caos total. La solució correcta és organitzar l'HTML en el mateix ordre en què s'ha de tabular. Si el teu DOM segueix una estructura lògica amb landmarks ben ubicats, l'ordre de tabulació es resol sol.
La WCAG 2.2 aborda això al criteri 2.4.3 «Ordre del focus» (nivell A). Si l'ordre de tabulació no segueix una seqüència lògica, qualsevol usuari de teclat es perdrà, i un lector de pantalla presentarà la informació en un ordre confús.
Errors comuns en implementar landmarks ARIA
A les meves auditories d'accessibilitat, trobo aquests errors una vegada i una altra:
- Múltiples <main> a la mateixa pàgina: només n'hi ha d'haver un visible alhora.
- Landmarks sense etiqueta: quan hi ha diversos <nav> o <aside>, cadascun necessita aria-label.
- Rols ARIA redundants: escriure <nav role="navigation"> és redundant. El rol ja és implícit.
- Header i footer dins de seccions tractats com a landmarks: només generen landmark al nivell superior.
- Oblidar l'skip link: el mecanisme més senzill i més oblidat.
- Contingut fora de landmarks: tot el contingut visible ha d'estar dins d'algun landmark.
Segons l'enquesta de WebAIM Million de 2025, el 23 % de les pàgines d'inici analitzades no tenien un landmark main identificable, i el 45 % tenia landmarks mal etiquetats. La bona notícia és que aquests errors són fàcils de corregir.
Com verificar els landmarks amb lectors de pantalla
Verificar landmarks no requereix eines sofisticades. Aquí t'explico com fer-ho amb els tres lectors de pantalla més utilitzats:
| Lector de pantalla | Llistar landmarks | Navegar entre landmarks | Plataforma |
|---|---|---|---|
| NVDA | Insert + F7 > Landmarks | Tecla D / Shift + D | Windows |
| JAWS | Insert + Ctrl + R | Tecla R / Shift + R (mode ràpid) | Windows |
| VoiceOver | Rotor (VO + U) > Landmarks | VO + Cmd + { / } | macOS / iOS |
A més, extensions de navegador com Landmarks de Matthew Tylee Atkinson (disponible per a Chrome i Firefox) et mostren els landmarks visualment superposats a la pàgina. És una eina gratuïta i extremadament útil per al desenvolupament i el testing.
Preguntes freqüents
Tot el que has de saber.
01
Les etiquetes semàntiques d'HTML5 (,
02
Tècnicament pots, però només un ha de ser visible i accessible alhora. En aplicacions d'una sola pàgina (SPA), pots tenir diversos ocults i mostrar només el corresponent a la vista actual. Si n'hi ha més d'un visible, els lectors de pantalla es confonen i l'experiència es degrada significativament.
04
Directament no, però indirectament sí. Els motors de cerca com Google utilitzen l'estructura semàntica per entendre el contingut de la pàgina. Un ben definit ajuda Googlebot a identificar el contingut principal davant de la navegació o els widgets laterals. A més, un web accessible millora l'experiència d'usuari, redueix la taxa de rebot i augmenta el temps de permanència, factors que Google sí que té en compte en el rànquing.
05
Frameworks com Bootstrap o Tailwind CSS no trenquen landmarks per si mateixos, però els patrons de disseny que promouen (divs imbricats, components sense semàntica) poden fer que els landmarks quedin enterrats o absents. La solució és auditar l'estructura final de l'HTML renderitzat, no el codi font del component. Eines com l'extensió Landmarks o l'arbre d'accessibilitat de les DevTools de Chrome et mostren la realitat que perceben els lectors de pantalla.
06
L'ordre de tabulació segueix l'ordre del DOM, no la posició visual creada per CSS. Si el teu
