Saltar al contenido principal

ARIA

ARIA es un conjunto de atributos que contribuyen a que la interacción en la Web sea accesible.

Roles

Un rol es un atributo que nos indica el tipo de objeto de una página y su función.

Existen principalmente dos tipos de roles: los landmark roles, que indican las principales regiones de una página; y los widget roles, que definen elementos de la interfaz.

Landmark roles

Los landmark roles o puntos de referencia, definen la estructura de una página identificando las principales áreas de la misma.

Los landmark roles son:

  • banner: una región con contenido orientado al sitio en general, normalmente es la cabecera de la página e incluye el nombre del sitio.
  • complementary: una sección con información complementaria, pero que sigue siendo significativa cuando se separa de la página principal.
  • contentinfo: contiene información sobre el documento, normalmente es el pie de página.
  • form: contiene una colección de elementos y objetos que se combinan para crear un formulario (en caso de un formulario de búsqueda se usa search).
  • main: indica el contenido principal de una página.
  • navigation: es una colección de elementos de navegación (generalmente enlaces).
  • region: identifica una sección de la página con contenido suficientemente importante como para que los usuarios quieran navegar hasta ella.
  • search: identifica los elementos que forman la herramienta de búsqueda del sitio.

Nota: Las etiquetas estructurales de HTML5 crean automáticamente estos landmark ARIA. La única excepción es search, para la que no existe etiqueta HTML5 específica.

Identifica las áreas que tengan un mismo rol

Cuando en una página existen varias áreas con el mismo rol, es recomendable identificarlas con un título HTML o con una propiedad ARIA.

Ejemplo: Identificación de elementos de navegación con ‘aria-label’.

HTML
<nav aria-label="Menú principal">
...
</nav>
<nav aria-label="Menú secundario">
...
</nav>

Widget roles

Los widget roles proporcionan información semántica sobre los componentes de la interfaz.

Ejemplo: rol alert en un aviso de formulario.

HTML
<h2 role="alert">El formulario no puede ser enviado debido a 2 errores de validación.</h2>

Nota: Puedes consultar una lista completa de widget roles en ARIA Widget Roles.

Estados y propiedades

Además de los roles, la especificación ARIA incluye otros dos tipos de atributos: estados y propiedades.

Los estados describen el estado actual de un elemento de la interfaz, mientras que las propiedades describen su función o características.

Ejemplo: propiedad aria-label con el valor “Cerrar” en un botón.

HTML
<button aria-label="Cerrar" id="myDialog">X</button>

Nota: Puedes consultar una lista completa de estados y propiedades en Definitions of States and Properties.