Cómo crear mundos digitales inclusivos con un diseño accesible

El diseño accesible se centra en crear sitios web que todo el mundo pueda utilizar, independientemente de su edad, situación o discapacidad. El objetivo del diseño accesible es prevenir y eliminar cualquier barrera que impida a las personas con discapacidad acceder y utilizar la web.

Recientemente, organismos reguladores como la Comisión de Igualdad y Derechos Humanos (EHRC) en el Reino Unido, organismos equivalentes en la UE y el Departamento de Justicia (DOJ) han incrementado su atención sobre la accesibilidad web y han animado a todas las empresas a hacer lo mismo. Esto maximiza las posibilidades de que todo el mundo pueda acceder y utilizar el contenido digital, especialmente quienes tienen una discapacidad visual, auditiva o cognitiva. Además, puede ayudarte a cumplir con las directrices universales de accesibilidad recogidas en las Pautas de Accesibilidad para el Contenido Web (WCAG). 

A continuación, exploraremos qué incluye el diseño accesible, los principios del diseño accesible, cómo crear e implementar estos principios y cómo mantener un sitio accesible incluso cuando tu web —y las directrices de accesibilidad— cambian.

Icono de globo terráqueo junto a un texto que dice "Más del 96% de las páginas web más visitadas del mundo no son accesibles."

Los fundamentos del diseño accesible

Los sitios web inaccesibles son demasiado comunes en el mercado actual. Más de el 96% de las páginas de inicio más visitadas del mundo no son accesibles(opens in a new tab). En pocas palabras, esto significa que solo el 4% de los sitios web más populares pueden ser utilizados por personas con discapacidad. Para las empresas, esto deja un mercado enorme y en crecimiento gravemente desatendido. Al aumentar la accesibilidad, puedes ampliar tu alcance y hacer crecer tu marca. Más importante aún, impulsas la innovación y ayudas a que todos los usuarios interactúen con tu sitio.

Diferencia entre diseño accesible y diseño inclusivo

Es importante señalar que el diseño accesible es diferente al diseño inclusivo, siendo la principal diferencia sus objetivos.

El diseño accesible busca ofrecer una experiencia que no discrimine a las personas con discapacidad. El enfoque se centra más en ofrecer resultados claros; por ejemplo, proporcionar una interfaz fácil de usar para personas con baja visión o discapacidad auditiva.

De forma similar al diseño accesible, el diseño inclusivo busca ofrecer una buena experiencia de usuario. Sin embargo, el diseño inclusivo va más allá del objetivo del diseño accesible creando un buen diseño para todos — no solo para usuarios con discapacidad.

Los cuatro principios del diseño accesible

Publicados por el World Wide Web Consortium (W3C)(opens in a new tab), cuatro principios de diseño web crean una experiencia de usuario accesible. Cada principio representa una serie de pautas recogidas en las WCAG que deben seguirse para ayudar con la accesibilidad, usabilidad y legibilidad.

Los cuatro principios incluyen:

• Perceptible: ¿Pueden los usuarios identificar fácilmente la información y las relaciones? Los usuarios deben poder percibir la información; nada debe ser invisible para todos los sentidos.

• Operable: ¿Puede el usuario interactuar fácilmente con el contenido? Tu sitio no debe tener acciones que un usuario no pueda realizar. Por ejemplo, las funcionalidades disponibles con el ratón también deben estar disponibles con el teclado.

• Comprensible: ¿Puede el usuario entender el contenido presentado? Por ejemplo, los creadores de contenido (como influencers o creadores multimedia) deben utilizar un lenguaje claro y sencillo al escribir subtítulos o descripciones. De igual modo, los redactores deben asegurarse de que el contenido sea legible y evite el uso de lenguaje complejo.

• Robusto: ¿Es el sitio lo suficientemente robusto como para funcionar con una variedad de tecnologías, incluidas tecnologías de apoyo como los lectores de pantalla?

En esencia, los principios POUR mencionados arriba ayudan a crear un diseño web accesible que responde a las necesidades de la comunidad con discapacidad, a la vez que fomenta una cultura empresarial de accesibilidad.

¿Quién se beneficia del diseño accesible?

El diseño accesible beneficia a todos, no solo a las personas con discapacidad. Si bien es cierto que el diseño accesible garantiza que personas con diferentes discapacidades puedan acceder y navegar por un sitio, todos los usuarios se benefician de la accesibilidad.

Por ejemplo, los subtítulos permiten a las personas sordas o con problemas de audición ver vídeos, o permiten a personas sin discapacidad verlos en un entorno ruidoso. De igual modo, la conversión de voz a texto lee el contenido web a personas ciegas, daltónicas o con discapacidad visual, pero también es útil para cualquier usuario que no esté delante de su pantalla o dispositivo.

Para las organizaciones, el diseño accesible significa una mayor aplicación y una audiencia más amplia para tus productos digitales. Además, puede ayudar a reducir el riesgo de reclamaciones legales por accesibilidad.

Imagen de una brújula rodeada por cinco estándares de accesibilidad: WCAG, Sección 508, ADA, ARIA y EN 301 549.

Cinco leyes y estándares de accesibilidad que debes conocer

Ofrecer un sitio web accesible también es un requisito legal. Leyes como la Ley de Estadounidenses con Discapacidades (ADA), la Sección 508, ARIA y otras exigen que las empresas públicas y privadas cumplan con los estándares de accesibilidad web. No cumplir puede derivar en acciones legales que pueden suponer una gran carga para tu empresa.

A continuación, exploraremos los cinco principales estándares de accesibilidad que se espera que sigan las organizaciones.

• WCAG (Pautas de Accesibilidad para el Contenido Web): La última versión de WCAG (2.2) se considera la referencia mundial para el diseño accesible y universal, incluyendo EE. UU., Canadá, Reino Unido, Australia y Japón. WCAG se divide en tres niveles de conformidad (Nivel A, AA y AAA); el contenido digital que cumple con los criterios de éxito de WCAG 2.2 Nivel A y Nivel AA se considera generalmente accesible.

• Ley de Estadounidenses con Discapacidades (ADA): La ADA es una ley de derechos civiles de EE. UU. que prohíbe la discriminación contra personas con discapacidad. El Título III de la ley se refiere específicamente a los alojamientos públicos, que el DOJ ha declarado que incluyen los sitios web. Para ser considerado conforme a la ADA, las organizaciones deben garantizar que las personas con discapacidad puedan acceder y navegar fácilmente por su sitio web. No cumplir con la ley puede derivar en acciones legales.

• EN 301 549: Similar a la Sección 508, EN 301 549(opens in a new tab) es una ley europea de accesibilidad que exige que los sitios web, aplicaciones móviles y software sean accesibles para todos los usuarios, incluidas las personas con discapacidad. La ley se aplica específicamente a las organizaciones del sector público en Europa y a las empresas privadas que venden en el sector público europeo.

• ARIA (Aplicaciones Ricas de Internet Accesibles): También conocida como WAI-ARIA(opens in a new tab), ARIA es un conjunto de roles y atributos que se pueden añadir al código HTML. Las directrices ARIA fueron establecidas por el W3C como un estándar técnico para ayudar a que partes inaccesibles de la web sean más accesibles para quienes usan tecnologías de apoyo. Por ejemplo, versiones antiguas de HTML no incluían etiquetas que pudieran describir elementos web como menús de página o barras de progreso. Esto hacía que fueran inaccesibles para algunos usuarios. ARIA resuelve esto mediante roles como “menú” o “imagen deslizante” que describen los elementos añadidos al código HTML semántico.

En conjunto, estas directrices ayudan a equilibrar los requisitos legales y las consideraciones éticas para la inclusión. Siguiendo estos estándares, los creadores de contenido digital pueden crear un diseño de interfaz más accesible, algo que beneficia a todos.

Ejemplos reales de diseño accesible

Al diseñar un sitio web accesible, es importante tener en cuenta numerosos tipos de discapacidad, incluidas las visuales, auditivas, motoras, cognitivas o una combinación de ellas. A continuación, algunos ejemplos de cómo puedes diseñar pensando en estas discapacidades:

• Navegación por teclado: Para usuarios con movilidad reducida o usuarios de lectores de pantalla, la navegación por teclado garantiza que puedan moverse por el sitio. Por ejemplo, los usuarios que intentan reservar una cita o rellenar un formulario pueden hacerlo mediante atajos de teclado o tecnologías de apoyo. 

• Texto alternativo: El texto alternativo, o alt text, se utiliza para describir imágenes y otros contenidos multimedia en una página web. Por ejemplo, las personas ciegas o con otras discapacidades visuales pueden comprender imágenes de ropa o comida mientras compran o piden comida online, lo que les ayuda a tomar decisiones de compra. 

• Encabezados y etiquetas de encabezado: Utilizar los encabezados y etiquetas de encabezado correctos (por ejemplo, H1, H2 y H3) facilita que los usuarios que dependen de lectores de pantalla naveguen por la página. Por ejemplo, los usuarios de lectores de pantalla pueden seguir fácilmente la estructura de una entrada de blog o una noticia sin perderse.

Integrar el diseño accesible en la experiencia de usuario (UX)

Como hemos mencionado antes, el diseño web accesible amplía el alcance de tu sitio web, abriendo la puerta a una gran audiencia. Sin embargo, hay características clave que deben incluirse en el diseño para mejorar la experiencia de usuario en general, incluso para quienes no tienen discapacidad. A continuación, veremos cómo llevar la accesibilidad al diseño UX.

Componentes de un diseño UX accesible

• Navegación y estructura: Dado que no todos los usuarios utilizan el ratón para navegar, es importante que un sitio cuente con funciones de navegación adicionales como atajos de teclado o comandos de voz. Además, la estructura de tu contenido debe ser clara y fácil de seguir. Una forma de lograr ambos objetivos es construir una arquitectura de la información y mapear el contenido a ella.

• Diseño visual sólido: Los elementos visuales de tu sitio influyen significativamente en la accesibilidad. Cuando se usan correctamente, estos elementos ayudan a los usuarios a navegar por la página y completar tareas. Para mejorar tu diseño visual, asegúrate de tener:
  -Contraste de color adecuado (un comprobador de contraste de color puede ayudarte con esto)
  -Texto e imágenes escalables
  -Texto alternativo preciso en imágenes y vídeos
  -Tipografías claras y legibles
  -Distraer lo mínimo posible con ventanas emergentes, desplazamientos, vídeos en reproducción, animaciones, etc.
  -Uso adecuado de los colores de fondo

• Elementos interactivos: Los elementos interactivos incluyen enlaces, botones, formularios y animaciones, todos los cuales deben ser accesibles. Asegúrate de que cada uno de estos elementos sea fácilmente identificable para los usuarios. Por ejemplo, cambia el aspecto de los enlaces o botones cuando el usuario pase el ratón por encima. 

• Diseño auditivo: Asegúrate de que los elementos auditivos de tu sitio, como vídeos, clips de sonido o música, sean accesibles para usuarios con discapacidad auditiva. Incluir subtítulos en los vídeos o subtítulos, opciones de texto a voz e indicadores visuales permite que los usuarios con estas discapacidades interactúen con el contenido auditivo.

• Compatible con tecnología de apoyo: La compatibilidad con lectores de pantalla debe tenerse en cuenta durante todo el proceso de diseño. Aproximadamente 2,5 millones de personas dependen de la tecnología de apoyo(opens in a new tab), lo que significa que tu sitio debe ser utilizable por estas tecnologías. Un comprobador de accesibilidad web puede ayudarte con esto, aunque también puedes considerar hacer pruebas con usuarios reales de tecnología de apoyo para obtener comentarios.

Pasos prácticos para garantizar la accesibilidad y la inclusión

Ahora que ya sabes en qué consiste el diseño accesible, hablemos de las mejores prácticas para diseñar sitios web accesibles e inclusivos.

1. Realiza una auditoría de accesibilidad

El primer paso para crear un sitio web accesible es resolver los problemas de accesibilidad existentes en tu web. Por ejemplo, la Auditoría Experta de AudioEye la realiza nuestro equipo de expertos para detectar problemas comunes de accesibilidad como bajo contraste de color o ausencia de texto alternativo. Complementamos nuestras pruebas de accesibilidad con nuestro conjunto de pruebas automatizadas para identificar y corregir rápidamente casi 400 problemas de accesibilidad.

2. Fomenta una mentalidad de accesibilidad

Recuerda, la accesibilidad es un proceso continuo. Debes tener en cuenta a los usuarios con discapacidad siempre que diseñes una nueva página, realices una actualización, crees nuevo contenido o lances nuevos productos digitales. Hacerlo puede ayudarte a evitar problemas comunes de accesibilidad y reducir el tiempo necesario para corregirlos más adelante.

3. Empieza con una base sólida

No dejes la accesibilidad para el final del proceso de diseño. Debe ser una estrategia integrada en tus procesos existentes. Así, diseñadores, desarrolladores, gestores de proyectos y redactores tendrán en cuenta la accesibilidad al crear contenido digital. Esto no solo te ayuda a crear un diseño accesible desde el principio, sino que también te ahorra tener que encontrar y corregir problemas comunes de accesibilidad una vez que el contenido esté publicado.