0Pricing
HTML Academy · Lezione

aria-expanded e aria-controls per i toggle

Creare widget accessibili di divulgazione e accordion con ARIA

aria-expanded e aria-controls per i toggle è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Panoramica del pattern toggle

I controlli toggle (accordion, menu a discesa e menu) hanno bisogno di ARIA per comunicare il proprio stato aperto/chiuso:

  • aria-expanded — indica lo stato aperto/chiuso di un controllo
  • aria-controls — collega il controllo all'elemento che controlla

aria-expanded

aria-expanded comunica se un elemento controllato è espanso o compresso:

<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 fa riferimento all'id dell'elemento controllato:

<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' -->

Pattern accordion

Accordion accessibile 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>

Pattern per i menu a discesa

Menu a discesa di navigazione accessibile:

<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 segnala che l'attivazione del controllo aprirà un popup:

<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 -->

Integrazione ARIA per Details/Summary

Gli elementi nativi details/summary comunicano già lo stato di espansione: non è necessaria 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 per lo stato aria-expanded

Usate aria-expanded come gancio 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);
}

Requisiti da tastiera per i toggle

I componenti toggle devono supportare l'interazione da tastiera:

  • Invio o Spazio — attivano il pulsante toggle
  • Esc — chiude un menu a discesa o un menu
  • Tasti freccia — consentono di spostarsi all'interno di un menu aperto

Gestione del focus dopo un toggle

Dopo aver attivato o disattivato il contenuto, gestite il focus in modo appropriato:

// 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();
  }
});

Considerazioni per dispositivi mobili

Componenti toggle sui dispositivi mobili:

  • Le aree attivabili tramite tocco devono essere di almeno 44×44px (WCAG 2.5.5)
  • aria-expanded è supportato dai lettori di schermo mobili (iOS VoiceOver, Android TalkBack)
  • I gesti di scorrimento non sostituiscono l'attivazione tramite tastiera o pulsante

Verifica rapida

Quale valore dovrebbe avere aria-expanded quando la sezione controllata è nascosta?

Riepilogo: aria-expanded e aria-controls

Elementi essenziali di ARIA per i toggle:

  • aria-expanded="true/false" — stato aperto/chiuso del controllo
  • aria-controls="id" — collega il controllo al relativo pannello
  • aria-haspopup — segnala la disponibilità di un popup
  • Aggiornate aria-expanded a ogni attivazione o disattivazione
  • Spostate il focus nel menu aperto; alla chiusura, riportatelo al relativo elemento di attivazione

Domande Frequenti

La lezione «aria-expanded e aria-controls per i toggle» è gratuita?

Sì — il testo completo di «aria-expanded e aria-controls per i toggle» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «aria-expanded e aria-controls per i toggle»?

Creare widget accessibili di divulgazione e accordion con ARIA Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «aria-expanded e aria-controls per i toggle»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. aria-expanded e aria-controls per i toggle
  2. aria-selected e pattern delle schede
  3. Regioni live: aria-live aria-atomic aria-relevant
  4. Test con gli screen reader
← Torna a HTML Academy