WAI-ARIA

WAI-ARIA define un conjunto de atributos que contribuyen a que la interacción en la Web sea más accesible.

WAI-ARIA añade información semántica al código HTML. Por ejemplo, en el caso de un menú desplegable, los atributos ARIA indican a las tecnologías asistivas si se encuentra abierto o cerrado.

WAI-ARIA se divide en roles, estados y propiedades.

Roles

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

Existen principalmente dos tipos de roles: landmarks y widgets.

Landmarks

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

Lista de los landmark roles:

• banner: una región con contenido orientado al sitio en general, normalmente es la cabecera de la página.
• complementary: una sección con información complementaria, pero que sigue siendo significativa cuando se separa del contenido 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.
• 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 relevante de la página, que no puede describirse con ningún otro landmark.
• 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’:

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

Widgets

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

Ejemplo: rol alert en un aviso de formulario.

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

Nota: Puedes consultar una lista completa de roles en la especificación WAI-ARIA 1.1.

Estados y propiedades

Los estados describen el estado actual de un elemento de la interfaz. Son atributos dinámicos, ya que dependen de la interacción con el usuario.

Algunos ejemplos de estados son:

• aria-checked: indica el estado de un elemento del tipo checkbox.
• aria-expanded: indica el estado de un elemento desplegable.
• aria-disabled: indica que un elemento no es operable aunque sea perceptible.
• aria-hidden: indica que un elemento está oculto y por tanto no es perceptible.

Las propiedades describen la función o características de un elemento de la interfaz.

Algunos ejemplos de propiedades son:

• aria-label: define una etiqueta para el elemento actual.
• aria-labelledby: identifica a un elemento que etiqueta al elemento actual.
• aria-controls: identifica el elemento cuyos contenidos están controlados por el elemento actual.
• aria-haspopup: indica que el elemento tiene un menú contextual emergente o un submenú.

Nota: Puedes consultar una lista completa de estados y propiedades en la especificación WAI-ARIA 1.1.