Usa etiquetas ARIA para crear descripciones de elementos accesibles
Etiquetas
ARIA proporciona varios mecanismos para agregar etiquetas y descripciones a los elementos. De hecho, ARIA es la única forma de agregar ayuda accesible o texto descriptivo. Veamos las propiedades que usa ARIA para crear etiquetas accesibles.
etiqueta ARIA
aria-label
nos permite especificar una cadena para usarla como etiqueta de accesibilidad.
Esto anula cualquier otro mecanismo de etiquetado nativo, como un elemento label
. Por ejemplo, si un button
tiene contenido de texto y un aria-label
, solo se usará el valor aria-label
.
Puedes usar un atributo aria-label
cuando tienes algún tipo de indicación visual del propósito de un elemento, como un botón que usa un gráfico en lugar de texto, pero aun así necesitas aclarar ese propósito para cualquier persona que no pueda acceder a la indicación visual, como un botón que use solo una imagen para indicar su propósito.
aria-labelledby
aria-labelledby
nos permite especificar el ID de otro elemento del DOM como etiqueta de un elemento.
Es similar a usar un elemento label
, con algunas diferencias clave.
aria-labelledby
se puede usar en cualquier elemento, no solo en elementos etiquetables.- Si bien un elemento
label
se refiere a lo que etiqueta, la relación se revierte en el caso dearia-labelledby
: lo que se etiqueta se refiere a lo que lo etiqueta. - Solo se puede asociar un elemento de etiqueta con un elemento etiquetable, pero
aria-labelledby
puede tomar una lista de IDREFs para componer una etiqueta desde varios elementos. La etiqueta se concatenará en el orden que se proporcione a los IDREFs. - Puedes usar
aria-labelledby
para hacer referencia a elementos que están ocultos y que, de lo contrario, no estarían en el árbol de accesibilidad. Por ejemplo, puedes agregar unspan
oculto junto a un elemento que quieras etiquetar y hacer referencia a eso conaria-labelledby
. - Sin embargo, dado que ARIA solo afecta al árbol de accesibilidad,
aria-labelledby
no te brinda el conocido comportamiento de hacer clic en la etiqueta que obtienes cuando usas un elementolabel
.
Es importante destacar que aria-labelledby
anula todas las demás fuentes de nombres de un elemento. Por ejemplo, si un elemento tiene tanto aria-labelledby
como aria-label
, o bien aria-labelledby
y label
de HTML nativo, la etiqueta aria-labelledby
siempre tiene prioridad.
Relaciones
aria-labelledby
es un ejemplo de un atributo de relación. Un atributo de relación crea una relación semántica entre los elementos de la página, independientemente de su relación con el DOM. En el caso de aria-labelledby
, esa relación es "este elemento etiquetado por ese elemento".
La especificación de ARIA enumera ocho atributos de relación.
Seis de ellos (aria-activedescendant
, aria-controls
, aria-describedby
, aria-labelledby
y aria-owns
) toman una referencia a uno o más elementos para crear un vínculo nuevo entre los elementos de la página. La diferencia en cada caso es lo que significa ese vínculo y cómo se presenta a los usuarios.
aria-propietaria
aria-owns
es una de las relaciones de ARIA más usadas. Este atributo nos permite indicarle a la tecnología de accesibilidad que un elemento separado del DOM debe tratarse como un elemento secundario del elemento actual, o bien reorganizar los elementos secundarios existentes en un orden diferente. Por ejemplo, si un submenú emergente se posiciona visualmente cerca de su menú superior, pero no puede ser un DOM secundario de su elemento superior porque afectaría la presentación visual, puedes usar aria-owns
para presentar el submenú como un elemento secundario del menú superior a un lector de pantalla.
aria-activedescendente
aria-activedescendant
desempeña una función relacionada. Así como el elemento activo de una página es el que está enfocado, configurar el descendiente activo de un elemento nos permite indicarle a la tecnología de accesibilidad que un elemento debe presentarse al usuario como el elemento destacado cuando su elemento superior en realidad tiene el enfoque. Por ejemplo, en un cuadro de lista, es posible que quieras dejar el enfoque de la página en ese contenedor, pero mantener su atributo aria-activedescendant
actualizado en el elemento de lista seleccionado actualmente. Esto hace que la tecnología de asistencia vea el elemento seleccionado actualmente, como si fuera el elemento enfocado.
aria-describe
aria-describedby
brinda una descripción accesible de la misma manera que aria-labelledby
proporciona una etiqueta. Al igual que aria-labelledby
, aria-describedby
puede hacer referencia a elementos que, de otro modo, no son visibles, ya sea que estén ocultos del DOM o de los usuarios de tecnología de accesibilidad. Esta es una técnica útil cuando hay texto explicativo adicional que un usuario puede necesitar, ya sea que se aplique solo a los usuarios de tecnología de accesibilidad o a todos los usuarios.
Un ejemplo común es un campo de entrada de contraseña acompañado de texto descriptivo que explica los requisitos mínimos de contraseña. A diferencia de una etiqueta, esta descripción puede o no presentarse al usuario; puede tener la opción de acceder a ella, o puede aparecer después de toda la otra información o puede ir precedida por otra cosa. Por ejemplo, si el usuario está ingresando información, se reproducirá su entrada y podría interrumpir la descripción del elemento. Por lo tanto, una descripción es una excelente manera de comunicar información complementaria, pero no esencial. No se interpondrá en el camino de la información más crítica, como la función del elemento.
aria-posinset y aria-setsize
Los demás atributos de las relaciones son un poco diferentes y funcionan en conjunto.
aria-posinset
("posición en el conjunto") y aria-setsize
("tamaño del conjunto") se tratan de definir una relación entre elementos del mismo nivel en un conjunto, como una lista.
Cuando el tamaño de un conjunto no se puede determinar según los elementos presentes en el DOM (como cuando se usa la renderización diferida para evitar tener toda una lista grande en el DOM a la vez), aria-setsize
puede especificar el tamaño real del conjunto, y aria-posinset
puede especificar la posición del elemento en el conjunto. Por ejemplo, en un conjunto que podría contener 1,000 elementos, podrías decir que un elemento en particular tiene un aria-posinset
de 857 (aunque aparezca primero en el DOM) y, luego, usar técnicas de HTML dinámicas para garantizar que el usuario pueda explorar la lista completa a pedido.