Ja sabem que un document HTML ben estructurat ens aporta sempre beneficis: si definim correctament la jerarquia mitjançant encapçalaments (h1
, h2
, h3
…) ajudarem enormement els usuaris de tecnologies assistives a l’hora de navegar per la pàgina. Per altra banda, disposem d’una altra eina que pot ajudar a millorar el nivell d’accessiblitat d’una pàgina. Es tracta dels Landmark roles, que formen part de l’especificació WAI-ARIA del W3C.
Aquest mecanisme ens ajuda a identificar de forma consistent seccions d’una pàgina (com la cerca, la navegació o el contingut principal), és un complement als elements que ens proporciona el llenguatge HTML en qualsevol de les seves versions, i el millor de tot és que és molt fàcil d’implementar.
Amb els landmark roles, a les tecnologies assistives (lectors de pantalla i similars) els és més fàcil navegar per la pàgina, poden saltar a una àrea en concret simplement pulsant una tecla, per exemple.
Podem afegir els landmark roles a qualsevol document HTML que ja tinguem construït, simplement afegint l’atribut role
a un element contenidor, i especificant el valor del role més adequat al contingut d’aquest contenidor. Per exemple: <main role="main">
.
Tingueu en compte que en HTML4 i (X)HTML caldrà fer ús del següent DTD perquè el validador de sintaxis del W3C no doni errors:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
El llistat de roles disponibles que podem afegir al nostre document són els següents:
application
: àrea definida com a aplicació web.banner
: àrea de contingut relatiu al lloc web, més que a la pàgina en concret. Normalment seria la part superior de la pàgina que conté el logo principal i el cercador.complementary
: secció de suport al contingut principal.contentinfo
: àrea que aporta informació sobre el document principal, normalment la informació que trobem als peus de pàgina (copyright, polítiques de privacitat, etc.)form
: secció contenidora dels diferents elements que conformen un formularimain
: contingut principal del documentnavigation
: col·lecció d’enllaços per navegar pel document o documents relacionats.search
: conjunt d’elements que formen una eina de cerca.
Aquí podeu veure com els landmark roles d’ARIA ajuden els usuaris d’un lector de pantalla: