HTML Academy · Lezione

role button alert dialog e landmark

Applicare i ruoli ARIA per comunicare lo scopo degli elementi alle tecnologie assistive

role button alert dialog e landmark è 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.

role=button

Utilizzi role="button" quando un elemento diverso da un button deve comportarsi come un pulsante (caso raro):

<span
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="e.key==='Enter'||e.key===' ' ? handleClick() : null"
  aria-pressed="false"
>
  Toggle Feature
</span>
<!-- Better: use a real <button> element! -->
<!-- Only use role="button" when you cannot change the HTML element -->

role=alert

role="alert" annuncia immediatamente agli screen reader le modifiche al contenuto:

<div role="alert" id="error-msg"></div>

<script>
// When injecting an error:
document.getElementById('error-msg').textContent = 'Invalid email address.';
// Screen readers announce this immediately without the user moving focus
// role="alert" implies aria-live="assertive" aria-atomic="true"
</script>

role=dialog

role="dialog" identifica un componente di finestra di dialogo modale:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  id="confirm-dialog"
  tabindex="-1"
>
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p id="dialog-desc">This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

Elemento dialog vs role=dialog

Il moderno HTML5 dispone di un elemento nativo <dialog>:

<dialog id="confirm" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<script>
document.getElementById('confirm').showModal();
</script>
<!-- Native dialog handles focus trap and Escape key automatically -->

Panoramica dei ruoli landmark

I ruoli landmark ARIA organizzano la pagina in aree navigabili:

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
<form role="form" aria-label="Search">...</form>
<section role="region" aria-label="Stats">...</section>
<!-- Note: prefer semantic HTML elements over ARIA roles
     Only add role= when using generic divs/spans -->

Più landmark di navigazione

Quando una pagina contiene più elementi nav, li distingua con aria-label:

<nav aria-label="Primary navigation">
  <ul>...</ul>
</nav>

<nav aria-label="Table of contents">
  <ol>...</ol>
</nav>

<nav aria-label="Footer links">
  <ul>...</ul>
</nav>
<!-- Screen reader landmark list shows: "Primary navigation, navigation"
     "Table of contents, navigation" etc. -->

role=status

role="status" annuncia con discrezione gli aggiornamenti non urgenti:

<!-- Use for: success messages, loading complete, items added -->
<div role="status" aria-live="polite" id="cart-status"></div>

<script>
// When item added to cart:
document.getElementById('cart-status').textContent = '3 items in cart';
// Screen reader announces this when it finishes reading current content
// Less urgent than role="alert"
</script>

role=region

role="region" crea una sezione landmark con nome:

<section
  role="region"
  aria-labelledby="stats-heading"
>
  <h2 id="stats-heading">Site Statistics</h2>
  <dl>...</dl>
</section>
<!-- role="region" only creates a landmark IF it has an accessible name
     Without aria-label or aria-labelledby, it is not a landmark -->

role=search

role="search" identifica la funzionalità di ricerca:

<form role="search" action="/search">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Go</button>
</form>
<!-- role="search" landmark: screen readers list it as "Search, search"
     Users jump directly to the search form -->

role=presentation e none

role="presentation" (alias: role="none") rimuove la semantica da un elemento:

<!-- Table used for layout (bad practice, but if inherited): -->
<table role="presentation">
  <tr><td>Layout column 1</td><td>Layout column 2</td></tr>
</table>
<!-- role="presentation" removes the table semantics
     Screen reader won't announce it as a table
     Children's semantics are also affected -->

Verifica rapida

Qual è la differenza tra role=alert e role=status?

Riepilogo: ruoli ARIA

Ruoli ARIA comuni:

role="button" — elemento diverso da un button che agisce come pulsante (aggiunga tabindex + JS)
role="alert" — annuncio assertivo immediato
role="dialog" — finestra di dialogo modale (preferisca <dialog> nativo)
role="status" — annuncio discreto di un aggiornamento
role="region" — sezione landmark con nome
role="search" — landmark del modulo di ricerca

Domande Frequenti

La lezione «role button alert dialog e landmark» è gratuita?

Sì — il testo completo di «role button alert dialog e landmark» è 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 «role button alert dialog e landmark»?

Applicare i ruoli ARIA per comunicare lo scopo degli elementi alle tecnologie assistive 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 «role button alert dialog e landmark»?

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

Quando usare ARIA invece dell’HTML nativo
role button alert dialog e landmark
aria-label aria-labelledby e aria-describedby
aria-hidden e aria-live

← Torna a HTML Academy