Eines per millorar l'accessibilitat (I): Els 5 millors complements de Firefox

Controlar l'accessibilitat d'una pàgina web és una tasca que requereix coneixements específics: nocions de programació web (HTML, CSS, JavaScript...) i coneixement exhaustiu de les normes WCAG. Hi ha però un gran nombre d'eines que, sense arribar a convertir-la en una tasca automatitzada, ens poden ajudar a fer-la més senzilla guiant-nos i presentant-nos de forma ràpida la informació necessària. En aquest primer post repassarem unes quantes de les eines més útils i fàcils d'utilitzar: els complements de Firefox.

1. Firebug

Probablement Firebug sigui el complement que més programadors web tenen instal·lat. Consisteix en una sèrie d'eines que permeten explorar el codi d'una pàgina web, modificar-lo "en calent", veure les propietats CSS de cada element, inspeccionar l'arbre DOM, fer debug del codi JavaScript, veure els temps de càrrega de cada element i mil i una funcionalitats més. És, en definitiva, una eina imprescindible per analitzar les característiques del codi de forma ràpida i eficient.

Ús en accessibilitat: Si bé el Firebug és una eina destinada als creadors de pàgines, també resulta molt útil a l'hora de fer anàlisis web. Bàsicament l'utilitzarem per veure de forma ràpida les propietats CSS dels elements HTML que estem analitzant i per localitzar ràpidament parts del codi gràcies a la funcionalitat de cercador.

Pàgina oficial del Firebug: http://getfirebug.com/

Captura de pantalla de l'eina Firebug utilitzada per debugar el codi JavaScript

2. Web developer bar

La Web Developer bar és una altra eina pensada per a programadors web que, però, resulta tant o més útil en tasques d'anàlisis. Consisteix bàsicament en una barra d'eines que s'afegeix a les barres per defecte del Firefox i ofereix opcions tan variades com desactivar cookies, css, scripts, redireccions, modificar la mida de la pantalla, validar el codi, modificar-lo o posar de relleu informació normalment amagada com textos alternatius, estructura dels formularis o nivell dels encapçalaments.

Ús en accessibilitat: Gairebé totes les opcions que ofereix la Web developer bar són útils a l'hora de fer un anàlisi d'accessibilitat. Les eines de desactivació, per exemple, ens permeten analitzar el comportament de la pàgina en mitjans limitats. Les opcions de modificar la mida ens ajuden a veure com es visualitza la pàgina en diverses resolucions de pantalla. I les eines de ressaltar informació serveixen per localitzar parts del codi que normalment no es mostren i que són d'especial rellevància per l'accessibilitat com els textos de les imatges o l'estructura de la pàgina.

Captura de pantalla de la Web Developer Bar mostrant les opcions de manipulació de CSS

3. Accessibility Toolbar

L'Accessibility Toolbar, desenvolupada per l'Illinois Center for Information Technology and Web Accessibility, és una eina molt semblant a la Web Developer Bar en quant a opcions però diferent en quant a la forma en que presenta la informació. Si la Web Developer Bar ens resaltava les dades sobre la pròpia pàgina web l'Accessibility Toolbar ens mostra la informació agrupada en un pop-up on, a més, s'inclouen errors i recomanacions d'accessibilitat.

Ús en accessibilitat: L'ús de l'accessibility Toolbar serà, evidentment, molt semblant al de la Web Developer Bar. Molts cops pot resultar útil tenir la llista agrupada d'uns determinats elements que estem analitzant (com per exemple, les imatges de la pàgina o els encapçalaments) i, alhora, complementar-ho amb la mateixa informació sobreimpresa sobre el propi lloc web.

Captura de pantalla de l'eina Accessibility Toolbar mostrant la llista d'encapçalaments de la pàgina del navegador Mozilla

4. Juicy Studio Accessibility Tool

Com el seu nom indica, la Juicy Studio Accessibility Tool sí que és una eina desenvolupada específicament per l'anàlisi de l'accessibilitat web. Ofereix opcions d'anàlisis ARIA, de taules de dades i, especialment, de contrastos de color. Aquesta última opció és la més destacada ja que permet crear un informe complert de totes les seccions de la pàgina, detectant els colors de primer pla i de fons i analitzant la seva validesa en diversos estàndards, entre els quals, les normes WCAG.

Ús en accessibilitat: La Juicy studio accessibility tool és una eina molt útil a l'hora de detectar errors en els contrastos de color però cal anar-hi en compte. Per una banda, en no analitzar les imatges de fons (inserides per CSS) pot donar per bons apartats que no ho son. Per altra banda, en no comprovar si hi ha text en la secció, ens pot donar avisos d'error en zones on no hi ha cap paràgraf.

Captura de pantalla de l'eina Juicy Studio Accessibility Tool on es mostren els contrastos de diferents parts d'una pàgina web

5. NoSquint

Aquesta eina és, probablement, la més desconeguda de les cinc i, alhora, la que menys funcionalitat aporta. Però, a força d'utilitzar-la, es converteix en imprescindible per la seva simplicitat i rapidesa a l'hora de realitzar una sola tasca: canviar la mida del text. Apart també permet canviar els colors per defecte dels textos i els enllaços per una pàgina en concret o per a totes.

Ús en accessibilitat: Les WCAG marquen com a requisit que els textos siguin ampliables fins a un 200% sense que la pàgina perdi la seva estructura i funcionalitat. És important destacar que aquesta ampliació ha de ser de només text i no de text i imatges conjuntament. Gràcies a NoSquint, aquesta comprovació està a només 2 clicks.

Pàgina oficial de NoSquint: https://urandom.ca/nosquint/

Captura de pantalla de l'eina NoSquint on es permet configurar les mides i colors dels textos