Los 5 elementos más difíciles de hacer accesibles en una web

Hoy queremos centrarnos en cinco elementos que suelen dar muchos problemas a los desarrolladores a la hora de hacer accesible una página web.

Bien sabemos que la accesibilidad web implica eliminar el máximo posible de barreras que pueden existir en una página web. En otros artículos, ya hemos hablado de cómo hacer accesible un sitio web y de cuáles son las pautas, normativas y estándares que se deben cumplir para ello.

Pero, ¿qué sucede con esas funcionalidades que suelen ser complejas y que por lo general suelen dar problemas cuando intentas dotarlas de accesibilidad?

¡En inSuit lo tenemos en cuenta! Por ello, hemos recopilado un grupo de funcionalidades muy complejas de hacer accesible con la finalidad de especificar qué hacer en estos casos.

Las 5 funcionalidades más complejas a la hora de hacer accesible tu web

Nos referimos al CAPTCHA, los formularios, los sliders (o carruseles), las tablas y los documentos PDFs. Elementos que a menudo nos encontramos en la web y que pocas veces cuentan con accesibilidad, o que en los mejores casos, la tienen mal adaptada.

A continuación, encontrarás una lista de elementos y pautas con la que podrás aplicar acciones que se traduzcan en mayor la accesibilidad web posible.

CAPTCHAS

Lo primero que debes tener en cuenta, es que un CAPTCHA es una prueba, a nivel informático, que busca responder si el usuario es humano o no. Con la finalidad de dar acceso a la interacción dentro de las páginas o aplicaciones web.

Por ejemplo: darse de alta, ingresos a plataformas, compras online, comentarios, etc.

La principal barrera que existe con estos elementos es que la misma naturaleza de la tarea interactiva excluye a muchas personas con discapacidades.

Lo que resulta en una denegación de servicio a estos usuarios, haciendo que no puedan interactuar con la funcionalidad.

Muchos CAPTCHA populares ya no son efectivos o seguros, por eso nuestra recomendación es que puedas seguir la guía W3C, en la cual se proponen distintas acciones que encuentran soluciones desde las máquinas y no implican a los usuarios.

Formularios

Si necesitamos que nuestros usuarios se pongan en contacto con nosotros o requerimos de sus datos para posteriores acciones, es importante que el proceso de recopilación de la información sea completamente accesible.

Para ello, lo más recomendable es que este elemento sea de fácil acceso a través del teclado. Entonces, ¿qué prácticas se deben poner en marcha para hacerlos accesibles? Dejamos una pequeña lista de sugerencias:

1. Asegúrate de que las etiquetas <label> estén situadas correctamente.
2. Los controles del formulario deben estar etiquetados de manera correcta indicando su función. Por ejemplo, para el botón que envía el formulario podríamos utilizar la etiqueta label: <label for=”Enviar”>, o asignar un nombre accesible con la etiqueta aria-label: <button aria-label=”Enviar”>.
3. Ser consecuente al informar de manera semántica la estructura que tienen los campos del formulario. Es importante definir de manera clara, sencilla y concreta la estructura y los campos de los formularios con la finalidad de que estos puedan ser realmente usables y accesibles.
4. Ser previsible. Tenemos que tener en cuenta que los controles siempre informan al sistema cuando se realiza alguna acción con ellos, pero no lanzan la acción de aviso al pulsar (clicar) en ellos, sino al soltar después de clicar (lo que se denomina evento ascendente).
5. Los campos obligatorios del formulario deben estar identificados correctamente.
6. Utilizar un control de errores en el formulario que identifique el campo erróneo, y en donde se pueda, que sugiera la forma de entrada correcta.

Y también, puedes complementar con información técnica haciendo clic en este enlace.

Sliders o carruseles

Estos elementos resultan ser bastante engorrosos, ya que hay que pararlos para que puedan contar con los controles que permitan poder manejarlos.

Se debe tomar siempre en cuenta que los elementos internos también deben ser accesibles. Obligándonos a no pasar por alto aspectos en el diseño, que en otros componentes son más fáciles de manejar, pero en este caso es complejo debido a que su naturaleza es de movimiento continuo.

¿Cómo podemos hacer accesible un carrusel? Compartimos una lista básica de cómo garantizar la accesibilidad web en los sliders o carruseles:

1. El carrusel debe estar contextualizado.
2. El usuario debe tener la opción de poder saltarlo.
3. El tiempo de duración de cada escena debe ser de mínimo tres segundos. Esto con la finalidad de garantizar el acceso a la información.
4. Los usuarios deben tener el control para poder parar y seguir con la finalidad de digerir la información de cada escena.
5. Se debe contar en todo momento con una opción de ir a la escena anterior o escena siguiente, de manera óptima.
6. El carrusel debe indicarle al usuario en qué número de escena o diapositiva está.

Con éstas y otras pautas técnicas podrás garantizar carruseles accesibles dentro de tu página web. Para mayor información técnica haz clic aquí.

Tablas

Es muy importante entender que las tablas deben ser utilizadas para tratar información que sea realmente tubular (es decir, tabla de datos).

Llegado a este punto, es necesario marcar correctamente, con la información adecuada, las celdas y encabezados para que así los usuarios puedan acceder desde las distintas ayudas técnicas.

Dejamos una lista que sirva como punto de control para hacer accesible cualquier tabla que se desee incluir en una web:

1. Se deben indicar los encabezados de filas y columnas.
2. Se debe utilizar un buen marcado para asociar celdas de datos y celdas de encabezado. Esto para que aquellas tablas que tienen dos o más niveles lógicos de encabezados, de filas y de columnas.
3. No se deben utilizar tablas para los diseños de las páginas web.
4. Se deben proporcionar resúmenes para las tablas, que pueden ser indicados con etiquetas <caption>.
5. Se deben proporcionar abreviaturas para las etiquetas de los encabezados.

Si deseas más información técnica al respecto puedes leer la pauta Web Accessibility Tutorials. Guidance on how to create websites that meet WCAG.

Documentos en PDF (Portable Document Format)

Debido a sus características, el Portable Document Format (PDF) es hoy en día el formato digital por preferencia para compartir información y documentación.

Su evolución se nota a través de sus distintas versiones, las cuales han incluido con el pasar del tiempo, etiquetas que son de vital importancia para la accesibilidad.

Ahora bien, ¿qué prácticas debo cumplir para hacer accesible un PDF?

• Siempre se debe indicar el idioma del documento; así como el idioma del contenido que esté dentro del PDF que no sea igual al del documento principal.
• Se debe tomar en cuenta el hecho de incluir el texto alternativo en las imágenes que se utilizan de apoyo gráfico.
• El documento debe estar etiquetado correctamente; destacar qué es un título, lista, tabla o cualquier otro elemento.
• Es importante que los lectores puedan conocer el orden de lectura interno. Por lo que debe ser revisado constantemente, ya que no siempre es igual a lo que visualmente se percibe.
• La paginación interna debe corresponder al índice.
• Los enlaces, abreviaturas y acrónimos deben contar con un texto alternativo en sus enlaces.
• El orden de tabulación debe ser coherente con todos aquellos elementos que interactúen.
• Asegurar que la seguridad implementada no interfiera con el acceso a la información por parte de distintas ayudas técnicas, como lectores de pantallas.

En realidad, para generar un documento PDF siempre se parte de un documento de otro tipo, como uno de Microsoft Word o de OpenOffice. Es en estos documentos donde se construye la accesibilidad utilizando adecuadamente las herramientas de formateo de contenido. Por ejemplo, si ponemos los títulos correctamente en un documento de Word, cuando lo convirtamos a PDF ya tendremos los encabezados correctos, e incluso las marcas del documento y su índice.

Y nunca, jamás, se debe imprimir un documento como PDF. Así solo conseguimos destruir toda la estructura interna generada por la herramienta de texto. Una vez creado el documento, siempre debemos exportar o guardarlo como PDF.

Con esta lista ya puedes comenzar a crear PDFs accesibles. Para mayor información técnica consulta en PDF Techniques for WCAG 2.0 – W3C.

Sigue nuestros consejos para hacer accesibles los CAPTCHAS, sliders, tablas, formularios y PDFs

En general, estos tips serán de gran ayuda para hacerle frente a los cinco elementos tratados en este artículo, que, por lo general, marcan su complejidad a la hora de hacer accesible estas funcionalidades en la web.

¿Quieres olvidarte de complicaciones y que tu web sea completamente accesible cumpliendo la normativa? Te lo ponemos fácil, nuestra Plataforma de Accesibilidad inSuit Tools® y nuestros servicios 360 están diseñados para hacer de la web un mundo sin barreras. No dudes en contactarnos si quieres dotar de accesibilidad a tu web o APP de la manera más sencilla posible. ¡Tenemos la solución a tus problemas!