Etiquetas y relaciones ARIA

Uso de 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 string para usar como etiqueta accesible. Esto anula cualquier otro mecanismo de etiquetado nativo, como un elemento label. Por ejemplo, si una 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-labeledby

aria-labelledby nos permite especificar el ID de otro elemento del DOM como la etiqueta de un elemento.

Es similar a usar un elemento label, con algunas diferencias clave.

1. aria-labelledby se puede usar en cualquier elemento, no solo en los elementos etiquetables.
2. Si bien un elemento label se refiere a lo que etiqueta, la relación se revierte en el caso de aria-labelledby: lo que se etiqueta se refiere a lo que lo etiqueta.
3. 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 a partir de varios elementos. La etiqueta se concatenará en el orden que se les dé a los IDREFs.
4. 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 un span oculto junto a un elemento que quieras etiquetar y hacer referencia a eso con aria-labelledby.
5. Sin embargo, como ARIA solo afecta al árbol de accesibilidad, aria-labelledby no te brinda el comportamiento conocido de hacer clic en etiquetas que obtienes cuando usas un elemento label.

Es importante destacar que aria-labelledby anula todas las demás fuentes de nombres de un elemento. Por ejemplo, si un elemento tiene aria-labelledby y aria-label, o bien aria-labelledby y label 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 estos, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby y aria-owns, toman una referencia a uno o más elementos para crear un nuevo vínculo 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-propiedad

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 en el DOM se debe tratar como elemento secundario del elemento actual, o bien que se reorganicen los elementos secundarios existentes en un orden diferente. Por ejemplo, si un submenú emergente se ubica visualmente cerca de su menú superior, pero no puede ser un DOM secundario de su superior porque afectaría la presentación visual, puedes usar aria-owns para presentar el submenú como elemento secundario del menú superior a un lector de pantalla.

aria-activedescendiente

aria-activedescendant desempeña una función relacionada. Así como el elemento activo de una página es el que tiene el enfoque, establecer el descendiente activo de un elemento nos permite indicarle a la tecnología de asistencia que un elemento debe presentarse al usuario como el elemento enfocado cuando su elemento superior realmente tiene el foco. Por ejemplo, en un cuadro de lista, es posible que quieras dejar el enfoque de la página en el contenedor del cuadro de lista, pero mantener su atributo aria-activedescendant actualizado al elemento de lista seleccionado actualmente. Esto hace que el elemento seleccionado actualmente le parezca a la tecnología asistencial como si fuera el elemento enfocado.

aria-descritopor

aria-describedby proporciona 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 ocultos del DOM u ocultos 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; este puede tener la opción de acceder a ella, o puede venir después de toda la otra información o puede estar adelantada por otra cosa. Por ejemplo, si el usuario ingresa 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 información más crítica, como el rol del elemento.

aria-posinset y aria-setsize

Los atributos de relación restantes son un poco diferentes y funcionan juntos. 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.