Etiquetas y relaciones ARIA

Usa etiquetas ARIA para crear descripciones de elementos accesibles

Alicia en el Ayuntamiento
Alice Boxhall
Dave Gash
Dave Gash
Meggin Karney
Meggin Kearney

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.

Uso de aria-label para identificar un botón solo de imagen

aria-labelledby

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

Uso de aria-labelledby para identificar un grupo de botones de selección

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

  1. aria-labelledby se puede usar en cualquier elemento, no solo en 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 desde varios elementos. La etiqueta se concatenará en el orden que se proporcione 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, 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 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 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.

Uso de aria-owns para establecer una relación entre un menú y un submenú

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.

Cómo usar aria-activedescendant para establecer una relación en un cuadro de lista

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.

Uso de aria-describedby para establecer una relación con un campo de contraseña

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.

Uso de aria-posinset y aria-setsize para establecer una relación en una lista