WAI-ARIA

img

WAI-ARIA es una especificaci贸n escrita por la W3C pero no tiene relaci贸n con HTML, se basa en una serie atributos adicionales que a帽aden una semantica adicional.

La recomedaci贸n actual es WAI-ARIA 1.1

  • Usalo en p谩ginas con actualizaciones de contenido din谩micas, o para conocer el estado de controles avazandos (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 marcado nativo.

Hay tres caracter铆sticas principales definidas en la especificaci贸n:

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 que 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 n煤mericos 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

Podemos seleccionar los atributos WAI-ARIA mediante CSS:

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