Accesibilidad web: por qué a menudo se ignoran los estándares W3C

El término du jour es accesibilidad web , en mi opinión, uno de los aspectos del diseño web más mal entendidos y mal aplicados. El error común es que la accesibilidad está diseñada únicamente para personas discapacitadas. De hecho, todos se benefician del contenido accesible y su audiencia aumentará al obtener acceso a contenido accesible en diferentes plataformas o de diferentes maneras, porque pueden usar su contenido con menos restricciones.

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

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

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

1. ¿Qué significa “diseño accesible”?

El contenido accesible es contenido que todos pueden usar . No conocemos todos los aspectos de cómo los usuarios acceden a nuestro contenido, por lo que debemos diseñar pensando en la accesibilidad con anticipación.

Como destaqué anteriormente, esto no afecta a las personas con discapacidades, que representan alrededor del 15% de la población mundial. En la vida real, los usuarios a menudo terminan sin consumir contenido e interactuar con los dispositivos exactamente de la misma manera que se imaginó durante el desarrollo. El contenido accesible también se requiere por razones legales en muchas jurisdicciones. Lea "Factores legales y de política en el desarrollo de un caso de negocios de accesibilidad web para su organización" para obtener información adicional sobre el cumplimiento de la accesibilidad.

Considere los siguientes escenarios al pensar en el contenido accesible para los usuarios que pueden ser:

• No se puede escuchar 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. Se estima que 285 millones de personas tienen discapacidad visual en todo el mundo: 39 millones son ciegas y 246 tienen baja visión. Los usuarios con discapacidades visuales utilizan lectores de pantalla (que leen el contenido usando voz sintetizada), pantallas braille actualizables (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 alta -modo de contraste.

• Afectado por la dislexia. Las personas con dislexia encuentran dificultad para leer y comprender el contenido, especialmente, por ejemplo, el texto justificado o todo en mayúsculas.

• Sufrir 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 solo para usuarios de mouse, sino también para usuarios que no pueden usar un mouse.

• Uso de dispositivos móviles. Adapta tu contenido para pantallas pequeñas. Permita que el usuario haga zoom o aumente el tamaño de la fuente.

2. Cómo garantizar una buena accesibilidad web

Las personas usan formas muy diferentes de navegar y consumir contenido. Hay usuarios que necesitan el apoyo de herramientas de software adicionales que les ayuden a acceder al contenido más fácilmente. Estas herramientas, conocidas como tecnologías de asistencia, van desde lectores de pantalla hasta pantallas táctiles y punteros de cabeza.

Sin embargo, su aplicación y la tecnología de asistencia necesitan comunicarse entre sí. No todo lo que está escrito en HTML es totalmente comprensible para las tecnologías de asistencia. Para ayudar a "traducir" el contenido del "lenguaje técnico" a un lenguaje más legible por humanos, se han creado estándares API de accesibilidad adicionales.

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

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

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

Este código simple, para las personas que usan el lector de pantalla, no significa mucho. Incluso es engañoso y se lee solo como un enlace con el texto " Eliminar ". Para ayudar a los usuarios a comprender qué tipo de método se usa para realizar la acción, podemos usar los atributos ARIA (Aplicaciones de Internet enriquecidas de asistencia) (especificados en https://www.w3.org/TR/wai-aria/) para anular el rol original. Cambiamos el significado de un enlace a un botón agregando el atributo role="button" . De esa forma, los lectores de pantalla lo leerán como un botón, no como un enlace. Cuál es más apropiado.

En resumen, atributo ARIA:

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

• Garantiza que el contenido dinámico (en vivo) siga siendo accesible.

• Proporciona el rol para describir el tipo de widget 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 una ventana emergente, etc.).

• Proporciona propiedades para arrastrar y colocar que describen orígenes de arrastre y destinos de colocación.

¿Qué es la accesibilidad en el diseño web?

Siempre que diseñes un contenido piensa en dos cosas: cómo se percibe el contenido y cómo se opera . Examinemos algunos ejemplos para ilustrar la accesibilidad en el diseño web.

Supongamos que va a diseñar un elemento desplegable de selección personalizado. Estas son las cosas a considerar al diseñar el elemento:

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

• Marque el elemento cuando obtenga el estado de enfoque/desplazamiento.

• Marque cada elemento de opción cuando obtenga el estado de enfoque/desplazamiento.

• Asegúrese de que el contenido siga siendo legible cuando solo el texto esté ampliado hasta un nivel del 200 %.

• Asegúrese de que haya suficiente contraste entre el texto y su fondo. Ayuda a las personas con visión moderadamente baja o en dispositivos en condiciones de iluminación extremas, por ejemplo, expuestos a la luz solar directa o en una pantalla con poco brillo, para leer el contenido.

Otro ejemplo podría ser seleccionar un color para describir un estado. Estas son las cosas a considerar al diseñar una sección donde el usuario podrá elegir un color:

• Hay personas que tienen dificultad para distinguir ciertos colores. Así que verde no significa verde para todos sus visitantes. Para solucionarlo, agregue una descripción para cada color que describa el propósito.

• Marque cada elemento cuando obtenga el estado de enfoque/desplazamiento.

• Asegúrese de que haya suficiente espacio entre los elementos para que cada elemento se pueda activar fácilmente, por ejemplo, en dispositivos con una ventana de visualización más pequeña.

3. Pruebas de accesibilidad: ¿por dónde empezar?

No hay una sola forma de verificar y asegurarse de que el contenido web sea totalmente accesible. Es necesario utilizar múltiples técnicas para verificar y solucionar los problemas de accesibilidad. Puede comenzar definiendo problemas , soluciones y prioridades .

Definición de problemas

Mientras trabaja en problemas de accesibilidad, siempre intente 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 usar el teclado en la página.

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

El mal ejemplo lleva a un caso que será bastante difícil de cerrar en poco tiempo. Las discusiones sobre múltiples temas también pueden 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 enfoca solo en una cosa: la navegación del teclado en el menú principal.

Priorizar problemas de accesibilidad web

Las prioridades son importantes porque definen qué problemas deben solucionarse primero. Por ejemplo, las WCAG se dividen en 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 sean simplemente "agradables de tener". Todos los niveles son importantes, y es importante no priorizar suponiendo que solo 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 simplificarlo un poco, también puede considerar las siguientes definiciones de prioridad:

• Crítico : problemas que impiden que los usuarios utilicen una aplicación. No hay soluciones disponibles.

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

• Menor : problemas que son molestos pero que no dificultan el uso o mejoras que se pueden realizar en la aplicación.

• Información : no se adhiere a las mejores prácticas. Recomendaciones generales de mejora.

Soluciones

Ninguna de las pautas, me refiero a WCAG, Sección 508 o ADA, le brindará una solución directa en términos de código técnico sobre cómo se debe solucionar un problema específico. Solo definen el comportamiento esperado. Sin embargo, las WCAG también han definido procedimientos de prueba que deberían ayudar a comprender cómo reproducir el problema y existe un grupo comunitario de Monitoreo Automatizado de las WCAG, una comunidad del W3C que se enfoca en desarrollar reglas confiables para las pruebas de accesibilidad web, tanto automatizadas como semiautomáticas.

Un ejemplo de la técnica G4 de las WCAG ("Permitir que el contenido se pause y se reinicie desde donde se pausó"):

Procedimiento de prueba

En una página con contenido en movimiento o desplazable,

1. Use el mecanismo proporcionado en la página web o por el agente de usuario para pausar el contenido en movimiento o desplazamiento.

2. Verifique que el movimiento o desplazamiento se haya detenido y no se reinicie solo.
3. Utilice el mecanismo proporcionado para reiniciar el contenido en movimiento.
4. Compruebe 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 existen soluciones técnicas, sino comportamientos esperados definidos. Cómo los desarrolladores web lo implementan depende de ellos.

Pautas de accesibilidad web y estándares W3C

Seguir los estándares web básicos debería ser su punto de partida:

• La más común son las Directrices de Accesibilidad al Contenido Web conocidas como WCAG. WCAG 2.0 es “un estándar técnico estable y referenciable. Tiene 12 lineamientos que se organizan bajo 4 principios: perceptible, operable, comprensible y robusto. Para cada directriz, existen criterios de éxito comprobables, que se encuentran en tres niveles: A, AA y AAA”.

  

• Técnicas para WCAG 2.0 es una guía completa para autores de contenido web.

• Requisitos de usuario de accesibilidad de medios W3C: este documento presenta los requisitos de accesibilidad que tienen los usuarios con discapacidades con respecto al audio y video en la web.

• Ley de accesibilidad de video y comunicaciones del siglo XXI: la CVAA se divide en dos títulos o secciones generales. El Título I aborda el acceso a las comunicaciones para hacer que los productos y servicios que utilizan la banda ancha sean totalmente accesibles para las personas con discapacidades. El Título II de la ley de accesibilidad abre nuevos caminos para facilitar que las personas con discapacidad vean programación de video en televisión e Internet.

• Sección 508: requisitos de accesibilidad para la tecnología de la información y la comunicación (TIC) que se aplican a todas las agencias federales cuando desarrollan, adquieren, mantienen o utilizan tecnología electrónica y de la información.

• Accesibilidad del sitio web bajo el Título II de la Ley de Estadounidenses con Discapacidades (ADA): allí aprenderá cómo se aplican los requisitos de no discriminación del Título II de la ADA a los sitios web del gobierno estatal y local.

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 ayudarlo a hacer que su contenido web sea más accesible desde el primer paso:

• Valida tu HTML. Asegúrese 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 solo con un teclado. Asegúrese de que todos los elementos procesables sean accesibles usando solo el teclado. Además, también debe poder realizar todas las acciones con un teclado, por ejemplo, enviar un formulario.

• Pruebe con herramientas de prueba de accesibilidad y validadores. Utilice herramientas que escaneen y verifiquen posibles errores de accesibilidad.

• Contenido dinámico. Notifique a los usuarios de lectores de pantalla sobre cambios dinámicos, por ejemplo, cuando los resultados de la búsqueda han cambiado.

• No confíe en los colores para describir el significado. Utilice el color junto con la descripción, por ejemplo, advertencia [recuadro amarillo].

• No elimine el contorno en el foco. Esta es una característica comúnmente eliminada usando el outline: 0; No haga eso, ya que los usuarios del teclado perderán la orientación en la página. Puede considerar eliminar el esquema de enfoque para los usuarios que no usan teclado, pero siempre proporcione un esquema de enfoque para los usuarios de teclado.

• Error de mensajes. Indique siempre al usuario cómo corregir un error. No se limite a decir que los datos no son válidos.

• Orden de tabulación. Asegúrese de que la navegación basada en pestañas siga 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úrese de que el contenido de la página aún sea legible mientras amplía el texto hasta un 200%.

• Apague las imágenes. ¿Aún eres capaz de usar la página de una manera cómoda? ¿Existen textos alternativos para todas las imágenes?

• Lector de pantalla. Pruebe para ver si puede leer y navegar por el contenido utilizando al menos un lector de pantalla, por ejemplo, VoiceOver, Narrador de Windows o NVDA.

• Modo de alto contraste. Verifique si el contenido aún se puede leer mientras cambia al modo de alto contraste.

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

4. Errores comunes en la accesibilidad web

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

Aquí hay una lista con algunos de los errores más comunes que cometen los desarrolladores al implementar la accesibilidad:

• No hay posibilidad de navegar por el contenido usando solo un teclado .

• Mal uso de la propiedad de contorno CSS. En la mayoría de los casos, outline: 0; se utiliza, lo que significa que el contorno alrededor de cada elemento procesable ya no es visible. No utilice outline: 0; o outline: 0 !important; . El usuario perderá la capacidad de ver el elemento enfocado actualmente mientras navega por el contenido, a menos que exista otra alternativa, por ejemplo, usar la propiedad border CSS.

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

• No hay notificaciones para los usuarios de lectores de pantalla de que algo ha cambiado, por ejemplo, el contenido se ha descargado mediante la API XMLHttpRequest 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 utilizan selectores de fechas inaccesibles. Los usuarios no pueden navegar por las opciones del calendario usando el teclado.

• Uso de extensiones que pretenden corregir automáticamente los problemas de accesibilidad . Úsalos con cuidado y comprueba los resultados. El mal uso de ellos puede crear más problemas que soluciones.

• Agregar al atributo tabindex del 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 principalmente para "corregir" la ruta de navegación. Sin embargo, considere cambiar la estructura HTML para obtener la ruta natural de navegación. Manipularlo con tabindex puede provocar problemas de mantenimiento y una ruta de navegación impredecible.

• Jerarquía de encabezados incorrecta. Desafortunadamente, todavía se ve con bastante frecuencia, pero la jerarquía de encabezados no está bien construida, por ejemplo, <h1> , <h5> y <h2> . Los usuarios de lectores de pantalla usan encabezados para navegar por las secciones y la estructura incorrecta es confusa, ya que es difícil entender el contexto.

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

• Usando una solución CAPTCHA inaccesible. Desafortunadamente, todos los CAPTCHA que conozco son inaccesibles o muy difíciles de usar.

• Demasiadas y/o animaciones no pausables. La reproducción automática de videos, anuncios o carruseles de imágenes distrae mucho.

• Grandes fragmentos de texto. Texto condensado en un solo bloque muy grande, sin espacios, comas ni puntos. Muy difícil de leer. Dividir en fragmentos más pequeños, más párrafos y subtítulos ayuda a organizar mejor el contenido del texto.

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

• Confiando en los colores. Muy a menudo, el estado de un elemento se marca solo con un color, por ejemplo, un estado de advertencia se marca solo con una viñeta amarilla; este color no se percibe de la misma manera para las personas daltónicas.

• Pequeños objetivos en los que se puede hacer clic o tocar. Las áreas en las que se puede hacer clic/tocar son a menudo demasiado pequeñas. Hacerlo más grande permite a los usuarios activarlos más fácilmente.

Pero, ¿cómo mejoro la accesibilidad web?

Definir los problemas es una cosa. Arreglarlo es otra 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 consistentes y, a veces, necesitamos encontrar soluciones alternativas o incluso aceptar el hecho de que algo no funcionará en absoluto cuando intentamos solucionar el problema.

En términos de herramientas, no existe una única herramienta que pueda verificar todas las combinaciones posibles, pero como un buen comienzo, estas herramientas deberían ayudar:

• Servicio de validación de marcado W3C: solo para asegurarse de que el contenido HTML no tenga errores. Si la estructura HTML tiene errores, la salida es impredecible y no se puede procesar correctamente, especialmente con diferentes tecnologías de asistencia.

• https://www.w3.org/WAI/ER/tools/: una lista de programas o servicios en línea que lo ayudan a determinar si el contenido web cumple con las pautas de accesibilidad.

• Y mi herramienta, ASLint https://www.aslint.org/, te ayuda a encontrar problemas de accesibilidad.

Tenga siempre en cuenta que ninguna herramienta de accesibilidad puede reemplazar las pruebas manuales , ya que no todos los escenarios pueden automatizarse por completo o en absoluto, por ejemplo, verificar la relación de contraste de luminancia en elementos con position: fixed; .

Concéntrese en los problemas que bloquean el uso de su aplicación, por ejemplo, el usuario no puede navegar por el menú usando el teclado.

Por qué es importante hacer que el contenido sea accesible

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

Como beneficio adicional, el efecto positivo es que el contenido accesible que cumple con los estándares WCAG 2.0 es más fácil de rastrear y comprender para los motores de búsqueda, y eso 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.

Finalmente, aquí hay algunas estadísticas que debe 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 (aquellas de 60 años o más) en el mundo crezca un 56 %, de 901 millones a más de 1400 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, que incluyen discapacidades visuales, de movilidad, del habla, cognitivas y auditivas.

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