WAI-ARIA
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 semántica adicional.
La recomendación actual es WAI-ARIA 1.1
- Usalo en páginas con actualizaciones de contenido dinámicas, 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 marcado nativo.
-Roles de estructura: Utilizados para describir las distintas estrucutras de organización de una página. (article, toolbar, row, list, etc) -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.
Roles Definen lo que es o hace un elemento. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles https://www.w3.org/TR/wai-aria-1.1/#role_definitions
Propiedades Define las propiedades de los elementos para darles un significado o semántica adicional https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
Estados Especifica las condiciones actuales del elemento, ejemplo aria-disabled="true" https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
aria-busy
Indica si un elemento y su subárbol se están actualizando actualmente.aria-checked
Indica el estado “checked” de checkbox o radio buttons.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 qué elemento actual dentro de un contenedor o conjunto de elementos relacionados.
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
Podemos seleccionar los atributos WAI-ARIA mediante CSS:
div[role="navigation"] { color: blue; background-color: inherit; }