Es posible que ya conozcas estados y propiedades de algunas WAI-ARIA que se pueden escribir directamente en el HTML de una página web (por ejemplo, propiedades y puntos de referencia).
Otros deben actualizarse dinámicamente en función de la entrada o el contexto del usuario (por ejemplo, estados y algunas propiedades).
Algunos de los atributos WAI-ARIA estáticos que probablemente utilizará se enumeran a continuación, con sus descripciones del W3C.
Propiedades estáticas globales
- aria-describedby : identifica el elemento (o elementos) que describen al elemento actual.
- aria-labelledby : identifica el elemento (o elementos) que etiqueta el elemento actual.
- aria-label : define una etiqueta para elemento actual.
- aria-controls : Identifica el elemento (o elementos) cuyo contenido o presencia son controlados por el elemento actual.
- aria-owns : identifica un elemento (o elementos) para definir una relación padre / hijo visual, funcional o contextual entre elementos DOM donde la jerarquía DOM no se puede utilizar para representar la relación.
- aria-details : identifica el elemento que proporciona una descripción detallada y ampliada del objeto.
A continuación se muestra un ejemplo de algunos de estos atributos en acción. Aunque este ejemplo necesitaría algunas secuencias javascript para manejar la apertura y el cierre del submenú, y actualizar dinámicamente aria-expanded a falso cuando el submenú está cerrado, y actualizar el elemento activo al que se hace referencia aria-activedescendant , puede tener una idea que se está aplicando para que el submenú tenga sentido semántico.
Examine el siguiente cuadro de código, a modo de ejemplo de un menú de aplicación (sin funcionalidad), para comprender qué WAI-ARIA se está utilizando y validar luego la salida con un lector de pantalla.
<div id="chooser">
Utilice este menú para ver nuestros cursos.
</div>
<div id="navhowto">
Utilice la tecla de tabulación para entrar y salir del menú. Use las teclas de flecha para navegar dentro del menú.
</div>
<div id="menu_container" tabindex="0" aria-details="chooser">
<ul role="menubar" aria-activedescendant="cursos" id="offerings" aria-describedby="navhowto" tabindex="0">
<li role="menuitem" id="home">Inicio</li>
<li role="menuitem" aria-haspopup="true" id="cursos">Cursos
<ul role="menu" aria-expanded="true">
<li role="menuitem" id="programacion">Programación</li>
<li role="menuitem" id="marketing">Marketing Digital</li>
</ul>
</li>
</ul>
</div>¿Cómo funciona el marcado anterior?
- Navegando con la tecla Tab, el foco primero va al div menu_container, que se hace enfocable en el teclado con tabindex=“0”.
- Allí, el lector de pantalla lee el contenido del div “chooser”, identificado por aria-details, que describe para qué se utiliza el menú.
- A continuación, la lista de elementos de «ul» reciben foco por tabindex=“0”.
- Allí, el lector de pantalla lee el contenido del div “navhowto”, identificado por aria-describedby, explicando cómo navegar por el menú.
- A continuación, utilizando las teclas de flecha como se indica en el div “navhowto”, el item ‘Inicio’ se enfoca, anunciando «barra de menú ampliada con submenú, Inicio, menú». Probablemente un poco más detallado en este caso de lo necesario.
- Con la tecla de flecha hacia abajo, el foco se mueve al elemento del menú «Cursos», que anuncia «Cursos, menú ampliado con submenú». El aria-haspopup atributo es lo que hace que un lector de pantalla anuncie un submenú. aria-expanded=“true” hace que el lector de pantalla anuncie que el menú está expandido.
- Con la flecha hacia abajo, el foco se mueve al submenú y anuncia «Menú con dos elementos, Programación, elemento de menú 1 de 2». El submenú se anuncia como un menú propio, identificado mediante la adición role=“menu” al «ul» que contiene los dos elementos del submenú.
- Por último, con la flecha hacia abajo, el lector de pantalla anuncia «Marketing Digital, elemento de menú dos de dos».
La mayoría de los elementos WAI-ARIA descritos en la serie de pasos anteriores se pueden usar estáticamente escribiendo los atributos directamente en el HTML.
El aria-activedescendant normalmente se actualizan dinámicamente cuando se seleccionan los menuitems. El aria-expanded también se debe actualizar dinámicamente cambiando entre verdadero y falso cuando el submenú se abre o se cierra.
Aclaraciones importantes: Los roles y atributos ARIA dan exclusivamente sentido semántico a componentes avanzados que de forma nativa no lo tienen (ver reglas ARIA), esto quiere decir que informan a las tecnologías asistivas su rol, estados y propiedades. Por lo tanto, no generan ningún tipo de funcionalidad al interactuar con el elemento y se debe usar JavaScript para hacerlo posible.
Compartimos a continuación algunos atributos más:
Atributos estáticos de widget
- aria-haspopup : indica la disponibilidad y el tipo de elemento emergente interactivo, como menú o diálogo, que puede ser activado por un elemento.
- aria-modal : indica si un elemento es modal cuando se muestra
- aria-readonly : indica que el elemento no es editable pero sí operable.
- aria-required : indica que se requiere la entrada del usuario en el elemento antes de que se pueda enviar un formulario.
Regiones estáticas en vivo (live-regions)
- aria-live: indica que un elemento se actualizará y describe los tipos de actualizaciones que los agentes de usuario, las tecnologías de asistencia y el usuario pueden esperar de la región en vivo.
- aria-atomic: indica si las tecnologías de asistencia presentarán la totalidad o sólo parte de la región modificada según las notificaciones de cambio definidas por el atributo relevante de aria.
- aria-relevant: indica qué notificaciones activará el agente de usuario cuando se modifique el árbol de accesibilidad dentro de una región activa (agregue un elemento, elimite un elemento, etc).
Fuente: Ryerson University | Adaptación: itgrarte fundación y Manuel Razzari