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.