Tenga en cuenta que WAI-ARIA es anterior a HTML5 y no lo requiere, aunque los atributos ARIA solo se considerarán válidos ya sea por un validador HTML5 o en comparación con un DTD extendido ARIA. Sin embargo, el borrador HTML5 actualmente no permite algunas construcciones WAI-ARIA.
Alohci el
He visto esto en el html de Facebook.
Seleccionador
Respuestas:
213
WAI-ARIA es un soporte que define especificaciones para aplicaciones web accesibles. Define un montón de extensiones de marcado (principalmente como atributos en elementos HTML5), que pueden ser utilizados por el desarrollador de la aplicación web para proporcionar información adicional sobre la semántica de los diversos elementos para tecnologías de asistencia como 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 manera segura sin afectar el funcionalidad de la aplicación web.
Aquí hay un ejemplo de la especificación ARIA:
<ulrole="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><lirole="menuitem"aria-haspopup="true"aria-labelledby="fileLabel"><spanid="fileLabel">File</span><ulrole="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><lirole="menuitem"aria-haspopup="false">New</li><lirole="menuitem"aria-haspopup="false">Open…</li>
...
</ul></li>
...
</ul>
Tenga en cuenta el roleatributo en el <ul>elemento externo . Este atributo no afecta de ninguna manera la forma en que el navegador representa el marcado en la pantalla; sin embargo, los navegadores que admiten ARIA agregarán información de accesibilidad específica del sistema operativo al elemento de interfaz de usuario 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, un mensaje explícito pista de audio "menú") y puede interactuar con él (por ejemplo, navegación por voz).
¿Cuál es la diferencia entre atributo de datos y aria?
JackMahoney
55
ariaes específicamente para accesibilidad, y no debe usarse para almacenar datos aleatorios. dataes para datos aleatorios que la aplicación necesita asociar con el nodo.
Franci Penov
2
Tenga en cuenta: role="menu"y "menuitem"son correctos para APPS (= software con menús como File > Openo Edit > Copy to clipboard. Para un sitio web clásico, probablemente sea mejor permanecer en el habitual <ul>(= lista de roles de forma predeterminada) ya que solo proporciona enlaces a otras páginas web y no funciones como "guardar" o "copiar / pegar". Si está utilizando role="menu", también tiene que agregar soporte para navegar por el menú con las teclas de flecha de su teclado como menús de software / aplicación habituales
Oops D'oh
62
ARIA significa aplicaciones accesibles de Internet enriquecidas.
WAI-ARIA es una tecnología increíblemente poderosa que permite a los desarrolladores describir fácilmente el propósito, el estado y otras funciones 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 se pregunta 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 lo que parece, ARIA se utiliza para tecnologías de asistencia y principalmente para lectura de pantalla.
La mayoría de tus dudas se aclararán si lees este artículo
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í .
ARIA surgió como una forma de abordar el problema de accesibilidad del uso de un lenguaje de marcado destinado a documentos, HTML, para construir interfaces de usuario (UI). HTML incluye una gran cantidad de funciones para manejar documentos (P, h3, UL, TABLE) pero solo elementos básicos de la interfaz de usuario como A, INPUT y BUTTON. Windows y otros sistemas operativos admiten API que permiten que (Tecnología de asistencia) AT acceda a la funcionalidad de los controles de la interfaz de usuario. 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 ampliar los elementos html para proporcionar los ricos. IU necesaria para 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 clics a una imagen. Crea lo que parece ser un botón en el que se puede hacer clic para un usuario del mouse, pero sigue siendo solo una imagen para un usuario de teclado o 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 usan atributos 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, le 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 los enlaces.
Es importante recordar que, en casos simples, se prefiere usar controles HTML nativos y aplicarles estilo en lugar de usar ARIA. Es decir, no reinvente las ruedas o las casillas de verificación, si no es necesario.
Afortunadamente, el marcado ARIA se puede agregar a sitios existentes sin cambiar el comportamiento de los usuarios convencionales. Esto reduce en gran medida el costo de modificar y probar el sitio web o la aplicación.
Hice alguna otra pregunta con respecto a ARIA. Pero su contenido parece más prometedor para esta pregunta. quisiera compartirlos
¿Qué es el 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 el rol y los atributos aria- *. WAI-ARIA (Aplicaciones de Internet enriquecidas accesibles) es un método para proporcionar formas de definir su contenido web dinámico y aplicaciones para que las personas con discapacidad puedan identificarlo e interactuar con éxito con él. Esto se hace a través de roles que definen la estructura del documento o aplicación, o mediante atributos aria- * que definen un rol, relación, estado o propiedad de widget.
Se recomienda el uso de ARIA en las especificaciones para hacer que las aplicaciones HTML5 sean más accesibles. Al usar elementos HTML5 semánticos, debe establecer su función correspondiente.
Pequeña corrección: al utilizar elementos HTML5 semánticos, solo debe establecer su función correspondiente si la semántica del elemento que ha elegido no proporciona suficiente información. En otras palabras, si tiene un elemento nav, no es necesario agregar role = "navigation", porque el rol ya está claro en la elección del elemento. Pero si tiene un elemento de entrada para buscar en el sitio, debe agregar role = "search" porque los elementos de entrada se utilizan para muchas otras cosas además de la búsqueda, y esto marca esa entrada específica como la función de búsqueda.
Respuestas:
WAI-ARIA es un soporte que define especificaciones para aplicaciones web accesibles. Define un montón de extensiones de marcado (principalmente como atributos en elementos HTML5), que pueden ser utilizados por el desarrollador de la aplicación web para proporcionar información adicional sobre la semántica de los diversos elementos para tecnologías de asistencia como 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 manera segura sin afectar el funcionalidad de la aplicación web.
Aquí hay un ejemplo de la especificación ARIA:
Tenga en cuenta el
roleatributo en el<ul>elemento externo . Este atributo no afecta de ninguna manera la forma en que el navegador representa el marcado en la pantalla; sin embargo, los navegadores que admiten ARIA agregarán información de accesibilidad específica del sistema operativo al elemento de interfaz de usuario 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, un mensaje explícito pista de audio "menú") y puede interactuar con él (por ejemplo, navegación por voz).fuente
ariaes específicamente para accesibilidad, y no debe usarse para almacenar datos aleatorios.dataes para datos aleatorios que la aplicación necesita asociar con el nodo.role="menu"y"menuitem"son correctos para APPS (= software con menús comoFile > OpenoEdit > Copy to clipboard. Para un sitio web clásico, probablemente sea mejor permanecer en el habitual<ul>(= lista de roles de forma predeterminada) ya que solo proporciona enlaces a otras páginas web y no funciones como "guardar" o "copiar / pegar". Si está utilizandorole="menu", también tiene que agregar soporte para navegar por el menú con las teclas de flecha de su teclado como menús de software / aplicación habitualesARIA significa aplicaciones accesibles de Internet enriquecidas.
Y si se pregunta qué es WAI-ARIA, es lo mismo.
WAI = Iniciativa de accesibilidad web
Por lo que parece, ARIA se utiliza para tecnologías de asistencia y principalmente para lectura de pantalla.
La mayoría de tus dudas se aclararán si lees este artículo
http://www.w3.org/TR/aria-in-html/
fuente
¿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í .
fuente
¿Qué es el ARIA?
ARIA surgió como una forma de abordar el problema de accesibilidad del uso de un lenguaje de marcado destinado a documentos, HTML, para construir interfaces de usuario (UI). HTML incluye una gran cantidad de funciones para manejar documentos (P, h3, UL, TABLE) pero solo elementos básicos de la interfaz de usuario como A, INPUT y BUTTON. Windows y otros sistemas operativos admiten API que permiten que (Tecnología de asistencia) AT acceda a la funcionalidad de los controles de la interfaz de usuario. 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 ampliar los elementos html para proporcionar los ricos. IU necesaria para 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 clics a una imagen. Crea lo que parece ser un botón en el que se puede hacer clic para un usuario del mouse, pero sigue siendo solo una imagen para un usuario de teclado o 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 usan atributos 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, le 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 los enlaces.
Es importante recordar que, en casos simples, se prefiere usar controles HTML nativos y aplicarles estilo en lugar de usar ARIA. Es decir, no reinvente las ruedas o las casillas de verificación, si no es necesario.
Afortunadamente, el marcado ARIA se puede agregar a sitios existentes sin cambiar el comportamiento de los usuarios convencionales. Esto reduce en gran medida el costo de modificar y probar el sitio web o la aplicación.
fuente
Hice alguna otra pregunta con respecto a ARIA. Pero su contenido parece más prometedor para esta pregunta. quisiera compartirlos
¿Qué es el 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 el rol y los atributos aria- *. WAI-ARIA (Aplicaciones de Internet enriquecidas accesibles) es un método para proporcionar formas de definir su contenido web dinámico y aplicaciones para que las personas con discapacidad puedan identificarlo e interactuar con éxito con él. Esto se hace a través de roles que definen la estructura del documento o aplicación, o mediante atributos aria- * que definen un rol, relación, estado o propiedad de widget.
Se recomienda el uso de ARIA en las especificaciones para hacer que las aplicaciones HTML5 sean más accesibles. Al usar elementos HTML5 semánticos, debe establecer su función correspondiente.
Y mira este video de YouTube para ARIA en vivo.
fuente