Cómo hacer una web accesible a personas con discapacidad

Una página web accesible es aquella que se adapta a las necesidades especiales de las personas que tienen algún tipo de dificultad para ver, escuchar, moverse o comprender la información compleja. A la hora de desarrollar una web, lo ideal es tener la accesibilidad presente desde el inicio del proyecto para poder adaptarla mejor. Pero si tu web ya tiene un tiempo, también puedes hacerla más accesible con algunas herramientas y plugins que te mostramos a continuación.

El Estándar internacional WCAG

Existe un estándar internacional denominado WCAG que marca las Pautas de Accesibilidad para el Contenido Web. España es uno de los países que ha incluido el WCAG en su legislación, por lo que los sitios web de la Administración Pública y las grandes empresas están obligados a que sus contenidos en Internet sean accesibles.

Los documentos WCAG explican cómo hacer el contenido web más accesible para las personas con discapacidad. Por “contenido” web se hace referencia, generalmente, a la información que se puede encontrar en una página o aplicación web, que incluye:

• información natural como textos, imágenes y sonidos.
• código o marcado que define la estructura, la presentación, etc.

Cualquier desarrollador web puede consultar la «Guía Rápida de WCAG« donde explica cómo hacer una web accesible.

Como afirma Rafa R. Jonilla, el WCAG consiste en 14 pautas y tienen una serie de puntos de verificación que ayudan a detectar posibles errores. Cada punto de verificación esta asignado a uno de los tres niveles de prioridad establecidos por las pautas:

• Prioridad 1: Son los puntos que un desarrollador Web debe cumplir ya que, si no, ciertos grupos de usuarios no podrían acceder a la información del sitio web.
• Prioridad 2: Son los puntos que un desarrollador Web debe cumplir porque sino sería muy difícil acceder a la información para ciertos grupos de usuarios.
• Prioridad 3: Son los puntos que un desarrollador Web debería cumplir, ya que, de no hacerlo, algunos usuarios presentarían ciertas dificultades para acceder a la información.

En función a los puntos de prioridad se establecen unos niveles de conformidad:

• Nivel de Conformidad «A»: Todos los puntos de verificación de la prioridad 1 se cumplen.
• Nivel de Conformidad «AA»: Todos los puntos de verificación de la prioridad 1 y 2 se cumplen.
• Nivel de Conformidad «AAA»: Todos los puntos de verificación de todas las prioridades se cumplen.

A continuación compartimos una excelente presentación de Jose R. Hilera, Catedrático de Universidad del Área de Lenguajes y Sistemas Informáticos.

 

Principales limitaciones de acceso a una web

hay demasiados contenidos en Internet pero muy pocos están hechos de forma que atiendan los problemas de acceso a personas con discapacidad. Estas son algunas de las limitaciones que pueden presentar algunos usuarios al momento de querer hacer uso de la web:

• Visual: Desde la baja visibilidad hasta la ceguera total, además de problemas para distinguir los colores (Daltonismo)
• Cognitiva: Dificultades en la comprensión del contenido como la dislexia o discapacidades cognitivas que afecten a la memoria, la atención, las habilidades lógicas, etc.
• Auditiva: La sordera o baja audición.
• Motrices: Dificultad o imposibilidad de usar las manos ya sea por amputación, Parkinson, parálisis cerebral, etc.

Los 4 principios de la accesibilidad Web

Para lograr la accesibilidad web hay que ser conscientes de que no todos los usuarios acceden a la Web con los mismos medios técnicos y que no todos los usuarios son capaces de percibir correctamente todos los contenidos publicados en la Web.

Según altavoz.net, los principios indicados por el WCAG pueden englobarse en 4 principios o criterios en los que basar el diseño accesible de una web:

• • • Perceptible: se refiere que tanto los contenidos como la interfaz de un sitio web debe poder ser percibida por todos sus usuarios. Es decir, la web debe tener contenidos visuales y auditivos. Alternativas perceptibles para personas ciegas o sordas.
    • Operable: Quiere decir que un sitio web debe tener muchas maneras, y todas muy claras y advertidas, para realizar una acción o buscar un contenido. Entre más alternativas existan, mejor será su accesibilidad.
    • Comprensible: Para que un sitio sea comprensible debe ser legible y comprensible. Por ejemplo, debe poseer un tipo de letra que pueda ser leído por todos los usuarios. Lo ideal es que la web tenga una herramienta que permita al visitante ajustar el tipo de letra a su mejor tamaño.
    • Robusto: Esto quiere decir que la web debe ser compatible con todos los navegadores web, en todos los sistemas operativos (Windows, Mac, Android, iOs, etc), y en todos los dispositivos con aplicaciones de tecnologías de apoyo, como lectores de pantallas para personas ciegas como lo son JAWS, NVDA, talkback, VoiceOver.

Algunas mejoras de accesibilidad que puedes incorporar a tu web

Proporciona un texto alternativo adecuado a cada imagen

Una persona ciega no podrá ver una imagen, pero su asistente sí podrá leer la descripción de la imagen si así lo defines en tu web, añadiendo «texto alternativo» a la imagen que describa lo que se observa en la foto. Escritorio de WordPress- Medios – Añadir medio – «Texto alternativo».

Uso de tablas de datos

Son índices de contenidos que ayudan en la navegación web. Utiliza títulos que describan fielmente el contenido de cada párrafo para que el usuario sepa exactamente qué se va a encontrar o acceda rápidamente al contenido que le interesa.

Dar un tiempo prudente para leer y entender el contenido

Nos gustan las slides porque dotan de movimiento a las webs pero este movimiento puede resultar demasiado rápido para algunas personas a las que les cueste comprender o visualizar el contenido. Comprueba que dejas el suficiente tiempo de transición en cada slide para que todos los potenciales usuarios, independientemente de su condición o edad, puedan comprender cada mensaje de cada slide.

No diseñar contenidos o herramientas que puedan provocar convulsiones:

Existen herramientas de diseño web que son preciosas, que cambian rápidamente de formas y colores, que le dan a un sitio un verdadero impacto, pero muchas de ellas pueden provocar ataques o convulsiones epilépticas, que pueden ser prevenidas.

Ojo a las etiquetas en los formularios

Asegúrate de que cada elemento del formulario tenga la etiqueta correcta. Por ejemplo: Donde el usuario debe escribir su nombre, debe encontrar la etiqueta (<label>) «Nombre». Esto principalmente es para que los lectores de pantallas puedan indicar correctamente el nombre de cada etiqueta (Nombre, Apellidos, Número de contacto, correo electrónico, etc.).

Añade subtítulos a los vídeos

Los vídeos que insertes de Youtube o Vimeo en tu web deben contener subtítulos para personas sordas y audio descripción para personas ciegas. Esto permite a las personas con problemas de audición o visión saber de qué trata el vídeo.

Activación de enlaces

Los enlaces deben poder ser activados haciendo uso de cualquier dispositivo como ratón o teclado, entre otros.

Uso de colores y contrastes

ELcontraste entre la fuente y el fondo debe de ser adecuado. Así como los colores de resaltado. Si usas el color rojo para resaltar alguna información, una persona daltónica no podrá distinguirlo. Quizás es mejor utilizar algún tipo de exclamación u otro tamaño de fuente para llamar su atención (a parte del color).

Estas son algunas ideas, pero hay muchas más. También puedes echar mano de algunos plugins interesantes desarrollados para tal fin.

Plugins de WordPress para accesibilidad Web

WP Accessibility

Es uno de los plugins más conocidos y utilizados en tema de accesibilidad. Aporta a tu web una serie de funcionalidades interesantes como:

• Añade una barra de herramientas para letras grandes, escala de grises del tema y colores de alto contraste.
• Permite agregar una descripción larga a las imagenes usando el campo «Descripción».
• Agregar facilmente los atributos ALT de las imágenes.
• Agrega etiquetas a los campos de los formularios en tal caso de falten.
• Permite modificar el CSS para corregir inconvenientes de color.
• Muestra un error de página cuando se hace una búsqueda con una cadena de texto vacía en el caso que nuestra web tenga una barra de búsqueda.

Accede aquí para ver y descargar.

SOGO Accessibility

Este plugin, desarrollado por SOGO, escanea el código de la web y agrega funciones de accesibilidad a la página automáticamente

El administrador puede seleccionar:

• donde se situará el botón de accesibilidad en la pantalla, que éste se desplace hacia la izquierda, derecha, abajo.
• Habilitar / deshabilitar funciones
• Establecer el valor de aumento del tamaño de fuente
• Configurar la visualización de texto para el usuario para cada función.
• Personalizar los colores de los complementos
• Añadir CSS personalizado

Accede aquí para ver y descargar.

Accessibility Widget

Agrega un widget de barra lateral para cambiar el tamaño del texto en su sitio WP. Siempre regrese a la configuración del widget después de cada actualización de versión para guardar su configuración.

Accede aquí para ver y descargar.

Accessibility WordPress Plugin

Monkey Accessibility es un software innovador que agrega funciones específicas de habla, lectura y acceso a su sitio web para facilitar el acceso y la participación de personas con dislexia, baja alfabetización y personas con discapacidad visual. 

Este complemento de WordPress cuesta 26$ y está disponible en themeforest.

Conclusiones

Hacer tu web más accesible te abre las puertas a un público más amplio y variado. No solo llegarás a las personas con alguna discapacidad, también facilitarás el acceso a:

• Usuarios con edad avanzada con dificultades producidas por el mismo envejecimiento
• Usuarios afectados por el entorno (baja iluminación, espacios reducidos, ambientes muy ruidosos)
• Personas con pocos medios económicos que acceden desde equipos y conexiones con muchas carencias tecnológicas
• Personas con dificultades con el idioma.

Algunas medidas de accesibilidad web te ayudarán a mejorar la usabilidad y el posicionamiento SEO de tu web.

Así mismo estarás mejorando la imagen de tu empresa, demostrando responsabilidad social, a la vez que estás cumpliendo con la ley vigente.

También te puede interesar… 

• TOP10 Plugins de WordPress para mejorar la conversión de tu tienda online
• Cómo cambiar de dominio sin perder posicionamiento SEO
• Cómo configurar la firma de correo electrónico en Gmail y adaptarla al nuevo RGPD
• 10 tendencias de Marketing Online para 2020