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

La accesibilidad en Internet garantiza que los usuarios con limitaciones y necesidades diferentes 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 las personas con discapacidad física o mental.

¿Qué es la accesibilidad en la Web?¶

Generalmente, las barreras son obstáculos que nos impiden progresar, pues dificultan la participación. Aunque en el mundo offline la concienciación acerca de las barreras cada vez es mayor, en la red no suele ocurrir lo mismo. Un ejemplo de ello son las páginas web que requieren captchas de verificación con símbolos e imágenes, pues dificultan a las personas con discapacidad visual la posibilidad de poder descifrarlas.

Un Internet sin barreras persigue que todos los grupos de personas puedan participar en igualdad de condiciones en los contenidos web. Es decir, todas las personas deben poder utilizar la Web por igual sin verse excluidas debido a alguna limitación. En el contexto de la inclusión digital, la accesibilidad web es un factor determinante que las empresas deben tener en cuenta. Por último, aunque no menos importante, hay que tener en cuenta que las páginas web accesibles también influyen de forma positiva en la optimización de los motores de búsqueda.

Qué características deben cumplir las páginas web accesibles¶

Probablemente las pautas WCAG del W3C para contenidos web accesibles constituyen la guía más importante a la hora de garantizar la accesibilidad web.

Dentro del marco de estas pautas, el W3C identifica cinco factores determinantes a la hora de promover un Internet accesible: percepción, comprensión, navegación, interacción y contribución. Todos ellos son ámbitos en los que se hace necesario reducir las barreras para las personas con discapacidad.

Percepció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.

Comprensión¶

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.

Interacción y navegación¶

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.

Aportación¶

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.

Accesibilidad en páginas web: ventajas para todos¶

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. Además, la accesibilidad de una página web supone también una ventaja para las empresas, que pueden llegar a una mayor base de clientes.

Cómo trabajar en la accesibilidad web de tu proyecto¶

Para conseguir una página web accesible debes echar un vistazo a la estructura de información, así como a los distintos componentes visuales de toda presencia web.

Estructura de la información clara¶

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.

Componentes visuales en una página web accesible¶

Ampliar el tamaño o cambiar el color de las fuentes ayuda a las personas con discapacidad visual o discromatopsia a la hora de reconocer mejor los contenidos web. Debe haber contraste de color entre el contenido y el fondo para que pueda leerse más fácilmente, por lo que es conveniente destacar los elementos interactivos mediante botones o resaltado de color. Por ejemplo, puede modificarse el color de un enlace cuando un usuario navega por él con el teclado, coloca el ratón sobre él o hace clic en él, pero, además de colores, es recomendable emplear otras señales como números o asteriscos para transmitir información.

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.

Información multicanal para la accesibilidad en Internet¶

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.

Transcripciones y subtítulos¶

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 fondo con ayuda de la configuración del reproductor de vídeo.

Lectura en voz alta¶

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.

Lenguaje sencillo¶

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. Discapnet es una iniciativa cofinanciada por la ONCE, el Fondo Social Europeo e ILUNION 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).

Tecnología de apoyo: haz tu página web compatible¶

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.

Enlaces de saltar navegación y otras abreviaturas¶

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:

<body><a href=“#content“>Saltar navegación</a>…<main id=“content“><h1>título principal</h1><p>primer párrafo</p>

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:

<a href="#content"><img src="https://www.ionos.es/digitalguide/empty.gif" height="15" border="0" alt="Saltar navegación" width="5"></a>

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:

<a name="content"></a>

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.

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.

Tablas de datos en lugar de tablas de diseño¶

Para crear páginas 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.

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.

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>

Texto de ejemplo <abbr title="por ejemplo">p. ej.,</abbr> sobre ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Así aparecerá en la interfaz:

Texto de ejemplo <abbr title="por ejemplo">p. ej.,</abbr> sobre ARIA.

Accesibilidad en páginas web: checklist con los puntos más importantes¶

Una vez has terminado de crear tu página web, echa un vistazo a la checklist que aparece a continuación para comprobar si has respetado los principales factores de accesibilidad:

• ✔ Información bien estructurada y comprensible
• ✔ Uso de un lenguaje sencillo y accesible
• ✔ Texto alternativo para imagen
• ✔ Transcripción de vídeo y audio
• ✔ Marcado de los contenidos importantes
• ✔ Contraste de color
• ✔ Soporte de lector de pantalla

Accesibilidad en páginas web con la web de W3C como ejemplo¶

La página web de W3C es un ejemplo claro de lo que constituye una presencia web accesible. Contiene los elementos destacados en sus pautas:

• Lenguaje sencillo
• HTML estructurado de forma clara
• Indicador de los elementos seleccionados
• Contraste de color
• Estructura clara y comprensible

Herramientas gratuitas para crear páginas web accesibles¶

Hay distintas herramientas con las que crear una página web accesible es más fácil. A continuación, se presentan dos de las más conocidas. Por su parte, W3C presenta una lista completa de herramientas en inglés.

• Accessibility Checker: con la ayuda de la aplicación web Accessibility Checker puedes comprobar gratis si tu página web cumple con las WCAG de países de habla inglesa.
• Siteimprove: el auditor de accesibilidad de Siteimprove comprueba la accesibilidad web de tu proyecto gratis y te hace llegar los resultados por correo.