Pautas de accesibilidad para adaptar las páginas web a personas ciegas o con baja visión

El acceso al contenido digital en los sitios web dependerá de las necesidades y características propias de los usuarios. Existen diferentes mecanismos de entrada, como teclado, voz, lector de pantalla, conmutadores, …

En el caso de los usuarios con diversidad funcional de tipo visual, necesitarán de un lector de pantalla para poder acceder a los contenidos de un sitio web. El lector de pantalla es un software que ‘traduce’ a  voz todos los textos y elementos que aparecen en una pantalla de un dispositivo, tal como un ordenador o móvil.

Buenas prácticas de accesibilidad web

Con objeto de mejorar la accesibilidad web a los contenidos existen una serie de buenas prácticas que podemos seguir:

Atributo “lang”

Definir el idioma principal y de las partes con el atributo “lang”. Gracias a este atributo el lector de pantalla podrá interpretar los textos de una página web con la pronunciación y entonación propia del idioma indicado.

Etiquetas HTML5 y roles de la WAI-ARIA

Estructurar el contenido mediante las etiquetas semánticas de HTML5 o roles de la WAI-ARIA. Se recomienda incluir todo el contenido de una página dentro de las diferentes etiquetas semánticas de HTML5 o roles de la WAI-ARIA. De esta forma, los usuarios de tecnologías de apoyo como el lector de pantalla pueden utilizar los puntos de referencia (landmarks) para navegar por la página siguiendo su estructura.

Encabezados

Empleo de encabezados por cada sección del sitio web. Al igual que los puntos de referencia, permiten al usuario del lector de pantalla navegar rápidamente por bloques saltando contenido sin tener que leer toda la página para conocer su estructura.

Incluir descripciones precisas en todos los elementos

Descripciones precisas en las imágenes, enlaces, botones y elementos de formulario. Se debe tener en cuenta que cada elemento que se añada en una página debe tener una descripción asociada e indicar su tipo. Se deben evitar las descripciones que no indiquen la funcionalidad o finalidad del elemento. Por ejemplo, si un usuario invidente lista los enlaces de una página mediante los atajos de teclado del lector de pantalla, podrá seleccionar directamente un enlace determinado. Si todos los enlaces tienen como descripción “Más información”, el usuario del lector de pantalla no sabrá cual es la página de destino de cada enlace.

Todos los elementos de interacción operables

Acceso por Todos los elementos de interacción deben ser operables tanto con ratón como con teclado.

Regla de oro en accesibilidad web: ojo con el orden de la lectura y tabulación

Orden de lectura y tabulación La alteración del orden de lectura y tabulación puede afectar significativamente a la compresión del contenido de una página. Una buena práctica que llevar a cabo es hacer coincidir el orden de DOM con el orden visual de la página.

Incluye tablas simples para asegurar la accesibilidad web

Inclusión de tablas simples. Las tablas complejas con múltiples encabezados o celdas de datos combinadas dificultan su interpretación con un lector de pantalla. Si una tabla es muy compleja se recomienda dividirla en tablas más simples sin celdas combinadas. Cada tabla debe tener su propio título en la etiqueta <caption> y especificar si una celda es un encabezado de columna o fila mediante el atributo “scope”. Con ello facilitamos la identificación y orden de lectura de cada tabla.

Atributos WAI-ARIA

Uso de atributos de la WAI-ARIA Cuando hablamos de diseño de experiencia de usuario dirigido a la accesibilidad web necesario informar al usuario de todos los cambios que se produzcan en la página. Para ello, nos podemos ayudar de los atributos de la WAI-ARIA. Por ejemplo, una notificación del cambio de estado de una tarea de forma dinámica sin la intervención del usuario. Estos cambios suelen evidentes visualmente, pero pasar por desapercibidos para los usuarios de tecnologías de apoyo.

Delia Castaño
Consultora Accesibilidad MTP

Ver más historias