Introducción a ARIA y semántica de HTML no nativo
Hasta ahora, recomendamos el uso de elementos HTML nativos porque te proporcionan enfoque, compatibilidad con teclado y semántica integrada, pero hay ocasiones en las que un diseño simple y un HTML nativo no bastan. Por ejemplo, actualmente no hay un elemento HTML estandarizado para una construcción de IU muy común, el menú emergente. Tampoco hay un elemento HTML que proporcione una característica semántica como "el usuario necesita saber esto lo antes posible".
En esta lección, exploraremos cómo expresar la semántica que el HTML no puede expresar por sí solo.
La Especificación de aplicaciones de Internet enriquecidas accesibles de la iniciativa de accesibilidad web (WAI-ARIA o solo ARIA) es buena para unir áreas con problemas de accesibilidad que no se pueden administrar con HTML nativo. Funciona permitiéndote especificar atributos que modifican la forma en que un elemento se traduce al árbol de accesibilidad. Veamos un ejemplo.
En el siguiente fragmento, usamos un elemento de la lista como tipo de casilla de verificación personalizada. La clase de "casilla de verificación" de CSS le brinda al elemento las características visuales requeridas.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Si bien esto funciona bien para los usuarios con visión normal, un lector de pantalla no brindará indicación de que el elemento debe ser una casilla de verificación, por lo que los usuarios con visión reducida pueden perderlo por completo.
Sin embargo, con los atributos ARIA, podemos proporcionar al elemento la información faltante para que el lector de pantalla pueda interpretarlo de forma correcta. Aquí, agregamos los atributos role
y aria-checked
para identificar explícitamente el elemento como una casilla de verificación y especificar que está marcada de forma predeterminada. El elemento de la lista se agregará al árbol de accesibilidad y un lector de pantalla lo informará correctamente como casilla de verificación.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA funciona cambiando y mejorando el árbol de accesibilidad del DOM estándar.
![Árbol de accesibilidad del DOM estándar.](https://web.dev/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=6&hl=es)
![El árbol de accesibilidad aumentado de ARIA](https://web.dev/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=6&hl=es)
Aunque ARIA nos permite modificar sutilmente (o radicalmente) el árbol de accesibilidad de cualquier elemento de la página, es lo único que cambia. ARIA no mejora ninguno de los comportamientos inherentes del elemento; no hará que el elemento sea enfocable ni le brindará objetos de escucha de eventos de teclado. Eso sigue siendo parte de nuestra tarea de desarrollo.
Es importante comprender que no es necesario volver a definir la semántica predeterminada. Independientemente de su uso, un elemento HTML <input type="checkbox">
estándar no necesita un atributo ARIA role="checkbox"
adicional para anunciarse correctamente.
También vale la pena señalar que ciertos elementos HTML tienen restricciones sobre qué funciones y atributos de ARIA se pueden usar en ellos. Por ejemplo, a un elemento <input
type="text">
estándar no se le puede aplicar ningún rol o atributo adicional.
Consulta especificaciones de ARIA en HTML para obtener más información.
Veamos qué otras capacidades puede ofrecer ARIA.
¿Qué puede hacer ARIA?
Como viste con el ejemplo de la casilla de verificación, ARIA puede modificar la semántica de los elementos existentes o agregar semántica a los elementos en los que no existe una semántica nativa. También puede expresar patrones semánticos que no existen en HTML, como un menú o un panel de pestañas. A menudo, ARIA nos permite crear elementos tipo widget que no serían posibles con HTML simple.
- Por ejemplo, ARIA puede agregar texto de descripción y etiqueta adicional que solo se expone a las APIs de tecnología de accesibilidad.
<button aria-label="screen reader only label"></button>
- ARIA puede expresar relaciones semánticas entre elementos que extienden la conexión superior/secundaria estándar, como una barra de desplazamiento personalizada que controla una región específica.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Además, ARIA puede hacer que algunas partes de la página estén "vivas", por lo que informan de inmediato a la tecnología de asistencia cuando cambian.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Uno de los aspectos centrales del sistema ARIA es su colección de roles. Una función en términos de accesibilidad se refiere a un indicador abreviado de un patrón de IU particular. ARIA proporciona un vocabulario de patrones que podemos usar a través del atributo role
en cualquier elemento HTML.
Cuando aplicamos role="checkbox"
en el ejemplo anterior, le decíamos a la tecnología de asistencia que el elemento debe seguir el patrón de "casillas de verificación". Es decir, garantizamos que tendrá un estado activado (ya sea marcado o no) y que el estado se pueda activar o desactivar con el mouse o la barra espaciadora, al igual que un elemento de casilla de verificación HTML estándar.
De hecho, debido a que las interacciones del teclado tienen una posición tan destacada en el uso del lector de pantalla, es muy importante asegurarse de que, cuando crees un widget personalizado, el atributo role
siempre se aplique en el mismo lugar que el atributo tabindex
. De esta manera, se garantiza que los eventos del teclado vayan al lugar correcto y que, cuando el enfoque atraiga un elemento, su función se transmita con precisión.
Las especificaciones de ARIA describen una taxonomía de valores posibles para el atributo role
y los atributos ARIA asociados que se pueden usar junto con esos roles. Esta es la mejor fuente de información definitiva sobre cómo los atributos y las funciones de ARIA funcionan juntos y cómo se pueden usar de una manera compatible con los navegadores y las tecnologías de asistencia.
![Una lista de todos los roles de ARIA disponibles.](https://web.dev/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=6&hl=es)
Sin embargo, las especificaciones son densas. Un punto de partida más accesible es el documento de prácticas para autores de ARIA, que explora las prácticas recomendadas para usar las propiedades y los roles de ARIA disponibles.
ARIA también ofrece roles de punto de referencia que extienden las opciones disponibles en HTML5. Consulta las especificaciones de Patrones de diseño de funciones de punto de referencia para obtener más información.