Tutorial HTML: Atributos de ARIA

Los Atributos de ARIA (Accessible Rich Internet Applications) en HTML son una serie de características especiales que pueden ser añadidas a cualquier marcado con el objetivo de mejorar la accesibilidad. Estos atributos proporcionan información adicional acerca de los widgets, estructuras y comportamientos de una interfaz para facilitar la interacción de las personas con discapacidad.

ARIA consta de tres características principales: roles, estados y propiedades.

• Los roles definen qué tipo de widget es un elemento (como 'botón', 'barra de progreso') o la estructura de la página (como 'navegación', 'banner').
• Las propiedades definen las características que son esenciales para el comportamiento o el significado de un elemento pero que no pueden determinarse a partir de la semántica HTML nativa (como 'requerido', 'posee elementos emergentes').
• Los estados son como las propiedades, pero su valor puede cambiar debido a la interacción del usuario (como 'seleccionado', 'desactivado').

A continuación se proporciona un ejemplo de cómo estos atributos podrían ser utilizados en un menú de navegación:

<nav role="navigation">
  <ul role="menubar">
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      Archivo
      <ul role="menu">
        <li role="menuitem">Nuevo</li>
        <li role="menuitem">Abrir</li>
        <li role="menuitem">Guardar</li>
      </ul>
    </li>
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      Editar
      <ul role="menu">
        <li role="menuitem">Cortar</li>
        <li role="menuitem">Copiar</li>
        <li role="menuitem">Pegar</li>
      </ul>
    </li>
  </ul>
</nav>

En este ejemplo, se ha asignado el rol navigation a la etiqueta <nav> para indicar que se trata de una sección de navegación principal. Los roles de menubar, menu y menuitem se usan para estructurar el menú y sus elementos. Los atributos aria-haspopup y aria-expanded indican que el elemento del menú tiene un submenú y si el submenú está actualmente expandido o no.

Es importante destacar que los atributos ARIA no afectan la funcionalidad básica de los elementos HTML. No hacen que un elemento se comporte de cierta manera; sólo proporcionan información adicional a los lectores de pantalla y otras tecnologías de asistencia. Por lo tanto, siempre es crucial garantizar que la funcionalidad básica de una página web sea accesible sin depender únicamente de ARIA.

Por último, se debe tener en cuenta que el uso inadecuado de ARIA puede obstaculizar en lugar de ayudar a la accesibilidad. Por tanto, siempre se recomienda usar HTML semántico nativo siempre que sea posible, y solo recurrir a ARIA cuando el comportamiento o la información requerida no se puedan lograr de otra manera.