0Pricing
HTML Academy · Lezione

aria-selected e pattern delle schede

Implementare interfacce a schede accessibili dalla tastiera

aria-selected e pattern delle schede è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 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 tab

Un'interfaccia a schede ha tre componenti ARIA:

  • role="tablist" — contenitore di tutte le schede
  • role="tab" — singolo pulsante della scheda
  • role="tabpanel" — pannello dei contenuti di ogni scheda

Struttura ARIA delle schede

Markup completo per schede accessibili:

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

aria-selected indica l'elemento attivo corrente in un contesto di selezione:

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

Pattern da tastiera per le schede

I pattern ARIA definiscono comportamenti specifici da tastiera per le schede:

  • Tab — sposta il focus nella tablist, sulla scheda selezionata
  • Tasti freccia — consentono di passare da una scheda all'altra
  • Tab di nuovo — sposta il focus dalla tablist al pannello attivo
  • Home — prima scheda
  • Fine — ultima scheda

Implementazione da tastiera delle schede

Navigazione da tastiera delle schede tramite i tasti freccia:

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

Funzione activateTab

Funzione per cambiare scheda e aggiornare ARIA:

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

Pattern roving tabindex

I gruppi di schede usano roving tabindex per mantenere una sola scheda nell'ordine di tabulazione:

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selected e aria-checked a confronto

aria-selected e aria-checked: contesti diversi:

  • aria-selected — si usa nei widget di selezione: schede, opzioni in una listbox, elementi in un tree
  • aria-checked — si usa negli elementi selezionabili: caselle di controllo, voci di menu con segno di spunta

Focus del tabpanel

Quando una scheda viene attivata, il pannello diventa visibile ma il focus rimane sulla scheda:

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

Attivazione automatica e manuale

Due modelli di attivazione delle schede:

  • Automatica — le schede si attivano mentre l'utente si sposta tra loro con i tasti freccia (esperienza utente più semplice)
  • Manuale — dopo aver usato i tasti freccia, l'utente deve premere Invio/Spazio per attivare la scheda (preferibile quando il caricamento dei contenuti richiede tempo)

Stile accessibile delle schede

CSS per lo stato selezionato delle schede accessibili:

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

Verifica rapida

Come dovrebbe funzionare la navigazione da tastiera all'interno di una tablist?

Riepilogo: aria-selected e schede

Elementi essenziali del pattern delle schede:

  • tablist → tab (aria-selected) → tabpanel (aria-labelledby)
  • I tasti freccia consentono di spostarsi tra le schede; Tab porta al pannello
  • Roving tabindex: solo la scheda attiva ha tabindex=0
  • aria-selected="true" sulla scheda attiva
  • I pannelli inattivi usano l'attributo hidden

Domande Frequenti

La lezione «aria-selected e pattern delle schede» è gratuita?

Sì — il testo completo di «aria-selected e pattern delle schede» è 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-selected e pattern delle schede»?

Implementare interfacce a schede accessibili dalla tastiera 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 2 di 4.

Quanto tempo richiede la lezione «aria-selected e pattern delle schede»?

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