Índice
- 1 – Introducción
- 2 – El atributo aria-current
- 3 – Ejemplos de uso
- 4 – Cuándo no usar aria-current
- 5 – Conclusiones
1 – Introducción
Es muy típico que, para ubicar al usuario, entre un conjunto de elementos, marquemos uno de ellos como el actual. Por ejemplo, en un calendario, el día de hoy estaría resaltado sobre los demás. De igual forma, en un menú de navegación, la página actual puede quedar indicada de alguna forma para facilitar que el usuario sepa dónde está.
Este tipo de marcado suele hacerse con estilos visuales. Incluso, en ocasiones, se utilizan algunos símbolos e iconos. Aunque esto último puede resultar accesible para algunos perfiles, semánticamente no aportan nada al documento, de forma que no es posible hacer deducciones programáticamente.
En esta píldora vamos a ver el método adecuado para acompañar a los resaltados visuales en estos casos. Como casi siempre que nos adentramos en la semántica de los elementos, WAI-ARIA juega un papel fundamental.
2 – El atributo aria-current
El atributo aria-current indica cuál es el elemento actual dentro de un conjunto de elementos. Por supuesto, esto implica que su interpretación es dependiente del contexto, así que también hay que prestar atención a este punto.
Este atributo acepta los siguientes valores:
- true: Marca el elemento como el actual dentro de un conjunto.
- false: Por defecto. No se marca el elemento como actual.
- page: Marca el elemento, generalmente un enlace, como referencia a la página actual.
- location: Marca un elemento como la ubicación actual dentro de su entorno.
- step: Marca un elemento como el paso actual dentro de un proceso.
- date: Marca un elemento como la fecha actual.
- time: Marca un elemento como la hora actual.
3 – Ejemplos de uso
Aquí os listo algunos ejemplos típicos de uso para cada valor del atributo aria-current :
- page:
- En un menú de navegación primario para marcar la página en la que se encuentra el usuario.
- location:
- En unas breadcrumbs para marcar la ubicación actual.
- En un árbol de contenidos para marcar el tema actual.
- step:
- En un indicador de progreso de un proceso de registro, si se detalla cada paso, para marcar el paso actual.
- En una receta, para marcar el paso actual.
- date:
- En un calendario, para marcar la fecha actual.
- En un calendario, para marcar la fecha de la que se muestran los detalles actualmente.
- time:
- En un horario, para marcar la hora actual.
- En una agenda, para marcar la hora actual.
- En una agenda, para marcar la hora de la que se muestran los detalles actualmente.
- true:
- En una vista master-detail, para marcar el elemento del que se muestran los detalles.
4 – Cuándo no usar aria-current
Hay ocasiones en las que podemos tener problemas para discernir si utilizar el atributo aria-current o no. Por ejemplo, si tenemos una serie de pestañas, una lista seleccionable… ¿Es necesario utilizarlo?
En general, WAI-ARIA define una serie de modelos de componentes para los cuales se utilizan determinados atributos y propiedades. En estos casos, siempre se deben utilizar los atributos definidos por el modelo, como aria-selected, que son más específicos, y no aria-current.
5 – Conclusiones
Debemos procurar que toda la información que transmitamos de forma visual pueda reflejarse de un modo semántico para que las tecnologías de asistencia puedan interpretarla adecuadamente. aria-current es una gran ayuda a la hora de indicarle al usuario cuál es el elemento actual dentro de un conjunto. Incrementará su seguridad acerca del entorno en el que se mueve y mejorará su experiencia.
