Construyendo una Web Mejor: Una Guía de Accesibilidad para Desarrolladores

Hay mucho revuelo en torno a la accesibilidad web, e Internet está repleto de información sobre este tema. Cuando WebAIM realizó un estudio de los 1 000 000 de sitios web principales, encontró un total de 50 829 406 errores de accesibilidad distintos, lo que representa un promedio de 50,8 errores por página . Los esfuerzos de pruebas de accesibilidad ocurren al final del desarrollo del producto en muchas empresas, pero no en todas. Por lo tanto, al capacitar a los desarrolladores y priorizar la accesibilidad web durante el proceso de desarrollo, la cantidad de errores de accesibilidad se puede reducir significativamente.

Comprender la accesibilidad web

En los términos más simples, la accesibilidad web significa que la web es accesible para personas con discapacidades. Aquí hay un ejemplo para ayudar a comprender mejor: los usuarios ciegos generalmente navegan por la computadora con la ayuda de un lector de pantalla, que es una herramienta de texto a voz que les dicta información en la pantalla. Cuando hace que su sitio web sea accesible, el lector de pantalla puede entregar con éxito esa información al usuario. Si su sitio web es inaccesible, el lector de pantalla entrega información inexacta o incompleta al usuario. En otras palabras, el uso de tecnologías de asistencia, como los lectores de pantalla, solo funciona bien si los sitios web con los que interactúan están diseñados teniendo en cuenta la accesibilidad.

La palabra 'accesible' es diferente de 'utilizable'. Un sitio web puede ser accesible en el sentido de que cumple con los requisitos mínimos para que un sitio web cumpla con la ley, pero aún así podría no tener la experiencia más fácil de usar para las personas con discapacidades. Por lo tanto, es importante al menos intentar hacer un esfuerzo adicional para que su sitio web sea accesible y utilizable para personas con discapacidades. Discutiremos más adelante en este artículo cómo hacerlo.

Cinco formas de incorporar la accesibilidad en su sitio web

• Configure una canalización de accesibilidad automatizada.

  Una de las formas más fáciles y rápidas de comenzar a incorporar la accesibilidad en su aplicación es seguir la filosofía de Shift left , lo que significa que las pruebas de accesibilidad deben comenzar lo antes posible en el proceso de desarrollo y no esperar hasta el último momento. Existen diferentes verificadores de accesibilidad que pueden ayudar a configurar pruebas de accesibilidad automatizadas para su sitio web, que van desde algo que puede ejecutar manualmente en su navegador hasta herramientas que puede integrar en su tubería de CI/CD.

  
  

  Las extensiones de navegador gratuitas incluyen herramientas como OLA y Perspectivas de accesibilidad . Una vez instalados, puede ejecutarlos en cualquier momento en su página web y le mostrarán errores de accesibilidad en su sitio web, desde etiquetas ARIA faltantes para sus formularios hasta problemas de contraste de color. Estas herramientas son una excelente manera de comenzar su viaje de accesibilidad automatizada. Los desarrolladores también pueden usar filtros de código como hacha Accesibilidad Linter para detectar problemas a medida que se codifican en su IDE. Según Deque, Las herramientas automatizadas en este momento detectan el 57 por ciento de los problemas de accesibilidad en comparación con la tasa estimada de la industria del 20 por ciento.

• Aprenda de sus resultados de accesibilidad automatizados.

  Configuró pruebas de accesibilidad automatizadas para su sitio web, eso es genial. Sin embargo, ¿está aprendiendo de los errores de accesibilidad detectados? Por ejemplo, si se encuentra con muchos errores relacionados con etiquetas faltantes para formularios o texto alternativo faltante para imágenes, es importante asegurarse de no seguir repitiendo esos errores en el futuro. Si encuentra muchos problemas de contraste en su sitio web, podría ser una buena idea hablar con su equipo de diseño para evaluar los colores y temas de su sitio web.

  
  

  Otra forma de asegurarse de que no está repitiendo errores simples de accesibilidad es a través de revisiones de código. ¡Asegúrese de buscar código inaccesible durante las revisiones de código! Algunos fáciles de detectar son las etiquetas ARIA faltantes para los elementos que no tienen una etiqueta visible clara, el texto alternativo faltante para las imágenes y los títulos de página faltantes. El uso de herramientas de prueba automatizadas es excelente, pero su eficiencia se puede mejorar aún más si soluciona de manera preventiva los problemas que comúnmente detecta.

  
  

• Navegación con teclado + prueba de lector de pantalla

  Si desea ir un paso más allá de las pruebas de accesibilidad automatizadas, asegúrese de probar su sitio web con un teclado. Todos los elementos interactivos deben ser accesibles a través de las teclas de tabulación, y los elementos como los menús desplegables deben ser accesibles a través de las teclas de flecha. Puede encontrar más información sobre las pulsaciones de teclas adecuadas para varios elementos de la interfaz de usuario aquí: https://webaim.org/techniques/keyboard/

  
  

  Si encuentra que no se puede acceder a algo a través del teclado, pregúntese: ¿Se supone que esto es accesible? No es necesario acceder a elementos como una celda de tabla estática a través de un teclado. Si se trata de un elemento interactivo personalizado que debe ser accesible a través del teclado y no lo es, deberá hacerlo accesible mediante programación. Esto se puede hacer agregando un tabindex de 0, que agregará el elemento al orden de tabulación de la página web, y luego definiendo controladores de eventos como "onKeyPress", que invocará la acción necesaria al presionar una tecla.

  
  

  Por ejemplo, este fragmento de código agrega un tabIndex de 0 al elemento del botón, lo que lo hace enfocable y accesible a través del teclado. El controlador de eventos escucha el evento "keydown" y activa un clic en el botón si se presiona la tecla Intro.

  
  

  <button id="myButton">Click me</button>

   

  const button = document.getElementById("myButton");

  button.tabIndex = 0;

    

  button.addEventListener("keydown", function(event) {

  if (event.key === "Enter") {

  button.click();

  }

  });

  
  

  Si quiere ir un paso más allá, intente usar un lector de pantalla para probar su sitio web. Esta podría ser una buena idea si su sitio web no pasa por ningún proveedor externo de accesibilidad final para la prueba manual. No es necesario que realice pruebas detalladas del lector de pantalla como desarrollador, pero puede intentar navegar por el sitio web con un lector de pantalla. Verifique cosas como si se anuncian las etiquetas apropiadas para los elementos del formulario, si se transmite información redundante, si se puede acceder a la información en una tabla, etc.

  
  

  Windows Narrador y Voiceover para Mac son buenas opciones para lectores de pantalla gratuitos. Los lectores de pantalla se sincronizan con los comandos habituales de navegación del teclado, pero además tienen comandos específicos para navegar por varios elementos de un sitio web. Por ejemplo, para VoiceOver, puede buscar esos comandos aquí: https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts .

  
  

• Familiarícese con algunas herramientas de depuración de accesibilidad.

  Herramientas como el árbol de accesibilidad del navegador pueden ayudarlo a ver los estados de accesibilidad y las propiedades de los elementos de la interfaz de usuario en su sitio web. Esta herramienta es especialmente útil para corregir errores de accesibilidad, ya que puede mostrarle qué propiedades de accesibilidad están expuestas a tecnologías de asistencia, como un lector de pantalla. Para ver el árbol de Accesibilidad en Google Chrome, abra Devtools en su navegador y haga clic en el Panel de Accesibilidad. Esto debería estar al lado del Panel de diseño.

  
  

  Obtenga más información sobre el árbol de accesibilidad aquí:https://developer.chrome.com/blog/full-accessibility-tree/#what-is-the-accessibility-tree

  
  

  Otra herramienta útil que puede usar son los bookmarklets de Paul , que también resaltan las funciones, los estados y las propiedades de los elementos. Esto también funciona en teléfonos móviles. Ambas herramientas son útiles para saber qué información se pasa a las tecnologías de asistencia y, por lo tanto, son extremadamente útiles para corregir cualquier error.

  
  

• Tenga en cuenta una variedad de otras discapacidades

  Además de las pruebas del lector de pantalla y del teclado, que pueden ayudar a las personas ciegas o con discapacidades motoras, también debe considerar adaptarse a las necesidades de las personas con otras discapacidades. Si su sitio web tiene videos, asegúrese de incluir subtítulos precisos en ellos. Para las personas con discapacidades cognitivas, las WCAG tienen una excelente guía sobre cómo hacer que el contenido sea accesible para ellas. Considere también otras discapacidades como el daltonismo. El analizador de contraste de color de TPGi tiene un simulador de daltonismo , que puede ser una excelente herramienta para asegurarse de que su sitio web esté utilizando colores y temas accesibles.

  
  

  Finalmente, si su sitio web tiene una función personalizada de conversión de voz a texto, asegúrese de que sea accesible para alguien con discapacidades del habla. Una forma de hacerlo puede ser proporcionar un tiempo razonable para que las personas con trastornos del habla terminen lo que tienen que decir.

Conclusión

La accesibilidad digital es importante para que los mil millones de personas con discapacidad en este planeta puedan tener un acceso equitativo a la web. Mirando el estado actual de la accesibilidad digital, es posible que no lo estemos haciendo muy bien. De acuerdo a un informe reciente de UsableNet , “2022 marcó otro año de más de 4,000 demandas [de accesibilidad]”. Usando algunas de las estrategias descritas anteriormente, los desarrolladores pueden integrar la accesibilidad en el proceso de desarrollo y detectar y corregir tantos errores como sea posible antes de que alguien tenga una experiencia frustrante.