aria-expanded

Cuándo utilizarlo

En cualquier control que abre y cierra otra región de la interfaz: un encabezado de acordeón, un botón de divulgación «ver más», un desencadenador de combobox, un botón de menú, un treeitem con elementos secundarios, o un botón de navegación hamburguesa. El control permanece como el mismo elemento en ambos estados — solo cambia el valor del atributo.

Si el control alterna el estado en el propio elemento (silenciar / activar sonido, seguir / dejar de seguir), utilice aria-pressed en su lugar. aria-expanded describe una relación con otra región, normalmente identificada mediante aria-controls.

El rol determina si aria-expanded es significativo: se admite en button, combobox, link, tab, treeitem, menuitem, gridcell, row y algunos otros. Colocarlo en un <div> sin rol no tiene ningún efecto útil.

Cómo mantenerlo sincronizado

Los valores válidos son "true" (región abierta) y "false" (región cerrada). El valor predeterminado si se omite es «sin estado expandido» — lo cual es diferente de "false". Si su control puede expandirse en algún momento, renderice aria-expanded="false" en el estado cerrado en lugar de omitirlo.

Actualice el atributo en la misma ruta de código que anima la región abriéndose o cerrándose. El atributo es la fuente de verdad que leen los lectores de pantalla; el ícono de flecha es una señal secundaria para los usuarios con visión.

Combínelo con aria-controls="<region-id>" para que el lector de pantalla pueda anunciar la relación: «Filtros, botón, contraído, controla filter-panel». Algunas tecnologías de asistencia ofrecen un atajo para saltar a la región controlada.

Fallos frecuentes

• Alternar una clase CSS en el panel pero olvidar cambiar aria-expanded.
• Usar aria-expanded en un elemento no interactivo sin rol. El atributo es ignorado.
• Agregar solo aria-expanded="true" — sin renderizar nunca el estado "false". Los lectores de pantalla no anuncian nada en el estado cerrado.
• Usar aria-expanded en un control que en realidad no expande una región (un botón «Enviar»).
• Confundir aria-expanded con aria-pressed en botones de alternancia que no abren una región separada.
• Omitir aria-controls, dejando implícita la relación entre el desencadenador y el panel.

Ejemplo

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filtros
</button>

<div id="filters-panel" hidden>
  <!-- controles de filtro -->
</div>