Accesibilidad web: ¿Qué es y cómo se diseña?

La accesibilidad de la web ayuda a las personas con discapacidad a navegar por un sitio web y a acceder a su contenido con mayor facilidad utilizando herramientas como un lector de pantalla.

Al hacer que tus sitios web sean accesibles, estarás permitiendo que más personas interactúen positivamente con ellos, generando más tráfico en el proceso.

Desgraciadamente, aunque la Organización Mundial de la Salud (OMS) estima que el 15% de la población mundial vive con algún tipo de discapacidad, el 70% de los sitios web revisados tienen una grave falta de accesibilidad.

En este artículo, aprenderás más sobre la accesibilidad web y por qué es importante. Además, te mostraremos cómo hacer y probar un sitio web accesible basado en estándares internacionales.

Por qué es importante tener en cuenta la accesibilidad en el diseño web

La accesibilidad de la web crea la oportunidad de que las personas con discapacidades experimenten un acceso igualitario a una plataforma digital.

Además, la accesibilidad proporcionará una mejor experiencia al usuario, mejorando los esfuerzos de optimización de tu sitio web en los motores de búsqueda (SEO). Esto ayudará a que se posicione mejor en las páginas de resultados de los motores de búsqueda (SERP), aumentando el alcance de la audiencia.

En consecuencia, la accesibilidad web ayuda a las empresas a ampliar su alcance en el mercado y a aumentar la satisfacción de los clientes, y es una de las mejores prácticas de diseño web.

Antes de empezar a crear un diseño web accesible, veamos la diversa gama de discapacidades que afectan la accesibilidad a tu sitio y sus respectivas soluciones de accesibilidad:

• Discapacidad visual: incluye ceguera, baja visión y daltonismo. La mayoría de las personas con estas discapacidades utilizan programas de ampliación de pantalla o dependen de lectores de pantalla para leer en voz alta el texto digital y describir las imágenes en la web. Ejemplos de lectores de pantalla son JAWS y NVDA.
• Discapacidad auditiva: se refiere a varios grados de pérdida de audición, desde leve hasta profunda. El contenido de audio del sitio web debe incluir una transcripción o subtítulos para facilitar la comprensión del contenido web y la interacción con él.
• Deterioro motor: las personas con un control motor fino limitado pueden tener dificultades para utilizar ratones o trackpads. Así, algunos usuarios dependen de sus teclados. Es posible que necesiten dispositivos personalizados, como un puntero de cabeza, reconocimiento de voz o palillos bucales.
• Deterioro cognitivo: principalmente, se refiere a los problemas de aprendizaje. Para ayudar a los usuarios con limitaciones cognitivas a interactuar, utiliza un diseño y una navegación coherentes, un lenguaje sencillo y crea contenidos en vídeo.

Hay que tener en cuenta que no sólo se trata de personas con discapacidades permanentes, sino también de usuarios con discapacidades temporales o problemas de accesibilidad situacional. Por ejemplo, algunas personas pueden tener dificultades para oír porque se encuentran en una zona concurrida.

Si estás creando un sitio web en WordPress, consulta las mejores prácticas de accesibilidad de WordPress.

Normas de accesibilidad web

Para asegurarte de que tus contenidos y aplicaciones web tienen una buena accesibilidad, presta atención a varios componentes, como los agentes de usuario y las herramientas web y de autoría.

Para ayudarte, vamos a explicar las especificaciones y directrices de accesibilidad web que debes seguir para cumplir con las normas de accesibilidad web.

Requisitos legales de accesibilidad del sitio web

Estados Unidos ha introducido la Ley de Estadounidenses con Discapacidades (ADA) sobre accesibilidad. Garantiza que todas las personas puedan utilizar todas las instalaciones públicas, incluidas  las páginas web. En resumen, convierte la accesibilidad de la web en un requisito legal.

Por ello, si no la cumples, puedes enfrentarte a riesgos legales.

No se tolera el incumplimiento por razones como la ignorancia o que un sitio web esté todavía en desarrollo. Por lo tanto, al realizar un diseño accesible e inclusivo, se puede evitar la posibilidad de demandas y construir una buena reputación para la marca.

Directrices de Accesibilidad al Contenido en la Web (WCAG)

Las Directrices de Accesibilidad al Contenido en la Web (WCAG) proporcionan una estandarización del contenido accesible que puede satisfacer las necesidades de todas las personas y organizaciones del mundo.

Fundamentalmente, estas directrices están dirigidas a los desarrolladores web, especialmente a los de herramientas de autoría web, y a todos los que quieran crear sitios accesibles.

Además, se espera que las WCAG 3 admitan una amplia gama de requisitos de los usuarios, empleen pruebas holísticas y permitan el mantenimiento periódico de las directrices y el contenido relacionado para adaptarse a los cambios tecnológicos.

Los criterios de éxito de las directrices WCAG constan de tres niveles de conformidad:

• Nivel A: muestra que un sitio web tiene un nivel mínimo de accesibilidad, lo que significa que no todos los usuarios con discapacidad pueden utilizarlo fácilmente. Si un sitio web no puede alcanzar este nivel, es seguro que no es accesible.
• Nivel AA: un estándar adecuado para la mayoría de los sitios web, que muestra que se han eliminado las barreras más comunes.
• Nivel AAA: el nivel más alto de las WCAG. Es posible que algunos sitios web ni siquiera puedan cumplir con todos estos requisitos.

Los requisitos y normas de accesibilidad se basan en cuatro principios. Se denominan POUR, un acrónimo de las siguientes palabras

Perceptible

Significa que los usuarios deben ser capaces de percibir la información del contenido web. Por ejemplo, si tienen deficiencias visuales, el contenido debe ser accesible con tecnología de asistencia (TA), como un lector de pantalla.

Operable

Los usuarios deben poder manejar todos los componentes de la interfaz y navegar por ellos con diversas herramientas. Por ejemplo, si los usuarios tienen dificultades para utilizar el ratón, la tecla de tabulación de sus teclados o los comandos de voz deberían ser suficientes para navegar por el contenido.

Comprensible

Al crear contenidos web, hazlos legibles y predecibles utilizando instrucciones claras y fáciles de entender.

La aplicación de este principio ayudará a los usuarios a entender el flujo de trabajo del sitio web y a evitar errores.

Robusto

El contenido debe ser accesible por varios agentes de usuario, incluidos los dispositivos móviles, los navegadores web y las TA. En resumen, los sitios web accesibles no pueden determinar cómo deben acceder los usuarios al contenido.

Aplicaciones de Internet ricas y accesibles (WAI-ARIA)

La WAI-ARIA es una especificación técnica realizada por el W3C. Se creó para garantizar que la funcionalidad y la estructura de los contenidos y aplicaciones web fueran más accesibles para las personas con discapacidad. Mediante el uso de ARIA, un desarrollador web puede prescribir información semántica al contenido y resolver problemas de accesibilidad que el HTML nativo no puede proporcionar, como mejorar la accesibilidad del teclado.

ARIA tiene tres atributos: roles, estados y propiedades. Estos atributos ayudan a la tecnología de asistencia a definir los elementos accesibles de la interfaz de usuario en las páginas web y permiten a los usuarios interactuar con estos elementos.

Por ejemplo, los roles describen los widgets mostrados, como un deslizador y una barra de desplazamiento. Por su parte, los estados y propiedades representan los estados en los que se encuentran los widgets, como aria-haspopup para un menú.

Ten en cuenta que los atributos no cambian nada en la página web, salvo la información expuesta por las API de accesibilidad del navegador. Estas interfaces especializadas son proporcionadas por los sistemas operativos, para ayudar a las tecnologías de asistencia a recopilar información e interactuar con los widgets.

Hay varios tipos de API de accesibilidad disponibles en función del sistema operativo de cada dispositivo, como Microsoft Active Accessibility o Microsoft UI Automation para Windows, y la NSAccessibility para macOS.

Las APIs de accesibilidad incluyen un árbol de objetos accesibles e información llamado árbol de accesibilidad. Contiene información sobre propiedades descriptivas, eventos, contenido textual y accesibilidad.

¿Cómo comprobar la accesibilidad del sitio web?

Evaluar tu sitio web cuando aún está en proceso de desarrollo para ver si cumple la normativa aplicable es esencial. Cualquier problema puede identificarse antes y resolverse con mayor eficacia mediante las pruebas.

Existen varias herramientas que te pueden ayudar a comprobarlo:

• WAVE: una herramienta fácil y popular para los desarrolladores. Identifica los problemas y ofrece una solución para solucionarlos. Además, proporciona información sobre la accesibilidad con iconos e indicadores de error en la página web.
• WebAim: se utiliza para comprobar los colores del texto y del fondo para asegurar que el componente cumple con las normas WCAG.
• NVACCESS: un lector de pantalla gratuito para Windows. Tiene una función de resaltado de enfoque que ayuda a los desarrolladores a seguir los objetos de enfoque en la pantalla. Además, los desarrolladores pueden ver la salida del lector de pantalla como texto mediante su visor de voz.
• Axe DevTools: esta herramienta de pruebas automatizadas identificará y resolverá los problemas de accesibilidad mientras desarrollas tu sitio. Las Pruebas Guiadas Inteligentes (IGT) te permiten completar las pruebas manuales más rápidamente sin necesidad de ser un experto.

Lista de comprobación de la accesibilidad del sitio web

Para mejorar la accesibilidad, comprueba los siguientes factores para ver si tu sitio web cumple las directrices WCAG.

Alt Text

El texto alternativo puede proporcionar a un usuario ciego información escrita en lugar de imágenes, ilustraciones o gráficos en el contenido web con el uso de lectores de pantalla.

En resumen, todos los usuarios deben tener acceso a la misma información con o sin la posibilidad de ver las imágenes.

Alternativas de vídeo y audio  

Ofrecer alternativas multimedia, como transcripciones de texto o descripciones en archivos de audio, ayudará a los usuarios ciegos o con problemas de audición a acceder a la información del sitio web.

Un buen ejemplo de accesibilidad sería añadir subtítulos o proporcionar una descripción de audio para un vídeo.

Navegación

Garantizar que se pueda acceder a todas las partes del sitio web con el teclado o la tecnología de apoyo es esencial, ya que no todo el mundo puede utilizar el ratón.

Las estructuras del sitio, como los cuadros de búsqueda y los mapas del sitio, deben tener una navegación lógica e intuitiva para ayudar a los usuarios a encontrar fácilmente lo que buscan.

Contraste de color

A los usuarios con baja visión les resulta más fácil ver el contenido de tu web si hay un alto contraste de color en ella. Por ejemplo, utilizar un color de texto oscuro con un fondo claro o viceversa ayudará a la visibilidad.

Sin embargo, ten en cuenta que cada usuario tiene capacidades diferentes. Por lo tanto, proporciona la opción de cambiar la combinación de colores existente en el navegador web. El contraste mínimo requerido es de al menos 4,5:1 para un texto de tamaño normal.

Formulario accesible

Para ayudar a un usuario con discapacidad a entender un formulario web, asegúrate de que hay una etiqueta junto al campo en el que quieres que haga clic o escriba, por ejemplo, la dirección de correo electrónico o el nombre del formulario. Esto ayudará a los usuarios con TA a entender qué deben hacer en ese campo.

Contenido móvil, intermitente y parpadeante

Los contenidos móviles, intermitentes y parpadeantes, como anuncios, vídeos o carruseles, pueden crear problemas a los usuarios con deficiencias cognitivas.

Además, asegúrate de que tu página web tiene un límite de tiempo para el contenido que cambia rápidamente y que puede ajustarse o desactivarse, para no confundir a los usuarios al procesar la información.

Ten en cuenta que los contenidos que parpadean más de tres veces por segundo pueden provocar convulsiones a las personas con trastornos de fotosensibilidad.

Texto

Un título de página descriptivo puede ayudar a los usuarios discapacitados a navegar entre diferentes páginas web, ya que un lector de pantalla leerá el título de la página además de cualquier contenido presente. También hay que marcar los títulos para ayudar a los usuarios a navegar con el teclado o la tecnología de asistencia.

Algunas personas tienen que ampliar las letras o incluso cambiar el tipo de letra y el interlineado al leer. Por lo tanto, hacer que tu texto sea ampliable sin afectar al resto del contenido hará que tu sitio sea más accesible.

Aprender sobre la accesibilidad web

Tener conocimientos de accesibilidad web te ayudará a diseñar una página web de alta calidad y a entender las soluciones de accesibilidad.

Aquí están nuestras recomendaciones de cursos online de accesibilidad web con sus pros y sus contras:

1. W3C

El curso de Introducción a la Accesibilidad Web proporciona conocimientos fundamentales sobre la accesibilidad digital. Aprenderás a hacer un sitio web accesible para todo el mundo y a cumplir las normas internacionales. Está abierto a todo el mundo, incluidos estudiantes, diseñadores y profesionales.

Pros:

• Gratuito.
• Sin requisitos previos.
• Una certificación verificada que se puede poner en tu currículum.
• El curso está dividido en temas específicos que puedes elegir.

Contras:

• Acceso limitado a los materiales del curso con la opción gratuita.

2. Coursera

La Universidad de Illinois ofrece un curso de Introducción a la accesibilidad y el diseño inclusivo. En él se exponen con más detalle los principios básicos de la accesibilidad y el diseño inclusivo. Además, aprenderás más sobre la TA y los principios principales para hacer diseños universales.

Este curso es adecuado para principiantes.

Pros:

• Subtítulos en francés, portugués, ruso, inglés y español.
• Una opción de prueba gratuita.
• Una opción de ayuda financiera.

Contras:

• Pago requerido para obtener el curso completo.

3. Udacity

El curso de accesibilidad web de Google ofrece lecciones más técnicas sobre cómo hacer que una página funcione con TA y gestionar el enfoque de entrada. Además, aprenderás sobre la semántica del marcado.

Sin embargo, este curso requiere algunos conocimientos de codificación, incluyendo HTML, CSS y JavaScript.

Pros:

• Gratuito.
• Bueno para las prácticas técnicas.
• También está disponible el programa Full-Stack Web Developer Nanodegree.

Contras:

• Sólo para usuarios avanzados.

Conclusión

La accesibilidad web mejora la experiencia del usuario en tu sitio. Muchas empresas y organizaciones han implementado prácticas de accesibilidad web debido a diversos beneficios, como un aumento de la audiencia y un mejor posicionamiento en las SERP.

Además, la accesibilidad web es también un requisito legal.

Además de seguir las directrices WCAG, es esencial evaluar tu sitio web para evitar problemas graves. Además de utilizar herramientas de evaluación como WAVE y WebAim, puedes comprobar manualmente si tu web es accesible.

Para ello, ten en cuenta los siguientes factores:

• Alt text: asegúrate de haber incluido texto alternativo en tus imágenes.
• Alternativas de vídeo y audio: proporciona una transcripción de texto o una descripción de audio en un vídeo.
• Navegación: asegúrate de tener una navegación intuitiva.
• Contraste de colores: ofrece opciones para cambiar los colores o su combinación para los usuarios.
• Formulario accesible: proporciona instrucciones claras a un formulario web y etiqueta cada campo.
• Contenido fácil de usar: evita el contenido en movimiento, intermitente, parpadeante y basado en el tiempo.
• Texto: utiliza títulos de página grandes, marca los encabezados y proporciona texto ampliable.

Además, puedes realizar un curso online para aprender más sobre la accesibilidad web en EdX, Coursera y Google. Si tienes más preguntas o sugerencias, no dudes en compartirlas en la sección de comentarios más abajo. No olvides utilizar los mejores servicios de web host para garantizar el máximo rendimiento del sitio web para tus visitantes.