0Pricing
HTML Academy · Leçon

`aria-expanded` et `aria-controls` pour les bascules

Créez des composants d’affichage et des accordéons accessibles avec ARIA.

`aria-expanded` et `aria-controls` pour les bascules est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Vue d’ensemble du modèle de bascule

Les commandes à bascule (accordéons, menus déroulants, menus) ont besoin d’ARIA pour communiquer leur état ouvert ou fermé :

  • aria-expanded — indique l’état ouvert ou fermé d’une commande
  • aria-controls — relie la commande à l’élément qu’elle contrôle

aria-expanded

aria-expanded indique si un élément contrôlé est développé ou réduit :

<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 fait référence à l’identifiant de l’élément contrôlé :

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

Modèle d’accordéon

Accordéon accessible avec 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>

Modèle de menu déroulant

Menu déroulant de navigation accessible :

<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 indique que l’activation de la commande ouvrira une fenêtre contextuelle :

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

Complément ARIA pour details/summary

Les éléments natifs details/summary communiquent déjà l’état d’expansion — aucun attribut ARIA n’est nécessaire :

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

État aria-expanded en CSS

Utilisez aria-expanded comme sélecteur 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);
}

Exigences clavier pour les bascules

Les composants à bascule doivent prendre en charge les interactions au clavier :

  • Entrée ou Espace — activez le bouton de bascule
  • Échap — fermez un menu déroulant ou un menu
  • Touches fléchées — naviguez dans un menu ouvert

Gestion du focus après une bascule

Après avoir basculé le contenu, gérez le focus de manière appropriée :

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

Considérations pour les appareils mobiles

Composants à bascule sur mobile :

  • Les cibles tactiles doivent mesurer au moins 44×44 px (WCAG 2.5.5)
  • aria-expanded est pris en charge par les lecteurs d’écran mobiles (VoiceOver sur iOS, TalkBack sur Android)
  • Les gestes de balayage ne remplacent pas l’activation au clavier ou par bouton

Vérification rapide

Quelle valeur aria-expanded doit-elle avoir lorsque la section contrôlée est masquée ?

Récapitulatif : aria-expanded et aria-controls

Éléments essentiels de l’ARIA pour les bascules :

  • aria-expanded="true/false" — état ouvert ou fermé de la commande
  • aria-controls="id" — relie la commande à son panneau
  • aria-haspopup — indique qu’une fenêtre contextuelle est disponible
  • Mettez à jour aria-expanded à chaque bascule
  • Déplacez le focus dans le menu ouvert ; ramenez-le sur le déclencheur à la fermeture

Questions Fréquemment Posées

La leçon « `aria-expanded` et `aria-controls` pour les bascules » est-elle gratuite ?

Oui — le texte complet de « `aria-expanded` et `aria-controls` pour les bascules » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « `aria-expanded` et `aria-controls` pour les bascules » ?

Créez des composants d’affichage et des accordéons accessibles avec ARIA. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « `aria-expanded` et `aria-controls` pour les bascules » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. `aria-expanded` et `aria-controls` pour les bascules
  2. `aria-selected` et modèles d’onglets
  3. Régions dynamiques : `aria-live`, `aria-atomic`, `aria-relevant`
  4. Tests avec des lecteurs d’écran
← Retour à HTML Academy