¿Qué es?
WAI-ARIA significa "Iniciativa de Accesibilidad Web - Aplicaciones de Internet enriquecidas accesibles" . Es un conjunto de atributos para ayudar a mejorar la semántica de un sitio web o una aplicación web para ayudar a las tecnologías de asistencia, como los lectores de pantalla para ciegos, a dar sentido a ciertas cosas que no son nativas de HTML. La información expuesta puede variar desde algo tan simple como decirle a un lector de pantalla que la activación de un enlace o botón muestra u oculta más elementos, hasta widgets tan complejos como sistemas de menús completos o vistas de árbol jerárquicas.
Esto se logra mediante la aplicación de roles y atributos de estado a HTML 4.01 o marcado posterior que no tiene relación con el diseño o la funcionalidad del navegador, pero proporciona información adicional para tecnologías de asistencia.
Una piedra angular de WAI-ARIA es el atributo de rol. Le dice al navegador que le diga a la tecnología de asistencia que el elemento HTML utilizado no es realmente lo que sugiere el nombre del elemento, sino algo más. Si bien originalmente es solo un elemento div, este elemento div puede ser el contenedor de una lista de elementos de autocompletar, en cuyo caso sería apropiado utilizar una función de "listbox". Del mismo modo, otro div que sea hijo de ese contenedor y que contenga un único elemento de opción, debería tener el rol de "opción". Dos divs, pero a través de los roles, un significado totalmente diferente. Los roles se modelan según las contrapartes de aplicaciones de escritorio de uso común.
Una excepción a esto son los roles de documentos históricos, que no cambian el significado real del elemento en cuestión, pero proporcionan información sobre este lugar en particular en un documento.
La segunda piedra angular son los estados y propiedades de WAI-ARIA. Definen el estado de ciertos elementos nativos o WAI-ARIA, como si algo se contrae o se expande, se requiere un elemento de formulario, algo tiene un menú emergente adjunto o similar. Estos a menudo son dinámicos y cambian sus valores a lo largo del ciclo de vida de una aplicación web, y generalmente se manipulan a través de JavaScript.
Que no es
WAI-ARIA no tiene la intención de influir en el comportamiento del navegador. A diferencia de un elemento de botón real, por ejemplo, un div en el que vierte el papel de "botón" no le da la capacidad de enfoque del teclado, un controlador de clic automático cuando se presiona la tecla Espacio o Intro, y otras propiedades que son indigenas de un botón. El navegador en sí no sabe que un div con función de "botón" es un botón, solo su porción de API de accesibilidad sí.
Como consecuencia, esto significa que absolutamente debe implementar la navegación por teclado, la capacidad de enfoque y otros patrones de comportamiento conocidos de las aplicaciones de escritorio. Puede encontrar algunas técnicas avanzadas de ARIA aquí .
¿Cuándo no debería usarlo?
Sí, eso es correcto, ¡esta sección es lo primero! Porque la primera regla de usar WAI-ARIA es: ¡ No lo use a menos que sea absolutamente necesario! Cuanto menos WAI-ARIA tenga, y más pueda contar con el uso de widgets HTML nativos, ¡mejor! Hay algunas reglas más a seguir, puedes consultarlas aquí .