Accesibilidad Web: Por qué los Estándares del W3C son, a Menudo, Ignorados

El objetivo de este artículo es presentar los principios subyacentes de accesibilidad y ayudarte a implementar perfectamente las pautas y estándares de accesibilidad web en tu próximo proyecto. Incluso pequeñas mejoras pueden ayudar a que tu contenido sea mejor, alcance a más personas y mejore la experiencia general del usuario.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

El objetivo de este artículo es presentar los principios subyacentes de accesibilidad y ayudarte a implementar perfectamente las pautas y estándares de accesibilidad web en tu próximo proyecto. Incluso pequeñas mejoras pueden ayudar a que tu contenido sea mejor, alcance a más personas y mejore la experiencia general del usuario.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Cezary Tomczyk
Verified Expert in Engineering

Cezary’s two decades as a software engineer and project manager have seen him working at Apple, Microsoft, Nokia, and Oracle, among others.

Read More

Expertise

PREVIOUSLY AT

Infor
Share

El término du jour es accesibilidad web— en mi opinión, uno de los aspectos malentendidos y mal aplicados, más frecuentemente, del diseño web. El error común es que la accesibilidad está diseñada, únicamente, para personas con discapacidad. De hecho, todos se benefician del contenido accesible y tu audiencia aumentará al acceder al contenido viable en diferentes plataformas o de diferentes maneras, ya que pueden utilizar tu contenido con menos restricciones.

Desafortunadamente, muchos desarrolladores web no hacen accesible su contenido y no siguen las pautas de accesibilidad web; por lo tanto, muchas personas experimentan dificultades innecesarias al tratar de utilizar sus diseños y disfrutar del contenido. En casos extremos, ciertos grupos de usuarios no pueden usar este sitio web de manera efectiva.

Construir contenido accesible debe ser algo de segunda naturaleza para cualquier desarrollador, diseñador o creador de contenido, de la misma manera que la consideración de rampas, escaleras y ascensores es para un arquitecto que diseña un nuevo edificio.

Echemos un vistazo más de cerca a lo que está detrás del escenario y por qué tantos desarrolladores parecen pasar por alto los estándares de accesibilidad web sin una razón valedera.

1. ¿Qué Significa “Diseño Accesible”?

El contenido accesible es contenido que todos pueden utilizar. No conocemos todos los aspectos de cómo los usuarios están accediendo a nuestro contenido, por lo que tenemos que diseñar teniendo la accesibilidad en mente desde el principio.

Como he señalado anteriormente, esto no concierne a las personas con discapacidad, que representan aproximadamente alrededor del 15% de la población mundial. En la vida real, los usuarios a menudo terminan por no consumir contenido e interactuar con dispositivos de la misma manera que se preveía durante el desarrollo. El contenido accesible también es requerido por razones legales en muchas jurisdicciones. Lee “Factores legales y de política en el desarrollo de un caso de negocio de accesibilidad Web para tu organización” para obtener información adicional sobre el cumplimiento de la accesibilidad.

Considera los siguientes escenarios al pensar en el contenido accesible para los usuarios que podrían ser o tener:

  • Incapaz de oír bien. 360 millones de personas en todo el mundo tienen discapacidades auditivas. El contenido de audio debe tener transcripciones y el video debe tener subtítulos.

  • Incapaz de ver bien. 285 millones de personas se estima que tienen discapacidades visuales en todo el mundo: 39 millones son ciegos y 246 tienen baja visión. Los usuarios que tienen discapacidades visuales usan lectores de pantalla (que leen el contenido usando el habla sintetizada), el dispositivo braille (el contenido de la pantalla aparece en la pantalla braille y el usuario puede navegar e interactuar con su dispositivo usando las teclas de la pantalla) o el modo de contraste.

  • Afectados por dislexia. Las personas con dislexia se les dificulta la lectura y comprensión del contenido, especialmente, por ejemplo, texto justificado o todo en mayúsculas.

  • ** Sufren de limitaciones físicas.** No todas las personas pueden usar todos los dispositivos. Por ejemplo, la navegación a través del contenido debe estar disponible no sólo para los usuarios del ratón, sino también para los usuarios que no pueden utilizar un ratón.

  • Usan dispositivos móviles. Adapta tu contenido para pantallas pequeñas. Permite que el usuario amplíe o aumente el tamaño de la letra.

2. Cómo Garantizar una Buena Accesibilidad Web

Las personas usan formas muy diferentes de navegar y consumir contenido. Hay usuarios que necesitan ser compatibles con herramientas software adicionales que les ayuda a acceder al contenido de manera más sencilla. Estas herramientas, conocidas como tecnologías de asistencia, van desde lectores de pantalla a pantallas táctiles y punteros.

Sin embargo, tu aplicación y tecnología de asistencia necesitan hablar entre sí. No todo lo que está escrito en HTML es totalmente comprensible en las tecnologías de ayuda. Con el fin de ayudar a “traducir” el contenido de “lenguaje técnico” a un lenguaje más legible por el hombre, se han creado normas API de accesibilidad.

Este diagrama básico de accesibilidad web te debería dar una mejor idea de cómo funcionan las tecnologías de ayuda.

Source: W3C

Para ilustrar cómo funciona, veamos un ejemplo de código simple:

<a href="#” class=”button”>Delete</a>

Este sencillo código, para las personas que usan el lector de pantalla, no significa mucho. Incluso es engañoso y sólo se lee como un enlace con el texto “Delete”. Con el fin de ayudar a los usuarios a comprender qué tipo de método se utiliza para realizar la acción, podemos utilizar los atributos ARIA (Asistive Rich Internet Applications) especificados en https://www.w3.org/TR/wai-aria/ esto para anular el rol original. Cambiamos el significado de un enlace a un botón añadiendo el atributo role ="button". De esta manera, los lectores de pantalla lo leerán como un botón, no como un enlace. Lo cual es más apropiado.

En resumen, el atributo ARIA:

  • Da o mejora la semántica de elementos no semánticos o semánticos,

  • Asegura que el contenido dinámico (en directo) siga siendo accesible.

  • Proporciona el rol para describir el tipo de “aparato” definido (menú, elemento de árbol, control deslizante, medidor de progreso, etc.).

  • Proporciona el rol para describir la estructura de la página web (encabezados, regiones y tablas).

  • Proporciona el estado de los widgets (marcado, tiene ventanas emergentes, etc.).

  • Proporciona propiedades para arrastrar y soltar que describen las fuentes de arrastrar y objetivos de soltar.

¿Qué es la Accesibilidad en Diseño Web?

Siempre que diseñes un contenido, piensa en dos cosas: cómo el contenido es perceptible y cómo es operable. Vamos a examinar algunos ejemplos para ilustrar la accesibilidad en el diseño web.

Supongamos que vas a diseñar un elemento desplegable de selección personalizada. Aquí están los parámetros a considerar al diseñar el elemento:

  • Marcar diferentes estados: habilitado, deshabilitado, solo lectura.

  • Marcar el elemento cuando recibe el estado de enfoque/paso.

  • Marcar cada elemento de opción cuando obtiene el estado de enfoque/paso.

  • Asegúrate de que el contenido sigue siendo legible cuando sólo el texto se amplía hasta un nivel de 200%

  • Asegúrate de que haya contraste suficiente entre el texto y su fondo. Esto ayuda a las personas con visión moderadamente baja o las que usan dispositivos en condiciones extremas de iluminación, por ejemplo, expuestas a la luz solar directa o en una pantalla con bajo brillo, a leer el contenido.

Otro ejemplo podría ser la selección de un color para describir un estado. Aquí están los puntos a considerar al diseñar una sección, en la que el usuario será capaz de recoger un color:

  • Hay personas que tienen dificultades para distinguir ciertos colores. Así que el verde no significa verde para todos tus visitantes. Para solucionarlo, agrega una descripción para cada color que detalle el propósito de éste.

  • Marca cada elemento cuando obtengas el estado de enfoque/paso.

  • Asegúrate de que haya suficiente espacio entre los elementos para que cada uno pueda ser fácilmente activado, por ejemplo, en dispositivos con un visor más pequeño.

3. Pruebas de Accesibilidad: ¿Por Dónde Empezar?

No hay una sola forma de comprobar y asegurarse de que el contenido web es totalmente accesible. Se necesitan varias técnicas para verificar y solucionar los problemas de accesibilidad. Puedes empezar por definir problemas, soluciones y prioridades.

Definición de Problemas

Mientras trabajas en problemas de accesibilidad, siempre trata de crear un ticket por problema con un título claro. Esto debería simplificar la comprensión del problema y ayudar a definir una prioridad.

Mal ejemplo: El usuario no puede utilizar el teclado en la página.

Buen ejemplo: No se puede usar la navegación por teclado en el menú principal.

El mal ejemplo conduce a un caso que será bastante difícil de cerrar en poco tiempo. Los debates sobre varios temas podrían comenzar en la sección de comentarios, ya que el título del ticket es demasiado genérico.

El buen ejemplo apunta exactamente al problema y se centra sólo en una cosa: la navegación por teclado en el menú principal.

Priorizar los Problemas de Accesibilidad Web

Las prioridades son importantes porque definen qué problemas deben ser arreglados primero. Por ejemplo, las WCAG están divididas por tres niveles de conformidad: A, AA, AAA, lo que significa que debe comenzar desde un nivel mínimo A, pero eso no significa automáticamente que los niveles AA y AAA son exclusivamente “agradables de tener”. Todos los niveles son importantes, y es importante no priorizar asumiendo que el nivel A es suficiente.

Sin embargo, los niveles de WCAG (o cualquier otra guía) pueden ser bastante difíciles de entender a veces y para simplificar un poco, también puedes considerar las siguientes definiciones de prioridad:

  • Crítico - Problemas que impiden a los usuarios usar una aplicación. No hay soluciones disponibles.

  • Mayor - Problemas que dificultan y/o desorientan el uso de una aplicación, pero no bloquean la capacidad del usuario para completar la operación.

  • Menor - Cuestiones que son molestas, pero no dificultan el uso, o mejoras que se podrían hacer a la aplicación.

  • Info - No se adhiere a las mejores prácticas. Recomendaciones generales para mejoras.

Soluciones

Ninguna de las directrices—con esto me refiero a WCAG, Sección 508 o ADA —te dará una solución directa en términos de código técnico para saber cómo un problema en específico debe ser resuelto. Sólo definen el comportamiento esperado. Sin embargo, WCAG también ha definido los procedimientos de prueba que ayudan a entender cómo reproducir el problema y hay un grupo de comunidad de Monitoreo Automatizado de WCAG, una comunidad W3C con un enfoque en el desarrollo de reglas fiables, para las pruebas de accesibilidad web, tanto automatizadas como semi-automatizadas.

Un ejemplo para la técnica WCAG G4 (“Permitir que el contenido se detenga y reinicie desde donde se detuvo”):

Procedimiento de Prueba

En una página con contenido móvil o de desplazamiento,

  1. Utiliza el mecanismo proporcionado en la página web o por el agente de usuario para pausar el contenido en movimiento o desplazamiento.
  2. Comprueba que el movimiento o desplazamiento se ha detenido y no se reinicia por sí mismo.
  3. Utiliza el mecanismo proporcionado para reiniciar el contenido en movimiento.
  4. Comprueba que el movimiento o desplazamiento se ha reanudado desde el punto en que se detuvo.

Resultados Previstos

No. 2 y No. 4 son verdaderas.

Como podemos ver, no hay soluciones técnicas, pero se define el comportamiento esperado. Cómo los desarrolladores web lo implementan, depende totalmente de ellos.

Pautas de Accesibilidad Web y Normas W3C

Seguir los estándares web básicos debe ser tu punto de partida:

Pruebas de Accesibilidad Web: ¿Cómo sé si mi contenido es accesible o no?

Aquí hay puntos de control básicos y fundamentales que deberían ayudarte a hacer que tu contenido web sea más accesible desde el primer paso:

  • Valida tu HTML. Asegúrate de que la estructura HTML no tenga errores, ya que las tecnologías de asistencia pueden tener problemas para interpretar el contenido de la página.

  • Prueba con sólo el teclado. Asegúrate de que todos los elementos ejecutables son accesibles utilizando sólo el teclado. Además, debes ser capaz de realizar todas las acciones utilizando un teclado, por ejemplo, enviar un formulario.

  • Prueba con herramientas de validación de accesibilidad y validadores. Utiliza herramientas que analicen y verifiquen posibles errores de accesibilidad.

  • Contenido dinámico. Notificar a los lectores de pantalla acerca de los cambios dinámicos, ej. cuando los resultados de la búsqueda han cambiado.

  • No confíes en los colores para describir el significado. Utiliza el color junto con la descripción, ej. Advertencia de [caja amarilla].

No elimines el delineado en foco. Ésta es una característica comúnmente eliminada usando la propiedad CSS outline: 0; No hagas eso, ya que los usuarios del teclado perderán la orientación en la página. Puedes considerar la posibilidad de eliminar el esquema de enfoque para los usuarios que no son de teclado, pero siempre proporciona un esquema de enfoque para los usuarios de teclado.

  • Mensajes de error. Siempre indica al usuario cómo corregir un error. No te limites a indicar que los datos no son válidos.

  • Orden de tabulación. Asegúrate de que la navegación basada en tablas sigue las convenciones establecidas en la interfaz gráfica de usuario. Como mínimo, debe seguir la dirección de lectura del idioma predeterminado de la aplicación. En inglés, por ejemplo, el orden de lectura es de arriba a abajo, de izquierda a derecha; en árabe es de arriba a abajo, de derecha a izquierda.

  • Zoom. Asegúrate de que el contenido de la página sigue siendo legible mientras se amplía el texto hasta un 200%.

  • Deshabilita las imágenes. ¿Aún puedes utilizar la página de una manera cómoda? ¿Existen textos alternativos para todas las imágenes?

  • Lector de pantalla Comprueba si puedes leer y navegar a través del contenido utilizando al menos un lector de pantalla, por ejemplo, VoiceOver, Windows Narrator o NVDA.

  • Modo de alto contraste. Comprueba si el contenido sigue siendo legible mientras cambias al modo de alto contraste.

  • Tamaño de la fuente. Asegúrate de que el tamaño de la fuente en la página tenga un tamaño no inferior a 10px.

4. Errores Comunes en la Accesibilidad Web

El error más común es no identificar los requisitos de accesibilidad antes del desarrollo. Desafortunadamente, la accesibilidad posterior será una parte del desarrollo, lo más difícil será implementar soluciones.

Esta es una lista con algunos de los errores más comunes que los desarrolladores cometen al implementar la accesibilidad:

  • No hay capacidad para navegar a través del contenido utilizando sólo un teclado.

  • Uso incorrecto de la propiedad de esquema CSS En la mayoría de los casos, se utiliza outline: 0;, lo que significa que el delineado alrededor de cada elemento procesable ya no es visible. **No utilices outline: 0; o outline: 0! Important; **. El usuario perderá la capacidad de ver el elemento enfocado actualmente mientras navega a través del contenido, a menos que haya otra alternativa, por ejemplo, usar la propiedad CSS border.

  • Perdiendo foco del elemento actual, por ejemplo, debido a manipulaciones de DOM o el uso del método blur(). Esto sucede a menudo para aplicaciones de una sola página.

  • No hay notificaciones para los usuarios de lectores de pantalla de que algo ha cambiado, por ejemplo: se ha descargado el contenido mediante XMLHttpRequest API y se han procesado nuevos cambios en la interfaz de usuario.; pero el usuario no ha sido notificado. Esto sucede a menudo con aplicaciones de una sola página.

  • Selector de fecha inaccesible. En muchos casos, se usan selectores de fecha inaccesibles. Los usuarios no pueden navegar por las opciones del calendario con el teclado.

  • Usando extensiones que pretenden arreglar automáticamente problemas de accesibilidad. Utilízalos cuidadosamente y comprueba los resultados. El mal uso de ellos puede crear más problemas que soluciones.

  • **Añadir al atributo tabindex el elemento con un número de índice de más de 0. **El propósito de usar tabindex con un índice de más de 0 es sobre todo para “corregir” la ruta de navegación. Sin embargo, considera cambiar bastante la estructura HTML para conseguir la trayectoria natural de la navegación. Manipularlo utilizando tabindex puede provocar problemas de mantenimiento, al igual que una ruta de navegación impredecible.

  • Jerarquía de encabezado erróneo. Desafortunadamente, todavía se ve muy a menudo como la jerarquía de encabezado no se construye correctamente, por ejemplo, <h1>, <h5> y <h2>. Los usuarios del lector de pantalla están utilizando encabezados para navegar a través de las secciones y la estructura inadecuada es confusa, ya que es difícil entender el contexto.

  • Falta apoyo de alto contraste. Hay personas que están usando su software en modo de alto contraste. Asegúrate de que tu contenido sea perceptible.

  • Usar una solución CAPTCHA inaccesible. Desafortunadamente, todos los CAPTCHAs conocidos, para mí son inaccesibles o muy difíciles de usar.

  • Demasiadas y/o animaciones no pausables. Reproducción automática de videos, anuncios o carruseles de imágenes pueden distraer.

  • Grandes trozos de texto. Texto que se condensa en un bloque muy grande, sin espacios, comas o puntos. Muy difícil de leer. La división en trozos más pequeños, más párrafos y subtítulos ayuda a organizar mejor el contenido del texto.

  • Problemas de zoom. Asegúrate de que el contenido sigue siendo legible y navegable cuando se amplía hasta un 200%.

  • Depender de los colores. Muy a menudo el estado de un elemento está marcado sólo por un color, por ejemplo, un estado de advertencia está marcado sólo por una viñeta amarilla; este color no se percibe de la misma manera para las personas daltónicas.

  • Pequeños objetivos a los que se pueden hacer click/tocar. Las áreas que se pueden hacer click/tomar son a menudo demasiado pequeñas. Hacerlo más grande permite a los usuarios activarlos más fácilmente.

¿Pero Cómo Puedo Mejorar la Accesibilidad Web?

Definir los problemas es una cosa. La fijación es muy distinta y muy a menudo no es tan fácil como parece. Esto se debe a que las implementaciones de la API de accesibilidad no son constantes, y a veces necesitamos encontrar soluciones o incluso aceptar el hecho de que algo no funcionará cuando tratamos de solucionar el problema.

En términos de herramientas, no hay una sola herramienta que puede comprobar todas las combinaciones posibles, pero como un buen comienzo, estas herramientas deben ayudar:

Siempre ten en cuenta que ninguna herramienta de accesibilidad puede reemplazar la prueba manual, ya que no todos los escenarios pueden automatizarse totalmente, por ejemplo, comprobar la relación de contraste de luminancia en los elementos con position: fixed;.

Concéntrate en problemas que bloquean el uso de tu aplicación, por ejemplo, el usuario no puede navegar a través del menú mediante el teclado.

Por qué es Importante Hacer Accesible el Contenido

Todo el mundo quiere difundir su contenido lo más ampliamente posible. La accesibilidad ayuda en esa área, grandemente, de llegar a una audiencia más grande hasta mejorar la experiencia del usuario para todos estos. Además, la accesibilidad no es sólo para lo que, tradicionalmente, se podría considerar como personas con discapacidades. Ya sea un individuo que está envejeciendo y pasando por los cambios físicos que lo acompañan, alguien corriendo en un día soleado que necesita ajuste de contraste automático en su teléfono, o un padre con las manos llenas de bolsas de compra que quiere enviar un mensaje de texto por voz; la tecnología accesible es la tecnología que todos los usuarios pueden usar de vez en cuando.

Como un beneficio añadido, el efecto positivo es que el contenido accesible que cumple plenamente con las normas WCAG 2.0, es más fácil de rastrear y comprender por los motores de búsqueda, y que puede tener un efecto significativo en la clasificación de un sitio. Por lo tanto, el diseño accesible puede generar tráfico adicional al sitio web.

Por último, aquí hay algunas estadísticas que debes considerar:

  • Más de mil millones de personas en todo el mundo experimentan algún tipo de discapacidad

  • Envejecimiento de la población. Entre 2015 y 2030, se prevé que el número de personas mayores, de 60 años o más, crezca en un 56%, pasando de 901 millones a más de 1.400 millones.

  • El diseño universal es clave. El diseño universal se refiere a un amplio espectro de ideas y prácticas para producir servicios, productos y entornos que son inherentemente accesibles y utilizables por personas de todas las capacidades.

  • Tipos de discapacidades: Hay cinco categorías amplias de discapacidades, incluidas las visuales, la movilidad, el habla, la cognición y la audición.

Todos necesitamos servicios de alta calidad. Entreguémoslos también.

Hire a Toptal expert on this topic.
Hire Now
Cezary Tomczyk

Cezary Tomczyk

Verified Expert in Engineering

Prague, Czech Republic

Member since December 7, 2015

About the author

Cezary’s two decades as a software engineer and project manager have seen him working at Apple, Microsoft, Nokia, and Oracle, among others.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

PREVIOUSLY AT

Infor

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.