Breve guía sobre accesibilidad web: ¡no pongas barreras a tu página!

“El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial”

Tim Berners-Lee, director del W3C e inventor de la World Wide Web

Según datos de la Organización Mundial de la Salud, más de 1.000 millones de personas (el 15% de la población mundial) viven con algún tipo de discapacidad. Un dato a tener muy en cuenta para facilitar el acceso  universal e igualitario a las nuevas tecnologías.

Conscientes de esta realidad,  el ‘padre’ de las tres W, Tim Berners-Lee,  creó en 1994 el World Wide Web Consortium (W3C),  un consorcio internacional e independiente destinado a definir los estándares web y de accesibilidad. En 1999, el  grupo de trabajo Web Accessibility Initiative (WAI)  de esta organización publicó  la primera versión  de sus pautas de accesibilidad Web, un documento que se ha convertido en un estándar aceptado a nivel global, y que en diciembre del 2008 presentó su  segunda revisión (WCAG 2.0)

Dichas pautas tienen  como objetivo guiar en el diseño de páginas para reducir las barreras de información a través de puntos de verificación, que detectan posibles errores en la accesibilidad  web a nivel visual, motriz, auditiva o cognitiva de las mismas.

Y es que una persona con discapacidad suele toparse con obstáculos variopintos que van desde el manejo de terminales y el acceso a los contenidos, hasta la propia interacción con los interfaces  de los dispositivos que desean utilizar.

Hasta aquí, mi pequeña introducción sobre accesibilidad TIC. Como  ‘amateur’ en este  tema, he preferido dejar la continuación de este posts en manos de expertos. Ellos son Ramón Corominas  y Félix Zapata,  fundador y co-organizador respectivamente de ‘Madrid Accesibilidad TICs’, un encuentro  en torno a la accesibilidad técnica y social,  que se reúnen de forma  mensual en Ciball.

Ramón Corominas

No recuerdo a qué edad aprendí a leer, pero aún me acuerdo de cuáles fueron mis primeras letras. Efectivamente: las cinco vocales. Ese AEIOU fue lo que me permitió por primera vez el acceso a un nuevo mundo de conocimientos. Así que cuando la gente empieza a dar sus priemros pasos en la accesibilidad, me gusta usar también esas letras para ilustrar los cinco conceptos que considero imprescindible conocer:

  • A – Alternativas. Los visitantes de tu sitio pueden tener capacidades muy diversas; puede que sean ciegos, o sordos, o que tengan problemas motrices, o que tengan dificultades para comprender la información. Para que todo el mundo pueda acceder a la información, es importante proporcionar alternativas que se puedan adaptar a los distintos perfiles. Por ejemplo, si damos información con imágenes, un ciego no podrá verlas, pero sí podemos añadir una descripción a la imagen que dé información equivalente y que el ciego pueda leer con un programa de síntesis de voz; igualmente, en un vídeo podemos incluir subtítulos o incluso lengua de signos para las personas sordas, o podemos añadir ilustraciones o iconos que faciliten la comprensión de un texto.
  • E – Estructura. Una buena estructura del código permite a los usuarios con necesidades especiales navegar de manera más eficiente por los contenidos. Al igual que una persona con visión no lee todo el contenido de la página, sino que escanea y dirige su mirada directamente a lo que le interesa, una persona ciega puede usar esa estructura para navegar descartando contenidos que no le interesan, o localizando directamente los que sí quiere leer. Esa estructura también ayuda a que los programas de reconocimiento de voz hagan mejor su trabajo, o a que una persona con dislexia pueda comprender mejor cómo está organizada la información en una página. Y, por si eso fuera poco, ¡nos ayudará a subir posiciones en los resultados de los buscadores! ;)
  • I – Identificación. Si no sabes a dónde te va a llevar un enlace, pulsar en él se convierte en una aventura. Esto es lo que un usuario ciego puede experimentar cuando pulsa en un enlace que sólo dice “pulsa aquí”, “más información” o “leer más”, porque muchas veces este usuario navegará usando el tabulador o a través de un listado donde se pierde el contexto que rodea al enlace. Un ligero cambio de redacción puede eliminar la mayoría de esos enlaces, pero también es posible incluir texto adicional oculto a la vista que sí será leído por las personas que lo necesitan.
  • O – Operabilidad. Distintas personas acceden a Internet usando muy diversos medios, desde el tipo de ordenador o dispositivo móvil al sistema operativo o el navegador; también puede variar el dispositivo de entrada usado para navegar, que puede ser un ratón, un teclado, una pantalla táctil, o incluso otros sistemas menos habituales como un reconocedor de voz, pulsadores, interfaces cerebro-ordenador, etc. Para poder operar con los distintos elementos de una página, debemos asegurarnos de que no hay una dependencia absoluta de un dispositivo concreto. Por ejemplo, si un menú sólo se despliega al pasar el ratón por encima, los usuarios de teclado o de pantalla táctil no podrán acceder a las opciones. También es importante evitar los saltos a otra página o las recargas automáticas, dejando que sea el usuario el que inicie conscientemente este tipo de acciones. Por último, evita el contenido que se mueve en pantalla (banners, carruseles…), o permite al usaurio pararlo, porque no todo el mundo puede leer o moverse a la misma velocidad.
  • U – Uso del color. No todo el mundo puede distinguir los colores de la misma manera, por lo que es importante evitar depender de ellos para ofrecer información. Por ejemplo, si sólo usamos el color rojo para marcar los campos obligatorios en un formulario, una persona daltónica puede no saber diferenciarlos de los demás, y evidentemente una persona ciega tampoco podrá; pero no se trata de evitar el uso del color, sino de evitar depender de él, así que podemos usar el famoso asterisco para indicar los campos obligatorios; eso sí, avisando antes en el texto de su significado :) . También hay que tener especial cuidado con los gráficos que muestran leyendas de color, y asegurar un buen contraste entre los colores de primer plano y de fondo en toda la página.

Por supuesto, los usuarios pueden encontrar otras muchas dificultades para navegar, pero con las cinco vocales ya tendrás cubierta una gran parte de las barreras más habituales para las personas con discapacidad.

Félix Zapata

Últimamente cuando me encargan algún tipo de información relacionada con la accesibilidad me gusta mucho enlazar estos dos videos en inglés subtitulado que encontré de la organización Access iQ.

  • Creating an accessible web. En esta introducción diferentes profesionales relacionados con la accesibilidad dan su visión de lo qué es, quién es responsable de la accesibilidad de un sitio, etc.,
  • A web without limits. En este video nos encontramos con casos reales de usuarios que nos exponen sus problemas existentes así como futuros debido a alguna enfermedad degenerativa.

No deja de ser sorprendente que aún siendo las primeras pautas de 1999 y las más recientes de 2008 exista aún cierto grado de desconocimiento y que se sigan cometiendo los mismos errores de una manera recurrente. Más teniendo en cuenta que hay una ley de obligado cumplimiento y que incluso existen sanciones que oscilan entre los trescientos y el millón de euros según el grado de errores ocasionados.

En España ha habido denuncias (Corporación RTVE, Banco Santander, Iberia, El Corte Inglés, etc.) pero que yo sepa no han llegado a ningún lado en comparación con otros casos más conocidos en el extranjero como el sitio de Target.com (multado con 6 millones de dólares) o Disney.

Hay que insistir en el hecho que la accesibilidad debe considerarse desde la primera toma de requisitos de un proyecto hasta el ciclo de vida tras la publicación que es cuando más problemas pueden ocasionarse. Es por ello que todo el mundo que participa en un proyecto debe estar involucrado: diseñadores de interfaz, diseñadores visuales, desarrrolladores, redactores, etc. De lo contrario la accesibilidad de nuestra página consistirá en un único sello o imagen que se quiera poner en el pie pero que esconderá detrás un verdadero problema.

Por si os interesa ampliar información sobre este tema,  os recomiendo visitar la web del INTECO,  que cuenta una sección dedicada a la accesibilidad web con manuales y guías de orientación a usuarios y programadores y, por supuesto, participar en cualquier sesión de Madrid Accesibilidad TICs!

P.D. Muchas gracias a Félix y a Ramón por sus consejos. Sin ellos no hubiese sido posible elaborar este post :)



Donostiarra, viajera, cinéfila y adicta a las series. Desde finales de 2011 gestiono la presencia online de un proyecto institucional madrileño. Inquieta, versátil y ávida por aprender, cada día compruebo que "lo verdadero es siempre sencillo, pero solemos llegar a ello por el camino más complicado"

3 comentarios en “Breve guía sobre accesibilidad web: ¡no pongas barreras a tu página!

  1. Hola Aroa:

    ¡Felicidades por el post!

    Cada vez paso más tiempo redactando contenidos / imágenes en la gente que tiene más dificultades para leerme con textos alternativos, y me doy cuenta que la gente lo valora.

    Saludos,

    Gorka

  2. Muchas gracias por tu opinión, Gorka. Espero que todos nos vayamos concienciando de hacer nuestros contenidos más accesibles. Un saludo!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>