Aria-selected : exemples pratiques pour onglets et listes

<div class="tabs">
  <div role="tablist" aria-label="Informations produit">
    <button
      role="tab"
      id="tab-desc"
      aria-selected="true"
      aria-controls="panel-desc"
      tabindex="0">
      Description
    </button>
    <button
      role="tab"
      id="tab-specs"
      aria-selected="false"
      aria-controls="panel-specs"
      tabindex="-1">
      Caractéristiques
    </button>
    <button
      role="tab"
      id="tab-reviews"
      aria-selected="false"
      aria-controls="panel-reviews"
      tabindex="-1">
      Avis clients
    </button>
  </div>

  <div
    role="tabpanel"
    id="panel-desc"
    aria-labelledby="tab-desc"
    tabindex="0">
    <p>Description détaillée du produit...</p>
  </div>

  <div
    role="tabpanel"
    id="panel-specs"
    aria-labelledby="tab-specs"
    tabindex="0"
    hidden>
    <p>Spécifications techniques...</p>
  </div>

  <div
    role="tabpanel"
    id="panel-reviews"
    aria-labelledby="tab-reviews"
    tabindex="0"
    hidden>
    <p>Avis des clients...</p>
  </div>
</div>

class TabSystem {
  constructor(container) {
    this.tabs = container.querySelectorAll('[role="tab"]');
    this.panels = container.querySelectorAll('[role="tabpanel"]');

    this.tabs.forEach(tab => {
      tab.addEventListener('click', () => this.selectTab(tab));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, tab));
    });
  }

  selectTab(selectedTab) {
    // Désélectionner tous les onglets
    this.tabs.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });

    // Masquer tous les panneaux
    this.panels.forEach(panel => panel.hidden = true);

    // Sélectionner l'onglet actif
    selectedTab.setAttribute('aria-selected', 'true');
    selectedTab.setAttribute('tabindex', '0');
    selectedTab.focus();

    // Afficher le panneau correspondant
    const panelId = selectedTab.getAttribute('aria-controls');
    document.getElementById(panelId).hidden = false;
  }

  handleKeydown(event, currentTab) {
    const index = Array.from(this.tabs).indexOf(currentTab);
    let newIndex;

    switch (event.key) {
      case 'ArrowRight':
        newIndex = (index + 1) % this.tabs.length;
        this.selectTab(this.tabs[newIndex]);
        break;
      case 'ArrowLeft':
        newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
        this.selectTab(this.tabs[newIndex]);
        break;
      case 'Home':
        this.selectTab(this.tabs[0]);
        break;
      case 'End':
        this.selectTab(this.tabs[this.tabs.length - 1]);
        break;
    }
  }
}

<label id="color-label">Couleur préférée</label>
<div
  role="listbox"
  aria-labelledby="color-label"
  tabindex="0">
  <div role="option" id="opt-red" aria-selected="true">Rouge</div>
  <div role="option" id="opt-blue" aria-selected="false">Bleu</div>
  <div role="option" id="opt-green" aria-selected="false">Vert</div>
</div>

<label id="tags-label">Tags (sélection multiple)</label>
<div
  role="listbox"
  aria-labelledby="tags-label"
  aria-multiselectable="true"
  tabindex="0">
  <div role="option" aria-selected="true">Accessibilité</div>
  <div role="option" aria-selected="true">RGAA</div>
  <div role="option" aria-selected="false">Design</div>
  <div role="option" aria-selected="false">Développement</div>
</div>

<table role="grid" aria-label="Liste des utilisateurs">
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Email</th>
      <th scope="col">Rôle</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" aria-selected="true" tabindex="0">
      <td role="gridcell">Marie Dupont</td>
      <td role="gridcell">marie@example.com</td>
      <td role="gridcell">Admin</td>
    </tr>
    <tr role="row" aria-selected="false" tabindex="-1">
      <td role="gridcell">Jean Martin</td>
      <td role="gridcell">jean@example.com</td>
      <td role="gridcell">Éditeur</td>
    </tr>
  </tbody>
</table>

<!-- Navigation : aria-current -->
<nav>
  <a href="/" aria-current="page">Accueil</a>
  <a href="/produits">Produits</a>
</nav>

<!-- Onglets : aria-selected -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>

<!-- Incohérent : aria-selected et tabindex désynchronisés -->
<button role="tab" aria-selected="true" tabindex="-1">Tab 1</button>

<!-- Correct -->
<button role="tab" aria-selected="true" tabindex="0">Tab 1</button>

<!-- Incorrect : div n'est pas un rôle sélectionnable -->
<div aria-selected="true">Option</div>

<!-- Correct : avec le rôle approprié -->
<div role="option" aria-selected="true">Option</div>

<!-- Ambigu : les autres options sont-elles sélectionnables ? -->
<div role="option" aria-selected="true">Option 1</div>
<div role="option">Option 2</div>

<!-- Explicite -->
<div role="option" aria-selected="true">Option 1</div>
<div role="option" aria-selected="false">Option 2</div>

[role="tab"][aria-selected="true"] {
  background: #005fcc;
  color: white;
  border-bottom: 3px solid #003d80;
}

[role="option"][aria-selected="true"]::before {
  content: "✓ ";
}