Portada Blog

Octa.Beta v.0.3

dijous 10 abril 2014 per

Landmark roles: millora l’accessibilitat del teu web


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 formulari
  • main: contingut principal del document
  • navigation: 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:

, ,

Pujar

Can Antaviana

Santa Justina 29 25400 Les Borges Blanques (Lleida) Tel: 973 14 34 81