Herramientas para mejorar la accesibilidad (I): Los 5 mejores complementos de Firefox

Controlar la accesibilidad de una página web es tarea que requiere conocimientos específicos: nociones de programación web (HTML, CSS, JavaScript...) y conocimiento exhaustivo de las normas WCAG. Hay sin embargo un gran número de herramientas que, sin llegar a convertirla en una tarea automatizada, nos pueden ayudar a hacerla más sencilla guiándonos y presentándonos de forma rápida la información necesaria. En este primer post repasaremos unas cuantas de las herramientas más útiles y fáciles de utilizar: los complementos de Firefox.

1. Firebug

Probablemente Firebug sea el complemento que más programadores web tienen instalado. Consiste en una serie de herramientas que permiten explorar el código de una página web, modificarlo "en caliente", ver las propiedades CSS de cada elemento, inspeccionar el árbol DOM, hacer debug del código JavaScript, ver los tiempos de carga de cada elemento y mil y una funcionalidades más. En definitiva, es una herramienta imprescindible para analizar las características del código de forma rápida y eficiente.

Uso en accesibilidad: Si bien Firebug es una herramienta destinada a los creadoras de páginas, también resulta muy útil a la hora de realizar análisis web. Básicamente lo utilizaremos para ver de forma rápida las propiedades CSS de los elementos HTML que estamos analizando y localizar rápidamente partes del código gracias a la funcionalidad de buscador.

Página oficial de Firebug: http://getfirebug.com/

Captura de pantalla de la herramienta Firebug utilizada para debugar el código JavaScript

2. Web developer bar

La Web Developer bar es otra herramienta pensada para programadores web que, sin embargo, resulta tanto o más útil en tareas de análisis. Consiste básicamente en una barra de herramientas que se añade a las barras por defecto de Firefox y ofrece opciones tan variadas como desactivar cookies, css, scripts, redirecciones, modificar el tamaño de la pantalla, validar el código, modificarlo o poner de relieve información normalmente escondida como textos alternativos, estructura de los formularios o nivel de los encabezados.

Uso en accesibilidad: Casi todas las opciones que ofrece la Web developer bar son útiles a la hora de realizar un análisis de accesibilidad. Las herramientas de desactivación, por ejemplo, nos permiten analizar el comportamiento de la página en medios limitados. Las opciones de modificar el tamaño nos ayudan a ver cómo se visualiza la página en varias resoluciones de pantalla. Y las herramientas de resaltar información sirven para localizar partes del código que normalmente no se muestran y que son de especial relevancia por su accesibilidad como los textos de las imágenes o la estructura de la página.

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

3. Accessibility Toolbar

La Accessibility Toolbar, desarrollada por Illinois Center for Information Technology and Web Accessibility, es una herramienta muy similar a la Web Developer Bar en cuanto a opciones pero diferente en cuanto a la forma en que presenta la información. Si la Web Developer Bar nos resaltaba los datos sobre la propia página web, Accessibility Toolbar nos muestra la información agrupada en un pop-up donde, además, se incluyen errores y recomendaciones de accesibilidad.

Uso en accesibilidad: El uso del accessibility Toolbar será, evidentemente, muy similar al de la Web Developer Bar. Muchas veces puede resultar útil tener la lista agrupada de determinados elementos que estamos analizando (como por ejemplo, las imágenes de la página o los encabezados) y, al mismo tiempo, complementarlo con la misma información sobreimpresa sobre el propio sitio web.

Captura de pantalla de la herramienta Accessibility Toolbar mostrando la lista de encabezados de la página del navegador Mozilla

4. Juicy Studio Accessibility Tool

Como su nombre indica, Juicy Studio Accessibility Tool sí que es una herramienta desarrollada específicamente para el análisis de la accesibilidad web. Ofrece opciones de análisis ARIA, de tablas de datos y, especialmente, de contrastes de color. Esta última opción es la más destacada puesto que permite crear un informe completo de todas las secciones de la página, detectando los colores de primer plano y de fondo y analizando su validez en varios estándares, entre ellos, las normas WCAG.

Uso en accesibilidad: La Juicy studio accessibility tool es una herramienta muy útil a la hora de detectar errores en los contrastes de color pero hay que tener cuidado. Por un lado, al no analizar las imágenes de fondo (insertadas por CSS) puede dar por buenos apartados que no lo son. Por otro lado, al no comprobar si existe texto en la sección, puede darnos avisos de error en zonas donde no hay ningún párrafo.

Captura de pantalla de la herramienta Juicy Studio Accessibility Tool donde se muestran los contrastes de distintas partes de una página web

5. NoSquint

Esta herramienta es probablemente la más desconocida de las cinco y, a la vez, la que menos funcionalidad aporta. Pero, a base de utilizarla, se convierte en imprescindible por su simplicidad y rapidez a la hora de realizar una sola tarea: cambiar el tamaño del texto. Aparte también permite cambiar los colores por defecto de los textos y los enlaces por una página concreta o para todas.

Uso en accesibilidad: Las WCAG marcan como requisito que los textos sean ampliables hasta en un 200% sin que la página pierda su estructura y funcionalidad. Es importante destacar que esta ampliación debe ser de sólo texto y no de texto e imágenes conjuntamente. Gracias a NoSquint, esta comprobación está a sólo 2 clics.

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