3.2: ¿Qué es WAI-ARIA?

Última actualización
Guardar como PDF

Page ID: 152552

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Definición W3C de WAI-ARIA

“WAI-ARIA proporciona un marco para agregar atributos para identificar características para la interacción del usuario, cómo se relacionan entre sí y su estado actual”.

Fuente: W3C

WAI-ARIA proporciona a los autores web lo siguiente:

Roles para describir el tipo de widget presentado, como “menu”, “treeitem”, “slider” y “progressmeter”
Funciones para describir la estructura de la página web, como encabezados, regiones y tablas (cuadrículas)
Las propiedades para describir los widgets de estado están en, como “marcada” para una casilla de verificación, o “haspopup” para un menú.
Propiedades para definir regiones activas de una página que probablemente obtengan actualizaciones (como cotizaciones de acciones), así como una política de interrupción para esas actualizaciones; por ejemplo, las actualizaciones críticas pueden presentarse en un cuadro de diálogo de alerta y las actualizaciones incidentales ocurren dentro de la página
Propiedades para arrastrar y soltar que describen las fuentes de arrastre y los destinos de caída
Una forma de proporcionar navegación por teclado para los objetos y eventos web, como los mencionados anteriormente

Fuente: W3C

Algunos elementos del marco se pueden usar por sí mismos para agregar accesibilidad al contenido web (por ejemplo, puntos de referencia). Más a menudo, se combinan con secuencias de comandos que se utilizan para agregar o eliminar dinámicamente atributos WAI-ARIA dependiendo del contexto.

WAI-ARIA proporciona semántica para widgets personalizados y aplicaciones web que pueden ser entendidas por tecnologías de asistencia (AT) y transportadas a los usuarios en una forma “humana comprensible”. Por ejemplo, el marcado de lista HTML podría usarse para crear una barra de navegación con menús y submenús. Sin WAI-ARIA un lector de pantalla simplemente reconocería la barra de navegación como una colección de listas anidadas. Agregar atributos de menú WAI-ARIA (por ejemplo, barra de menú, menú, menuitem, aria-haspopup, aria-expanded) puede dar a la lista anidada un significado completamente nuevo, entendiéndose más fácilmente como un medio de navegación de lo que se entendería la lista.

Definición W3C de semántica

“El significado de algo tal como lo entiende un humano, definido de manera que las computadoras puedan procesar una representación de un objeto, como elementos y atributos, y representar de manera confiable al objeto de manera que varios humanos logren un entendimiento mutuamente consistente del objeto.”

Fuente: W3C

Esta definición de semántica en la programación es muy parecida a la definición común de la palabra: “el significado, o una interpretación del significado” (dictionary.com). La semántica en el contexto de la accesibilidad web se refiere a la definición del significado tal como se aplica a los elementos funcionales del contenido web, y cómo esa funcionalidad se trasmite a los usuarios de tecnología de asistencia, especialmente a los usuarios de lectores de pantalla.

Cuándo y cuándo no usar WAI-ARIA

Se supone que WAI-ARIA se usa cuando se requiere semántica para hacer comprensible una aplicación web o widget. Por ejemplo, si estás usando <div>a para crear una casilla de verificación, junto con algunas secuencias de comandos puedes asignarle la “casilla de verificación” del rol WAI-ARIA <div>para que aparezca como una casilla de verificación.

Dicho esto, sin embargo, cuando hay un elemento HTML nativo disponible, como una casilla de verificación, casi siempre es mejor usar la versión nativa que crear la suya propia. La versión nativa ya tendrá toda la semántica asociada por defecto. Dado que las versiones nativas están estandarizadas, es más probable que sean compatibles con todos los navegadores y tecnologías de asistencia.

Para los elementos HTML nativos, no es necesario usar WAI-ARIA. Para un <form>elemento HTML, por ejemplo, no es necesario incluir role="form” con el elemento. Sin embargo, hay algunas excepciones a esta regla. Para algunos de los elementos HTML5 más nuevos, como <nav>y <main>por ejemplo, no está de más incluir el equivalente de WAI-ARIA role="navigation” y role="main” en estos elementos por el momento, para acomodar parte del soporte inconsistente para estos elementos a través de navegadores y AT. Los validadores HTML aún le darán advertencias sobre los roles redundantes, pero puede ignorarlos de manera segura.

También debes tener cuidado al usar WAI-ARIA con elementos HTML que ya tienen semántica. Por ejemplo, si usas <h3 role="button">algo</h3>, se anulará la semántica asociada al encabezado, de esta manera, potencialmente rompiendo la estructura de un documento. En un caso como este, un mejor enfoque sería envolver el encabezado en un <div>entonces asignar role="button” al para <div>preservar la semántica estructural del encabezado, como se ve en los ejemplos a continuación.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.