Accesibilidad web: alcanza a más usuarios en la red

La accesibilidad en Internet garantiza que los usuarios con limitaciones y necesidadesdiferentes puedan navegar por la red de forma ilimitada y sin ayuda externa. El objetivo del diseño web accesible es, en consecuencia, evitar la exclusión de determinados grupos de personas, como pueden ser los discapacitados físicos y mentales. Para ello, las páginas web accesibles deben atenerse tanto a las directivas europeas como a las nacionales. Un factor nada desdeñable para las empresas es el hecho de que las páginas que destacan por su accesibilidad web obtienen una amplia clientela, pues están disponibles para más personas que las páginas que carecen de ella. Además, tener un diseño web accesible también mejora el ranking de las páginas web en los buscadores.

Generalmente, las barreras son obstáculos que nos impiden progresar, pues dificultan la participación. No obstante, siguen encontrándose en la red, instaladas a menudo sin ser consciente de ello. A día de hoy, siguen existiendo limitaciones para las personas con discapacidad en el sector servicios, por ejemplo, con respecto a la atención al cliente o a los terminales de servicio, muy poco accesibles para las personas con movilidad reducida. Asimismo, las páginas web que requieren captchas de verificación con símbolos e imágenes dificultan a las personas con discapacidad visual la posibilidad de poder descifrarlas.

Al informar de tales dificultades, hasta ahora muchos gestores de páginas web habían mostrado su desconocimiento, y en realidad uno de los conceptos principales de Tim Berners-Lee, fundador de la World Wide Web (W3), era que las páginas web debían ser accesibles para el mayor número de usuarios posible. Así, la primera página web que se publicó estaba diseñada de manera relativamente sencilla y formulaba el objetivo del proyecto W3 como sigue:

• La empresa muestra responsabilidad social (corporate social responsibility), lo que puede ser positivo para el uso de medidas de relaciones públicas.
• Se reduce el riesgo de que la imagen se dañe por la discriminación.
• Se influye de manera positiva en la optimización en buscadores y en la usabilidad de la página web.
• Aumenta el número de usuarios potenciales y, a su vez, también se incrementa la cuota de mercado y los beneficios.
• La empresa refuerza la participación de trabajadores con discapacidad.

Estas son solo algunas de las ventajas de la inclusión digital. Si quieres conocer más sobre los aspectos positivos de lo que es la accesibilidad web, lee el artículo “Developing a Web Accessibility Business Case for Your Organization” (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). No obstante, si quieres obtener más información sobre las directrices generales sobre la accesibilidad web en la Red, lee el artículo de la Digital Guide sobre WCAG.

La participación ilimitada en Internet es normal para muchos, pero hay algunos grupos de personas que no pueden utilizar ciertas páginas web debido a motivos muy diversos. El W3C ha establecido cinco factores significativos para permitir que los usuarios puedan acceder a Internet de modo ilimitado. Las palabras clave son percepción, comprensión, navegación, interacción y aportación.

Muchas páginas web albergan anuncios intermitentes, el texto de las columnas de comentarios tiene la letra pequeña y a veces se puede incluso escuchar música de fondo que no hace más que resaltar el carácter o tema de la página. Dependiendo del tipo y el grado de la restricción, algunos visitantes no pueden percibir completamente o incluso en absoluto dichos elementos. Las personas ciegas, por ejemplo, navegan por Internet sin ningún estímulo visual. En su lugar, es un lector de pantalla el que lee la página web, dispositivo que transmite los datos legibles a la llamada tecnología de apoyo. Con una línea braille, por ejemplo, se puede convertir el texto al sistema de lectura para invidentes, de modo que la persona en cuestión pueda percibir los elementos de la página web a través del tacto. Una herramienta de texto a voz, por su parte, devuelve los contenidos en formato de audio, es decir, los usuarios recurren al oído para procesar los contenidos web con este tipo de tecnología. En el ejemplo que acabamos de ofrecer, por tanto, la música de fondo supondría una molestia.

Las personas con una discapacidad visual reducida como, por ejemplo, las personas mayores, captan el contenido de las páginas web con la vista, pero necesitan imágenes bastante más grandes. Por otro lado, las personas con discromatopsia no reconocen los avisos marcados únicamente en color y las personas sordas no pueden percibir la información de los archivos de audio y de un gran número de archivos de vídeo.

Los usuarios muy jóvenes, las personas mayores o las que tienen discapacidad cognitiva tienen dificultades para comprender textos con términos modernos o abreviaturas no explicadas. Además, si los contenidos web que pertenecen a un mismo grupo temático se representan muy alejados, muchas personas también tienen dificultades para relacionarlos.

Dado que cada vez hay más personas que visitan páginas web con el smartphone, si estas no están optimizadas para este dispositivo, resulta muy molesto no poder seleccionar los enlaces con precisión. Por ejemplo, para personas con manos temblorosas es muy poco práctico que los enlaces se encuentren uno al lado del otro con un tamaño de letra muy pequeño. Para aquellos con discapacidad física se han desarrollado numerosas herramientas que facilitan el manejo del ordenador, bien fijándose para ello en los movimientos oculares o recurriendo al teclado. Básicamente, toda página web debe estar diseñada de manera que pueda ser evaluada por las tecnologías de apoyo pertinentes: si tu página web no es navegable, los clientes potenciales que la visiten no podrán acceder a todo lo que ofrece.

Si los usuarios tienen que rellenar un formulario, como para suscribirse a la newsletter, lo habitual es que se produzcan errores, como que la contraseña sea muy corta o la fecha de nacimiento no encaje en los parámetros indicados. Por ello, es importante formular instrucciones claras sobre cómo solucionar estos problemas. La interacción con las páginas web también comprende su navegación, pues los usuarios que emplean dispositivos con una pantalla pequeña o trabajan con un gran aumento de pantalla necesitan para ello unas rutas de navegación adaptadas y una estructura web clara.

Los campos para comentarios propician el feedback de los usuarios, pues a través de ellos pueden dar su opinión sobre un producto, anunciar contenidos o intercambiar impresiones con otros usuarios. Aquellos con discapacidad visual utilizan una lupa de lectura para escribir en el monitor, herramienta que permite ver los elementos mucho más grandes y aumenta el espacio entre la columna de lectura y el campo de entrada. Por ello, colocar los elementos ópticamente cerca los unos de los otros facilita la interacción a los usuarios.

Los formularios permiten obtener el feedback o recibir pedidos de los clientes. En ocasiones integran correctores ortográficos que muestran las palabras mal escritas en rojo. Sin embargo, aquellos que tienen discromatopsia no distinguen el texto coloreado del resto, por lo que es conveniente optar por otro tipo de señalización (por ejemplo, el subrayado).

Si evitas las barreras de Internet, podrás mejorar la usabilidad de tu página web y también tu posicionamiento en Google. Optar por un diseño web accesible merece la pena, además, desde un punto de vista económico y solo requiere un pequeño esfuerzo adicional. A este respecto, W3C recomienda diferentes herramientas para comprobar la accesibilidad web. Sin embargo, solo testadores humanos experimentados que evalúan las páginas web completamente pueden conceder las calificaciones de W3C. Para ello revisan toda la web en su conjunto y otorgan diferentes niveles de accesibilidad: desde A (“accesibilidad reducida”) hasta AAA (“accesibilidad elevada”).

Es recomendable que las páginas web tengan una estructura clara y utilicen un lenguaje sencillo, pues así pueden atraer a más lectores y se mejora simultáneamente el ranking de Google (los buscadores también evalúan la legibilidad de los textos). Si quieres seguir proporcionando un buen SEO y crear una estructura web comprensible y clara, presta atención a los siguientes aspectos:

• Nombres claros para URL y contenidos: la orientación y el tema fundamental de la página web deben ser fácilmente reconocibles en cada subpágina.
• Estructura comprensible: los usuarios siempre deben saber dónde se encuentran.
• Jerarquías planas: puede accederse a los contenidos con pocos clics.
• Separación entre diseño y contenido: utiliza CSS para su elaboración.
• Categorías con una estructura amigable: para los usuarios, las subpáginas están vinculadas a las páginas superiores de una manera semánticamente comprensible.
• Presentación adecuada de todos los contenidos.
• Lenguaje sencillo: los enunciados se entienden con facilidad o se explican detalladamente.
• Las secciones importantes de la página web como Contacto, Aviso legal, Búsqueda o Página principal son accesibles con un solo clic desde cualquier subpágina.
• Los elementos de navegación son claramente perceptibles y tienen la misma estructura en todas las páginas.
• Las páginas de mayor envergadura ofrecen un sitemap y un apartado de FAQ para las preguntas más frecuentes.
• Las letras escalables, los colores y un diseño adaptable facilitan la representación en diversos dispositivos y navegadores. En el mejor de los casos son compatibles con tecnologías asistenciales.
• La página web se maneja con ratón y teclado.
• Textos alternativos para las imágenes: estos son importantes, pues los lectores de pantalla y los robots de búsqueda solo comprenden contenidos textuales.

Las personas que sufren de ataques epilépticos se ven amenazadas cuando una página web alberga gráficos o vídeos que se reproducen más de tres veces en un segundo. En estos casos, los científicos han determinado que hay algunos patrones de diseño que pueden provocar episodios de epilepsia fotosintética.

Es recomendable dotar de accesibilidad a las páginas web. Ya sea para la optimización en los buscadores, con propósitos de relaciones públicas o para presentar nuevas ofertas de ventas, es conveniente subir nuevos contenidos a diario, así como facilitar el acceso a los visitantes adaptando la información a sus necesidades. Una parte esencial de las páginas web accesibles y sin barreras que también resulta importante para SEO es el hecho de acompañar las imágenes de un texto alternativo. Ni los crawlers ni los lectores de pantalla para personas invidentes pueden evaluar los contenidos de las imágenes, de ahí que el texto alternativo sea de ayuda al informar sobre el contenido de la imagen. Los visitantes con una conexión deficiente a Internet también se benefician de estas descripciones, ya que puede que en ocasiones las imágenes no se carguen en absoluto o lo hagan de forma muy lenta.

Una tarea mayor es la creación continua e inmediata de transcripciones y subtítulos, métodos de ayuda con los que puede elaborarse información en forma de contenido de audio para sordos. La transcripción, que reproduce la lengua hablada, los sonidos y los ruidos en forma de texto, debe colocarse lo más cerca posible del contenido de audio correspondiente (p. ej., con un botón que enlace al documento). Los subtítulos, por su parte, hacen que las personas sordas comprendan con más facilidad los vídeos y que los usuarios que no quieran utilizar la reproducción de sonidos puedan captar el contenido sin verse perturbados por el ruido. Aquellos con deficiencias cognitivas o trastornos del comportamiento como TDAH (trastorno por déficit de atención e hiperactividad) asimilan mejor, al igual que las personas con discapacidad auditiva, la información transmitida con los vídeos si tienen la posibilidad de eliminar los ruidos de fondocon ayuda de la configuración del reproductor de vídeo.

Las personas con menos de un 30 % de visión son discapacitadas visualmente y son consideradas invidentes si su visión es inferior al 2 %, ya que no son capaces de percibir los estímulos visuales. Para poder entender el contenido de los vídeos necesitan pistas sonoras adicionales, que sirven para explicar los componentes visuales como lugares, paisajes y personas y describen brevemente las acciones visibles. Coloca dichas explicaciones en las pausas de conversación y de sonido de la grabación de audio original para que las pistas de audio no se solapen.

El siguiente vídeo muestra una breve introducción sobre el tema de las explicaciones en voz alta y cómo se insertan en los vídeos. Los closed captions o subtítulos son, así, un ejemplo de preparación de contenido para personas con discapacidad auditiva.

El lenguaje sencillo expresa los contenidos fácilmente y ayuda a las personas con discapacidad cognitiva a comprender mejor los temas complejos. Se han de evitar, por ejemplo, los tiempos verbales complicados, los sinónimos y las negaciones. Las frases han de ser cortas y contener solo una afirmación en su contenido. El portal Discapnet es una iniciativa cofinanciada por la ONCE e ILUNION Tecnología y Accesibilidad que trata el tema de la accesibilidad de la comunicación y que fomenta la lectura fácil para las personas con discapacidad cognitiva o intelectual, abogando por el uso de frases cortas, la inclusión de imágenes o pictogramas o por evitar el uso abundante de cifras o metáforas, entre otros.

Las personas con limitaciones cognitivas tienen el mismo derecho a la información que el resto, por lo que hoy en día hay periódicos que publican versiones de sus artículos en lenguaje sencillo para fomentar la lectura. Asimismo, en 1998 se redactó un documento llamado El camino más fácil, que recoge una serie de directrices europeas para generar información de fácil lectura.

Una forma menos estricta es el llamado lenguaje simple, que se corresponde con los niveles lingüísticos A2 o B1 del marco común europeo de referencia para las lenguas (MCER).

Los lectores de pantalla y otras tecnologías asistenciales hacen posible la accesibilidad web para muchos. Los programas procesan los documentos web de izquierda a derecha y de arriba hacia abajo y trabajan de forma lineal, por lo que siguiendo estas reglas básicas ayudarás a los usuarios a navegar por tu página web de manera efectiva.

Los conjuntos de marcos (framesets) son una herramienta muy popular entre los diseñadores web. Sin embargo, la ausencia de contenido relevante en los documentos de los framesets supone un problema: los crawlers inspeccionan la que para ellos es una página de inicio sin contenido y la relegan en consecuencia a los últimos puestos del ranking de buscadores. Por otro lado, los lectores de pantalla más antiguos tampoco podían reconocer los frames, pues solo eran compatibles con los exploradores de texto, que solo mostraban el nombre de los marcos. Los nuevos lectores de pantalla, sin embargo, pueden utilizarse con casi todos los navegadores.

Los lectores de pantalla envían la información textual al software de salida de voz y a líneas braille. Para ello, leen la página web de arriba hacia abajo teniendo también en cuenta elementos recurrentes como la barra de navegación, los iconos o los enlaces a subpáginas. Para que los lectores no tengan que repetir esta información para cada página que se abra, deben insertarse enlaces de saltar navegación (skip navigation links). Los usuarios que solo navegan con el teclado, posiblemente con una boquilla, encuentran muchos problemas cuando tienen que clicar en diversos elementos, por lo que es beneficioso colocar enlaces de saltar navegación al principio de la página de la manera más visible posible:

Algunos skip links que no son visibles en el diseño permiten que el lector de pantalla le transmita al usuario el mensaje del texto alternativo “Saltar navegación” si el código tiene el siguiente aspecto:

Es importante que los skip links aparezcan lo más adelante posible en el código. El texto ancla debe ir al principio del contenido principal:

No obstante, es recomendable utilizar los skip links con moderación, pues de no ser así puede crearse un efecto negativo que haga que los usuarios tengan que clicar en muchos elementos. Una solución más elegante es recurrir a landmarks (puntos de referencia) ARIA y a una buena estructuración del documento. WebAIM recomienda utilizar elementos HTML5. Los navegadores actuales soportan este método, aunque no totalmente, por lo que otro elemento de ayuda es colocar un índice enlazado al principio del documento que envía al usuario a los apartados correspondientes. Los lectores de pantalla modernos leen los títulos correspondientes en voz alta, de modo que los encabezados informativos y bien estructurados permiten aumentar la legibilidad tanto para los buscadores como para las tecnologías asistenciales.

Para crear sitios web accesibles según las directrices de W3C, es recomendable recurrir solo a tablas de datos. Con este formato, los lectores de pantalla encuentran menos problemas a la hora de reproducir la información de forma significativa tras la conversión. Las tablas de diseño, por el contrario, otorgan a la página una estructura visual, pero dificultan que los lectores de pantalla presenten el contenido de manera comprensible. Este tipo de diseño web sigue siendo muy popular, aunque no es estrictamente necesario con las versiones más actuales de Netscape.

W3C ofrece algunos consejos de accesibilidad web, pero en otros casos se definen tablas de diseño con elementos sencillos como TABLE, TR y TD (tabla, fila y celda). Si se utilizan elementos estructuradores para crear enlaces de celda lógicos, el lector de pantalla puede leer la tabla de diseño como tabla de datos. Esto se contrarresta directamente al eliminar determinados elementos de tabla del árbol de accesibilidad. Para que tu página web tenga un diseño web accesible, utiliza el código role="none", válido tanto para la tabla como para sus elementos. Si insertas tablas en otras tablas, es necesario que definas ambos elementos.

Ejemplo:

Así aparecerá en la interfaz: