Saltar al contenido principal

WAI-ARIA

WAI-ARIA ↗️ es una especificación escrita por el W3C ↗️, pero no tiene relación con HTML, se basa en una serie atributos y roles adicionales que añaden una semántica adicional.

La recomendación actual es la versión 1.2 de WAI-ARIA ↗️ lanzada el 6 de junio de 2023, aquí te contamos las novedades.

  • Resulta muy útil usar WAI-ARIA en páginas con actualización de contenido dinámico, o para conocer el estado de controles avanzados (widgets), como por ejemplo sliders, carruseles o modales.
  • Nos permite definir el rol que tiene un elemento, indicar sus propiedades y su estado actual.
  • Podemos cambiar dinámicamente las propiedades o el estado de un elemento, pero nunca el rol.
  • Reemplaza elementos HTML, ejemplo: <div role="button"> se comportará como un <button>, aunque siempre se recomienda usar el componente nativo.
Nota

En el W3C recuerdan que es mejor no tener ARIA que usar un ARIA erróneo.

Para los usuarios de lectores de pantalla, ARIA controla la representación de su experiencia no visual, pero un ARIA incorrecto provocará desorientación.

Roles, propiedades y estados​

Roles​

Los roles de wai-aria, definen lo que es o hace un elemento.

  • Roles de estructura: Utilizados para describir las distintas estructuras de organización de una página. (article, toolbar, row, list, etc.)

    W3C WAI-ARIA Roles estructura ↗️

    • application
    • article
    • blockquote
    • caption
    • cell
    • columnheader
    • definition
    • deletion
    • directory
    • document
    • emphasis
    • feed
    • figure
    • generic
    • group
    • heading
    • img
    • insertion
    • list
    • listitem
    • math
    • meter
    • none
    • note
    • paragraph
    • presentation
    • row
    • rowgroup
    • rowheader
    • separator (when not focusable)
    • strong
    • subscript
    • superscript
    • table
    • term
    • time
    • toolbar
    • tooltip

  • Roles abstractos: roles utilizados por el navegador.

  • Roles tipo widget: Definen patrones interactivos comunes, como por ejemplo para un slider, switch, tabs, suelen requerir de código js para modificar su valor.

  • Más información sobre los roles WAI-ARIA en:

Roles de estructura​

Roles Abstractos​

  • command
  • composite
  • input
  • landmark
  • range
  • roletype
  • section
  • sectionhead
  • select
  • structure
  • widget
  • window

Propiedades​

Las propiedades WAI-ARIA se encarga de otorgar a los elementos un significado o semántica adicional

Estados​

Los estados WAI-ARIA especifican las condiciones actuales del elemento, aquí te mostramos algunos de los más utilizados:

  • aria-busy Indica si un elemento y su subárbol se están actualizando actualmente.
  • aria-checked Se usa con en checkbox o radio buttons para indicar si está seleccionado.
  • aria-disabled Indica que el elemento está deshabilitado.
  • aria-expanded Indica si el elemento, u otro elemento del grupo que controla, está actualmente expandido o colapsado.
  • aria-grabbed Indica el estado “agarrado” de un elemento en una operación de drag&drop.
  • aria-hidden Indica que el elemento y todos sus descendientes no son visibles ni perceptibles para ningún usuario.
  • aria-invalid Indica que el valor que se ha rellenado no se ajusta al formato esperado por el campo.
  • aria-pressed Establece o recupera el estado “presionado” de un botón.
  • aria-selected Establece o elimina el estado “selected” del elemento.
  • aria-current Indica cual es el elemento actual dentro de un contenedor o conjunto de elementos relacionados.
  • aria-describedby Enlaza a un elemento para dar más información, se asocia mediante su id.
  • aria-required Indica si se debe completar de forma obligatoria un elemento del formulario.
  • Más información sobre los estados en:
Nota

Recuerda que un rol de ARIA anula el rol inherente de un elemento HTML.

Por ejemplo, en <img role="button">, la etiqueta img será interpretada como un botón y no como una imagen.

Aria-live​

Añadiremos el atributo aria-live para indicar que es una "región viva", es decir, que su contenido se modifica y actualiza dinámicamente. Por ejemplo un listado de "Últimos mensajes", que se actualiza cada 10 segundos automáticamente.

  • aria-live="off" - los cambios no se anunciarán.
  • aria-live="polite" - los cambios se anunciarán al usuario pero sin interrumpirle de su acción actual.
  • aria-live="assertive" - los cambios se anuncian de inmediato, independientemente de lo que el usuario esté haciendo.

El valor por defecto de aria-live es assertive.

Aria-haspopup​

El aria-haspopup indica la disponibilidad y el tipo de elemento emergente interactivo que puede activarse mediante el elemento en el que está configurado el atributo. aria-haspopup ↗️

Tabindex​

En HTML sólo pueden recibir el foco elementos de formulario (input, textarea, select, ... ), enlaces y botones. Para situaciones donde queramos hacer foco en elementos no seleccionables, usaremos el atributo WAI-ARIA tabindex.

  • tabindex="0" Permite que elementos no focusables (div, li, p, ...) puedan recibir el foco.

  • tabindex="-1" Evita que el elemento sea focusable.

Orden de tabulación​

También podemos controlar en qué orden vamos a posicionar el foco en los elementos, independientemente de la posición de estos en la página.

Para ello asignaremos distintos valores numéricos a tabindex, donde tabindex="1" será el primer elemento seleccionado, tabindex="2" el segundo, etc ...


<!-- segundo elemento que recibirá el foco al tabular -->
<div tabindex="2">...</div>

<!-- tercer elemento que recibirá el foco al tabular -->
<div tabindex="3">...</div>

<!-- primer elemento que recibirá el foco al tabular -->
<div tabindex="1">...</div>

Selectores css para WAI-ARIA​

Podemos seleccionar los atributos WAI-ARIA mediante CSS:

div[role="navigation"] { color: blue; background-color: inherit; }