Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ARIA

Mejores prácticas para la implementación de ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility Recipes for Web Apps

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Hoy, para conmemorar el Día Internacional de las Personas con Discapacidad, estamos destacando la accesibilidad aquí en Envato Tuts+.

ARIA es una importante característica que los desarrolladores web pueden usar para ayudar a hacer sus sitios más accesibles. En artículos anteriores hablamos sobre cómo podías implementar ARIA, con independencia de que lo vayas a hacer en un sitio de eCommerce o en sitios web más de tipo nicho.

Hasta ahora, en esta serie nos hemos centrado en cómo implementar ARIA, por ejemplo, cómo añadir un rol a un elemento o cómo codificar formularios más accesibles. En este artículo, el foco está en avanzar hacia otros aspectos de la accesibilidad online, como por qué y cuándo deberíamos usar ARIA. También daremos respuesta a algunas consultas surgidas a lo largo de los anteriores artículos de esta serie.

Venga, ¡empecemos!

¿Qué es ARIA?

Básicamente, ARIA es una extensión de los actuales lenguajes web (principalmente HTML) que nos permite mejorar la accesibilidad para nuestros usuarios finales.

Pero, ¿qué significa esto exactamente?

Extender HTML con ARIA

HTML tiene algunas limitaciones en lo relativo a cómo se definen los elementos y cómo pueden relacionarse unos respecto a otros.

En muchos casos, los elementos HTML (como la etiqueta <div>) están definidos de una forma excesivamente amplia como para ser de utilidad para alguien que esté navegando un sitio web mediante un lector de pantalla, o un elemento podría tener demasiados posibles significados como para ser interpretado (por ej. Una imagen podría ser usada también como botón). ARIA añade atributos adicionales a los elementos HTML para permitirnos definirlos en una capa superior a la actual estructura de código existente, añadiendo claridad cuando la necesitemos.

El segundo mayor beneficio es la relación entre los elementos. Con HTML, cada elemento existe como hijo y/o padre de otro elemento. Pero esta estructura no cubre todas las relaciones semánticas. Esto puede dar lugar a escenarios como el que un controlador y el elemento al que controla no estén claramente vinculados cuando se ubican en distintos contenedores div. Esto es más importante aún en sitios con estructuras complejas o cuando alteramos el DOM mediante JavaScript.

Más allá de estos dos beneficios, existen muchos otros que suelen llamar menos la atención, aunque proporcionan una excelente funcionalidad.

ARIA para una accesibilidad avanzada

Aunque gran parte de la web está promoviendo el avance hacia una experiencia de usuario más sencilla y fácil de usar, ARIA cubre un papel importante para sitios en los que puede que no sea posible simplificar la estructura. Hay situaciones en las que un sitio web podría requerir controles anidados, como los que se usan habitualmente en sistemas de archivos. Al proporcionar una estructura adicional, ARIA logra que estos controles más avanzados estén disponibles para aquellas personas que de otra forma no tendrían acceso a ellos – especialmente para usuarios que quieren crear un sitio con funcionalidad arrastrar y soltar.

Otra capacidad clave es que ARIA no solo extiende el código HTML – también puede usarse para hacer que otras tecnologías menos accesibles estén disponibles para un mayor número de usuarios. Este es el caso con frecuencia de gente que usa AJAX o DHTML para crear sus aplicaciones.

Y realmente, esto es solo rascar en la superficie. Si tienes interés en descubrir más capacidades, atributos, y otros útiles parámetros, échale un vistazo a la visión general de WAI-ARIA.

¿Por qué deberías usar ARIA?

En lo que afecta a la accesibilidad, ARIA se ha convertido en uno de los estándares más ampliamente adoptados, con más de un 25% de los mejores sitios web que lo usan en alguna medida.

El mayor beneficio de la implementación de ARIA es que aumenta la accesibilidad de tu sitio. Los usuarios que emplean lectores de pantalla, tienen visión reducida, o usan interfaces alternativas para la web se benefician increíblemente de su implementación, y en algunos casos, posiblemente no sean capaces de usar un sitio web en toda su extensión sin ella. Muchos ven la accesibilidad como un valor esencial en la web, y como desarrolladores, deberíamos esforzarnos en ofrecerla siempre que sea posible.

Más allá del aspecto de las mejores prácticas, también existe un incentivo desde el punto de vista de un negocio para implementar ARIA. Dado que existen entre un 2 y un 3% de americanos con alguna discapacidad o dificultad visual, hay un gran segmento en la mayoría de los mercados que se beneficiará del uso de este estándar. Además, contar con su implementación te beneficiará ya que su uso se está extendiendo también a otras interfaces web no estándar y en dispositivos como los altavoces inteligentes.

Mejores prácticas en la implementación de ARIA

Hasta ahora, en esta serie nos hemos centrado en los métodos de implementación actuales. Hemos visto los aspectos básicos para implementar ARIA en tu sitio web, veamos ahora algunas pautas para componer tu propia implementación.

Usando un enfoque flexible

Una buena implementación de ARIA no necesita añadir atributos o roles adicionales cada vez que se dé la oportunidad.

Siempre que sea posible, lo ideal es usar la menor cantidad de código adicional para transmitir la información necesaria. Por ejemplo, usar excesivamente ARIA sería similar a hacer que tu página de inicio fuese un completo mapa del sitio para un usuario visual. La gente que usa lectores de pantalla se sentiría abrumada por la cantidad de notificaciones y código adicional de la página que usa ARIA en exceso, consiguiendo al final justo lo contrario a lo que pretendemos.

El objetivo es proporcionar el código suficiente para que el contexto de tus elementos más importantes quede claro, cualquier cosa más allá será con toda probabilidad innecesaria.

Evitar las redundancias (especialmente cuando usamos HTML5)

A lo largo de los anteriores artículos de esta serie, hemos hablado un poco sobre el atributo role. Lo colocábamos en todos los lugares que necesitásemos que el usuario tuviera en cuenta. Sin embargo, existe una importante excepción a esto sobre la que no hemos hablado antes, y es la necesidad de evitar las redundancias.

Cuando un elemento al que quieres añadir ARIA ya se define por sí mismo claramente, entonces puedes saltarte la adición de ARIA. ¿Por qué sucede así? Se debe a que el objetivo de ARIA es complementar el código existente para hacerlo más legible, pero en algunos casos, este ya es lo suficientemente claro, estructurado, y fácil de entender.

Esto le sucede con frecuencia a la gente que usa elementos introducidos por HTML5. Por ejemplo, cuando usamos el elemento <button>, ya no necesitarás añadir en el atributo role="button", el rol ya está definido explícitamente por el código HTML.

Realizar comprobaciones con un lector de pantalla

Otro aspecto crítico en la creación de una buena implementación de ARIA es asegurarte de realizar pruebas con un lector de pantalla o dos. Probablemente te sorprenderás con los detalles de su funcionamiento y de lo fácil que es hacer que, por accidente, el uso de tu sitio web resulte irritante.

Muchos atributos ARIA pueden crear notificaciones o alertas dirigidas al usuario final, y si estás utilizando un área de contenido en vivo de ARIA que cambia cada 10 segundos, es posible que la implementación esté complicando más el uso de su sitio web.

Accesibilidad iterativa para la Web

Cuando añadas medidas de accesibilidad adicionales en tu sitio, es importante recordar que no es una labor de todo o nada. No tienes que aderezar todo tu sitio web por completo en un único intento, las adiciones iterativas probablemente sean la mejor opción.

Empezar con las áreas de contenido y navegaciones principales para luego extenderse por todo el sitio poco a poco es una sólida estrategia, completando más a medida que pase el tiempo. Incluso si programas 15 o 30 minutos cada mes para agregar solo un poco de accesibilidad a tu sitio, será un paso en la dirección correcta.

Una buena experiencia de usuario es buena accesibilidad (y viceversa)

ARIA no es una solución para todos los problemas de accesibilidad. Es crucial centrarse especialmente en diseñar una buena experiencia de usuario (UX), sobre todo en lo referente a la legibilidad del texto, es como otro recurso más de tu caja de herramientas para la accesibilidad.

Si deseas profundizar en los detalles de cómo la experiencia de usuario y el desarrollo (aparte de ARIA) pueden emplearse para mejorar la accesibilidad, echa un vistazo a las Directrices de accesibilidad de contenido web.

También puedes consultar nuestra Completa guía de aprendizaje para la accesibilidad web.

Preguntas frecuentes sobre ARIA

Esta serie sobre ARIA tuvo mucho éxito entre los lectores y provocó debate en la comunidad. ¡Sigamos así! Aumentar la conciencia y mejorar estos tutoriales es la mejor manera de colocar la accesibilidad en primera plana.

Aquí tienes algunas de las preguntas y comentarios más frecuentes que surgieron por la web:

¿Qué navegadores soportan WAI-ARIA?

¡Un montón! La mayoría de los navegadores modernos admiten las características de ARIA hasta cierto punto, aunque esto varía ligeramente de un navegador a otro. Si quieres conocer los detalles de cada navegador, puedes usar una herramienta como Can I Use?

Can I Use ARIA results

¿Se puede usar ARIA con WordPress?

¡Sí! Algunos temas de WordPress ya tienen ARIA integrado, pero puedes agregarlo en cualquier tema en el que puedas editar el código fuente. Además, ¡también puedes usar ARIA con casi cualquier sistema de gestión de contenido!

¿Qué sucede si ARIA no es compatible?

Dado que ARIA no afecta a la representación, ¡nada! En la mayoría de los casos, si un dispositivo no es compatible con ARIA, simplemente se ignorará por completo.

¡Haz de la Web un lugar mejor!

Reuniendo todos los artículos de esta serie juntos, ¡espero que ahora tengas todas las herramientas que necesarias para mejorar la accesibilidad de su sitio!

Si tienes alguna pregunta, comentarios, o una corrección sobre algo que he dicho, por favor, ¡házmelo saber en los comentarios!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.