Cómo «desvestir» una web (Accesibilidad).

La accesibilidad web es un estándar de la W3C que establece cómo debe ser una web para facilitar su acceso a personas con discapacidad.

Es un error muy común pensar que una web accesible es aquella que incluye iconos que permiten aumentar el tamaño de los contenidos de la web. Una página accesible debe cumplir una serie de requerimientos de carácter técnico que a simple vista no son sencillos de comprobar y mucho menos para alguien que no sea programador de páginas web.

El espíritu de la accesibilidad es la separación de los contenidos y el aspecto (programación de la web), de tal forma que sea fácil «desvestir» la página, esto es, quitarle la ropa y dejar únicamente los contenidos. La base de esta aproximación es que los es posible obtener fácilmente los contenidos de una web, éstos podrían ser puestos a disposición de las personas con discapacidad con mayor facilidad y mediante sistemas especializados (por ejemplo programas que lean el contenido).

Una web que no permite ser «desvestida» con facilidad no es una web accesible.

Con Mozilla Firefox desvestir una web es tan sencillo como seleccionar «No Style» en el menú View > Page Style. También podemos instalar la extensión Web Developer y desactivar los estilos desde el menú Herramientas > Web Developer > CSS > Disable styles > All styles o directamente mediante la combinación de teclas cmd+mays+s en Mac o ctrl+mays+s en Linux y Windows. Esta misma combinación nos permite volver a vestir la web y comprobar la diferencia.

Usando Safari para acceder a esta funcionalidad debemos primeramente activar el menú de Desarrollo (Safari > Preferencias > Avanzado > Mostrar el menú Desarrollo en la barra de menús) y desde este menú quitamos los estilos con «Desactivar estilos».

Con Chrome podemos conseguirlo instalando previamente la extensión Chrome Web Developer y desde «Disable > Disable Site CSS» podemos quitar los estilos de la página.

Una web que bien desvestida y que, por tanto, apunte a que implementa bien la accesibilidad debería:

• mostrar gran diferencia de aspecto cuando quitamos o ponemos los estilos
• no mostrar ningún estilo en cuanto a los tipos de letra, únicamente varios tamaños de letra en función del nivel del título, negritas o cursivas
• debe existir una lógica entre los tamaños de letra mostrados (un tamaño mayor debe indicar que es un título de mayor nivel)
• los enlaces deben mostrarse como texto subrayado
• no debe existir un layout en la página, esto es, el contenido debe fluir hacia abajo, no deben existir columnas y el texto debe estar alineado a la izquierda (la única excepción a que la información se muestre sin layout es cuando lo que se presenta es una tabla con muchos datos)
• sólo se deben mostrar las imágenes que formen parte del contenido, no las estructurales
• gran parte del contenido se debe mostrar como listados, esto es, precedidos de un bullet (por ejemplo las entradas del menú o del pie)

Os invito en este punto a que probéis con webs del sector, al igual que yo he probado con la web de Amnistía Internacional. Estoy convencido que al segundo o tercer intento dais con webs que no separan bien el contenido del aspecto gráfico, y por lo tanto, no son accesibles.