0Pricing
HTML Academy · Lección

aria-expanded y aria-controls para controles desplegables

Cree componentes de divulgación y acordeones accesibles con ARIA

aria-expanded y aria-controls para controles desplegables es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Descripción general del patrón de alternancia

Los controles de alternancia (acordeones, menús desplegables y menús) necesitan ARIA para comunicar su estado abierto o cerrado:

  • aria-expanded — indica el estado abierto o cerrado de un control
  • aria-controls — vincula el control con el elemento que controla

aria-expanded

aria-expanded comunica si un elemento controlado está expandido o contraído:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls hace referencia al id del elemento controlado:

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

Patrón de acordeón

Acordeón accesible con aria-expanded:

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

Patrón de menú desplegable

Menú desplegable de navegación accesible:

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup indica que al activar el control se abrirá una ventana emergente:

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

Complemento de ARIA para details/summary

Los elementos nativos details/summary ya comunican el estado de expansión; no necesitan ARIA:

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

CSS para el estado de aria-expanded

Utilice aria-expanded como referencia en CSS:

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

Requisitos de teclado para controles de alternancia

Los componentes de alternancia deben admitir la interacción con el teclado:

  • Enter o Space — activar el botón de alternancia
  • Escape — cerrar un menú desplegable o un menú
  • Teclas de flecha — desplazarse por un menú abierto

Gestión del foco después de alternar

Después de alternar el contenido, gestione el foco adecuadamente:

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

Consideraciones para dispositivos móviles

Componentes de alternancia en dispositivos móviles:

  • Las áreas táctiles deben medir al menos 44×44px (WCAG 2.5.5)
  • aria-expanded es compatible con los lectores de pantalla móviles (iOS VoiceOver y Android TalkBack)
  • Los gestos de deslizamiento no sustituyen la activación mediante el teclado o los botones

Comprobación rápida

¿Qué valor debe tener aria-expanded cuando la sección controlada está oculta?

Resumen: aria-expanded y aria-controls

Aspectos esenciales de ARIA para controles de alternancia:

  • aria-expanded="true/false" — estado abierto o cerrado del control
  • aria-controls="id" — vincula el control con su panel
  • aria-haspopup — indica que hay una ventana emergente disponible
  • Actualice aria-expanded cada vez que alterne el control
  • Mueva el foco al menú abierto y devuélvalo al activador al cerrarlo

Preguntas frecuentes

¿La lección «aria-expanded y aria-controls para controles desplegables» es gratis?

Sí — el texto completo de «aria-expanded y aria-controls para controles desplegables» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «aria-expanded y aria-controls para controles desplegables»?

Cree componentes de divulgación y acordeones accesibles con ARIA Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «aria-expanded y aria-controls para controles desplegables»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. aria-expanded y aria-controls para controles desplegables
  2. aria-selected y patrones de pestañas
  3. Regiones dinámicas: aria-live, aria-atomic y aria-relevant
  4. Pruebas con lectores de pantalla
← Volver a HTML Academy