Del artículo escrito por CEZARY TOMCZYK Ingeniero en software freelance, miembro de Toptal

La accesibilidad de la Web a menudo se da por concebida por los desarrolladores front-end, y a veces es malinterpretada y por lo tanto mal implementada. Sin embargo, invertir un poco de tiempo extra en ajustes de accesibilidad puede producir muchos beneficios a largo plazo.

El término du jour (De hoy) es accesibilidad web-y según el autor, uno de los aspectos más frecuentemente mal entendidos y mal aplicados del diseño web. La idea errónea común es que la accesibilidad está diseñada únicamente para las personas con discapacidad. En realidad es para cualquier usuario, todo el mundo se beneficia de contenido accesible y la audiencia del sitio aumentará si encuentra un contenido accesible en diferentes plataformas o de diferentes maneras, ya que pueden usar el contenido con menos restricciones.

Construir contenido accesible debe ser parte inherente del trabajo 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.[/vc_column_text][vc_column_text css_animation=”top-to-bottom”]

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

   La accesibilidad Web significa que personas con algún tipo de discapacidad puedan hacer uso de la Web. Por lo que se requiere de un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web (Particularmente sitios web), incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad. La accesibilidad Web debe ser considerada también para cualquier tipo de usuario, sin que tengan algún tipo de discapacidad. Por ejemplo, un principio básico de la accesibilidad Web es la flexibilidad con el objetivo de satisfacer diferentes necesidades, situaciones y preferencias. Esta flexibilidad va a beneficiar a todas aquellas personas que utilizan la Web, incluyendo personas que no tienen ninguna discapacidad pero que, debido a determinadas situaciones, tienen dificultades para acceder a la Web.

   Un contenido accesible es aquel contenido que todos pueden usar. No conocemos todos los aspectos de cómo los usuarios están accediendo a nuestro contenido, de cualquier forma se debe diseñar con la accesibilidad en mente.

   Con respecto a la accesibilidad para personas con algún tipo de discapacidad consideremos los siguientes hechos al pensar en el contenido accesible:

   • Incapacidad de oír bien: 360 millones de personas en todo el mundo tienen discapacidades auditivas. El contenido de audio debe tener transcripciones y el vídeo debe tener subtítulos.
   • Incapacidad de ver bien. Se calcula que 285 millones de personas tienen discapacidades visuales en todo el mundo: 39 millones son ciegos y 246 tienen baja visión. Los usuarios con discapacidades visuales usan lectores de pantalla (Que leen el contenido usando el habla sintetizada), pantallas braille refrescables (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).
   • Afectado por dislexia. Las personas con dislexia encuentran dificultad en la lectura y comprensión del contenido, especialmente, por ejemplo, texto justificado o todas las mayúsculas.
   • Presencia 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 que utilizan ratón, sino también para los usuarios que no pueden utilizar un ratón.
   • Uso de dispositivos móviles. Se debe adaptar el contenido para pantallas pequeñas, y permitir al usuario ampliar o aumentar el tamaño de fuente.

2. Cómo garantizar una buena accesibilidad en la web

   La gente usa formas muy diferentes de navegar y consumir contenido. Hay usuarios que necesitan herramientas de software adicionales que les ayuda a acceder al contenido más fácilmente. Estas herramientas, conocidas como tecnologías de asistencia, van desde lectores de pantalla a pantallas táctiles y punteros de cabeza.

   Sin embargo, su aplicación y la tecnología de asistencia necesitan ir de la mano. No todo lo que está escrito en HTML es completamente comprensible para las tecnologías de asistencia. Con el fin de ayudar a “traducir” el contenido de “lenguaje técnico” a un lenguaje más legible por el usuario, se han creado estándares adicionales de API de accesibilidad

   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 (Asistente de aplicaciones de Internet enriquecidas).

   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 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, secciones y tablas).
   • Proporciona el estado de los widgets (marcado, tiene pop-up, etc.).
   • Proporciona propiedades para arrastrar y soltar que describen los orígenes de arrastrar y soltar objetivos.

[/vc_column_text][vc_custom_heading text=”¿Qué es la accesibilidad en el diseño web?” el_class=”title__heading”][vc_column_text css_animation=”top-to-bottom”]

1. 1. Siempre que se diseñe un contenido, se debe pensar en dos cosas: Cómo será percibido el contenido y cómo será operable. Vamos a examinar algunos ejemplos para ilustrar la accesibilidad en el diseño web.Supongamos que se va a diseñar un elemento desplegable de selección personalizada. Aquí están las cosas a considerar al diseñar el elemento:
      • Marcar diferentes estados: Habilitado, deshabilitado, solo lectura.
      • Marca el elemento cuando recibe el estado de enfoque / hover.
      • Marque cada elemento de opción cuando obtenga el estado de enfoque / hover.
      • Asegúrese de que el contenido sigue siendo legible cuando el texto se amplía hasta un nivel de 200%.
      • Asegúrese de que hay suficiente contraste entre el texto y su fondo. Ayuda a las personas con visión moderadamente baja, y a dispositivos en condiciones extremas de iluminación, por ejemplo, expuestas a la luz solar directa o en una pantalla con bajo brillo, para leer el contenido.

      Otro ejemplo podría ser la selección de un color para describir un estado. Aquí están las cosas a considerar al diseñar una sección donde el usuario será capaz de escoger un color:

      • Hay personas que tienen dificultades para distinguir ciertos colores. Tan verde no significa verde para todos sus visitantes. Para corregirlo, agregue una descripción para cada color que describa el propósito.
      • Marque cada elemento cuando obtenga el estado de enfoque / hover.
      • Asegúrese de que haya suficiente espacio entre los elementos para que cada elemento pueda ser fácilmente activado, por ejemplo, en dispositivos con una ventana de visualización más pequeña.

   2. Pruebas de accesibilidad: ¿Por dónde empezar?

      No hay una sola manera de comprobar y asegúrese de que el contenido web es totalmente accesible. Se necesitan varias técnicas para verificar y solucionar los problemas de accesibilidad. Se puede empezar definiendo problemas, soluciones y prioridades.

      Definición de problemas

      Cuando se trabaje con problemas de accesibilidad, siempre trate 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.

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

      Aquí hay puntos de control básicos y fundamentales que pueden ayudar a hacer que su contenido web sea más accesible desde el primer paso:

      • Valide su HTML. Asegúrese de que la estructura HTML no tiene errores, ya que las tecnologías de asistencia pueden tener problemas para interpretar el contenido de la página.
      • Prueba con un sólo teclado. Asegúrese de que todos los elementos ejecutables son accesibles utilizando sólo el teclado, debe ser capaz de realizar todas las acciones, por ejemplo, enviar un formulario.
      • Pruebe con herramientas y validadores de pruebas de accesibilidad. Utilice herramientas que exploren y verifiquen posibles errores de accesibilidad.
      • Contenido dinámico. Notificar a los lectores de pantalla sobre los cambios dinámicos, p. 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 [caja amarilla].
      • Error de mensajes. Siempre diga al usuario cómo corregir un error. No se limite a indicar que los datos no son válidos.
      • Asegúrese de que la navegación basada en el tabulador 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.
      • Enfocar. Asegúrese de que el contenido de la página sigue siendo legible mientras se amplía el texto hasta un 200%.
      • Desactivar las imágenes. ¿Todavía puedes 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 a través del contenido utilizando al menos un lector de pantalla, por ejemplo, VoiceOver, Windows Narrator o NVDA.
      • Modo de alto contraste. Compruebe si el contenido sigue siendo legible mientras cambia al modo de alto contraste.
      • Tamaño de fuente. Asegúrese de que el tamaño de la fuente en la página tenga un tamaño no inferior a 10px.

Errores comunes en la accesibilidad a la Web

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

1. • No hay capacidad para navegar a través del contenido utilizando sólo un teclado.
   • Mal uso de la propiedad de esquema CSS. En la mayoría de los casos, esbozo: 0, lo que significa que el contorno alrededor de cada elemento accionable ya no es visible. No utilice esquema: 0; o esquema: 0! importante ;. El usuario perderá la capacidad de ver el elemento actualmente enfocado mientras navega a través del contenido, a menos que haya otra alternativa, por ejemplo, utilizando la propiedad CSS de frontera.
   • Perder el foco del elemento actual, por ejemplo, debido a manipulaciones de DOM o utilizando el método de desenfoque (). 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, el contenido se ha descargado mediante XMLHttpRequest API y se han procesado nuevos cambios en la interfaz de usuario, pero no se ha notificado al usuario. Esto sucede a menudo con aplicaciones de una sola página.
   • Selector de fecha inaccesible. En muchos casos, los recolectores de fecha inaccesibles se utilizan. Los usuarios no pueden navegar por las opciones del calendario con el teclado.
   • Uso de extensiones que pretenden solucionar automáticamente problemas de accesibilidad. Utilícese cuidadosamente y compruebe los resultados. El mal uso de ellos puede crear más problemas que soluciones.
   • Agregar al atributo tabindex de 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, considere cambiar bastante la estructura del HTML para conseguir el camino natural de la navegación. Manipularlo utilizando tabindex puede provocar problemas de mantenimiento y una ruta de navegación impredecible.
   • Jerarquía de encabezado errónea. Desafortunadamente, todavía se ve muy a menudo, pero 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 soporte de alto contraste. Hay personas que están utilizando su software en modo de alto contraste. Asegúrese de que su contenido todavía sea perceptible.
   • Uso de una solución CAPTCHA inaccesible. Desafortunadamente, todos los CAPTCHAs conocidos para mí son inaccesibles o muy difíciles de usar.
   • Demasiadas y / o no-pausables animaciones. Reproducción automática de vídeos, anuncios o carruseles de imágenes son muy distractivos.
   • Grandes trozos de texto. Texto condensado 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 con el zoom. Asegúrese de que el contenido sigue siendo legible y navegable cuando se amplía hasta un 200%.
   • Confiar en 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 de color blind.
   • Pequeños objetivos con posibilidad de clic / táctil. Las áreas que se pueden hacer click / tappable son a menudo demasiado pequeñas. Hacerlo más grande permite a los usuarios activarlos más fácilmente.

“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, de llegar a un público más grande para mejorar la experiencia del usuario para todos los usuarios. Por otra parte, la accesibilidad no es sólo para lo que tradicionalmente se podría considerar como personas con discapacidad. 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 compras que quieren enviar un mensaje de texto por voz, accesible tecnología es la tecnología que todos los usuarios pueden usar de vez en cuando.Como ventaja adicional, el efecto positivo es que el contenido accesible que cumple plenamente con las normas 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 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, 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, incluyendo visual, movilidad, habla, cognición y audición.Todos necesitamos servicios de alta calidad.