w3school - ¿Qué es HTML5 ARIA?
aria-labelledby bootstrap (5)
¿Qué es HTML5 ARIA? No entiendo cómo implementarlo.
ARIA es sinónimo de aplicaciones de Internet enriquecidas accesibles.
WAI-ARIA es una tecnología increíblemente poderosa que permite a los desarrolladores describir fácilmente el propósito, estado y otra funcionalidad de las interfaces de usuario visualmente ricas, de una manera que puede ser entendida por la Tecnología de Asistencia. WAI-ARIA finalmente se ha integrado en el borrador de trabajo actual de la especificación HTML 5.
Y si te estás preguntando qué es WAI-ARIA, es lo mismo.
Tenga en cuenta que los términos WAI-ARIA y ARIA se refieren a lo mismo. Sin embargo, es más correcto usar WAI-ARIA para reconocer sus orígenes en WAI.
WAI = Iniciativa de Accesibilidad Web
Por su aspecto, ARIA se utiliza para tecnologías de asistencia y sobre todo para la lectura de pantallas.
La mayoría de tus dudas se aclararán si lees este artículo
WAI-ARIA es una especificación que define el soporte para aplicaciones web accesibles. Define un montón de extensiones de marcado (principalmente como atributos en elementos HTML5), que pueden ser utilizadas por el desarrollador de la aplicación web para proporcionar información adicional sobre la semántica de los diversos elementos a tecnologías de asistencia como los lectores de pantalla. Por supuesto, para que ARIA funcione, el agente de usuario HTTP que interpreta el marcado debe ser compatible con ARIA, pero la especificación se crea de tal manera que permita que los agentes de usuario de nivel inferior ignoren el marcado específico de ARIA de forma segura sin afectar el Funcionalidad de la aplicación web.
Aquí hay un ejemplo de la especificación ARIA:
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>
Note el atributo de role en el elemento externo <ul> . Este atributo no afecta de ninguna manera la forma en que el marcador representa la marca en la pantalla; sin embargo, los navegadores que admiten ARIA agregarán información de accesibilidad específica del sistema operativo al elemento UI representado, de modo que el lector de pantalla pueda interpretarlo como un menú y leerlo en voz alta con suficiente contexto para que el usuario final lo comprenda (por ejemplo, una "menú", pista de audio) y es capaz de interactuar con él (por ejemplo, navegación por voz).
¿Qué es ARIA?
ARIA surgió como una forma de abordar el problema de accesibilidad del uso de un lenguaje de marcado destinado a documentos, HTML, para crear interfaces de usuario (UI). HTML incluye una gran cantidad de funciones para tratar con documentos (P, h3, UL, TABLE) pero solo elementos básicos de IU como A, INPUT y BUTTON. Windows y otros sistemas operativos son compatibles con las API que permiten que AT (Tecnología de asistencia) acceda a la funcionalidad de los controles de UI. Internet Explorer y otros navegadores asignan los elementos HTML nativos a la API de accesibilidad, pero los controles html no son tan ricos como los controles comunes en los sistemas operativos de escritorio, y no son suficientes para las aplicaciones web modernas. Los controles personalizados pueden extender los elementos html para proporcionar la riqueza. IU necesaria para las aplicaciones web modernas. Antes de ARIA, el navegador no tenía forma de exponer esta riqueza adicional a la API de accesibilidad o AT. El ejemplo clásico de este problema es agregar un controlador de clic a una imagen. Crea lo que parece ser un botón en el que se puede hacer clic para un usuario del mouse, pero aún es solo una imagen para un teclado o un usuario de AT.
La solución fue crear un conjunto de atributos que permitieran a los desarrolladores extender HTML con semántica de UI. El término ARIA para un grupo de elementos HTML que tienen una funcionalidad personalizada y utiliza los atributos de ARIA para asignar estas funciones a las API de accesibilidad es un "Widget". ARIA también proporciona un medio para que los autores documenten el papel del contenido en sí mismo, lo que a su vez permite a AT construir mecanismos de navegación alternativos para el contenido que son mucho más fáciles de usar que leer el texto completo o solo iterar sobre una lista de enlaces.
Es importante recordar que, en casos simples, es mucho más preferido usar controles HTML nativos y aplicarles un estilo en lugar de usar ARIA. Eso es no reinventar las ruedas, o las casillas de verificación, si no tiene que hacerlo.
Afortunadamente, el marcado ARIA se puede agregar a los sitios existentes sin cambiar el comportamiento de los usuarios principales. Esto reduce en gran medida el costo de modificar y probar el sitio web o la aplicación.
¿Qué es?
WAI-ARIA significa "Iniciativa de accesibilidad web - Aplicaciones de Internet enriquecidas y 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 ir desde algo tan simple como decirle a un lector de pantalla que la activación de un enlace o botón simplemente mostró u ocultó más elementos, a widgets tan complejos como los sistemas de menús completos o vistas de árbol jerárquico.
Esto se logra mediante la aplicación de roles y atributos de estado a HTML 4.01 o una marca 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 un rol de "cuadro de lista". Del mismo modo, otro div que es hijo de ese contenedor div, y que contiene un solo elemento de opción, debería obtener un rol de "opción". Dos divs, pero a través de los roles, significado totalmente diferente. Los roles se modelan después de las contrapartes de aplicaciones de escritorio comúnmente utilizadas.
Una excepción a esto son los roles de hito de documentos, 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 de la esquina son los estados y propiedades de WAI-ARIA. Definen el estado de ciertos elementos nativos o WAI-ARIA, por ejemplo, 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 pretende influir en el comportamiento del navegador. A diferencia de un elemento de botón real, por ejemplo, un div en el que ejerce el rol de "botón" no le proporciona capacidad de enfoque del teclado, un controlador de clic automático cuando se presiona Espacio o Intro, y otras propiedades que son indigenas para un botón. El navegador en sí mismo no sabe que un div con función de "botón" es un botón, solo la parte de la API de accesibilidad.
Como consecuencia, esto significa que absolutamente tiene que implementar la navegación por el teclado, la capacidad de enfoque y otros patrones de comportamiento conocidos desde las aplicaciones de escritorio. Puedes encontrar algunas técnicas avanzadas de ARIA Here .
¿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 uses a menos que sea absolutamente necesario! Cuanto menos WAI-ARIA tenga, y cuanto más pueda contar con el uso de widgets HTML nativos, ¡mejor! Hay algunas reglas más a seguir, puedes consultarlas here .
Me encontré con otra pregunta con respecto a ARIA. Pero su contenido parece más prometedor para esta pregunta. me gustaría compartirlos
¿Qué es ARIA?
Si se esfuerza por hacer que su sitio web sea accesible para los usuarios con una variedad de diferentes hábitos de navegación y discapacidades físicas, es probable que reconozca los atributos de rol y aria- *. WAI-ARIA (Aplicaciones de Internet Ricas Accesibles) es un método para proporcionar formas de definir su contenido web dinámico y aplicaciones para que las personas con discapacidades puedan identificarse e interactuar con éxito. Esto se hace a través de roles que definen la estructura del documento o la aplicación, o a través de los atributos aria- * que definen un rol de widget, relación, estado o propiedad.
Se recomienda el uso de ARIA en las especificaciones para hacer que las aplicaciones HTML5 sean más accesibles. Al utilizar elementos semánticos de HTML5, debe establecer su función correspondiente.