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 definen la estructura de una página identificando las principales áreas de la misma.

Los landmark roles son:

  • application: declara que una región es una aplicación en lugar de un documento web.
  • 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).
  • search: identifica los elementos que forman la herramienta de búsqueda del sitio.

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 role="navigation" aria-label="Menú principal">
...
</nav>
<nav role="navigation" aria-label="Menú secundario">
...
</nav>

En el ejemplo anterior, un lector de pantalla leerá el texto de la etiqueta aria-label, además de indicar que se trata de un elemento de navegación.

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>

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 sus características.

Ejemplo: atributo aria-label en un botón de cierre.

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

Puedes consultar una lista completa de estados y propiedades en ARIA list of states and properties.