HTML
ARIA

Sintassi

• Aria-live
• Aria rilevanti
• Aria-completamento automatico
• Aria-controllato
• Aria-disabled
• Aria-espanso
• Aria-haspopup
• Aria-nascosto
• aria-non valida
• Aria-label
• Aria-level
• Aria-multilinea
• Aria-multiselectable
• aria-orientamento
• Aria-pressato
• Aria-in sola lettura
• Aria-required
• Aria-selezionati
• Aria-Sort
• Aria-valuemax
• Aria-valuemin
• Aria-valuenow
• Aria-valuetext
• Aria-atomica
• Aria-occupato
• Aria-dropEffect
• aria-trascinato
• aria-activedescendant
• Aria-controlli
• Aria-describedby
• Aria-flowto
• Aria-labelledby
• Aria-proprietaria
• Aria-posinset
• Aria-setSize

Osservazioni

role = "alert"

Un messaggio con informazioni importanti e solitamente sensibili al tempo.

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

Nota che ho incluso sia role="alert" che aria-live="assertive" allo stesso tempo. Questi sono sinonimi, ma alcuni screen reader supportano solo l'uno o l'altro. Usando entrambi contemporaneamente, massimizziamo quindi le possibilità che la regione live funzioni come previsto.

Fonte - Heydon Pickering "Alcuni esempi pratici di ARIA"

role = "alertdialog"

Un tipo di finestra di dialogo che contiene un messaggio di avviso, in cui l'attenzione iniziale viene spostata su un elemento all'interno della finestra di dialogo.

<div role="alertdialog">
  <h1>Warning</h1>
  <div role="alert">Your session will expire in 60 seconds.</div>
</div>

role = "applicazione"

Una regione dichiarata come applicazione web, al contrario di un documento Web. In questo esempio, l'applicazione è una semplice calcolatrice che potrebbe aggiungere due numeri insieme.

<div role="application">
  <h1>Calculator</h1>
  <input id="num1" type="text"> + <input id="num2" type="text"> =
  <span id="result"></span>
</div>

role = "articolo"

Una sezione di una pagina composta da una composizione che costituisce una parte indipendente di un documento, una pagina o un sito.

---

L'impostazione di un attributo ARIA e / o aria- * che corrisponde alla semantica implicita ARIA predefinita non è necessaria e non è consigliata in quanto queste proprietà sono già impostate dal browser.

<article>
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</article>

Dovresti usare role=article su elementi non semantici (non raccomandato, non valido)

<div role="article">
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</div>

---

Voce W3C per role=article

role = "banner"

Una regione che contiene principalmente contenuti orientati al sito, piuttosto che contenuti specifici della pagina.

<div role="banner">
  <h1>My Site</h1>

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

role = "button"

Un input che consente azioni attivate dall'utente quando si fa clic o si preme.

<button role="button">Add</button>

role = "cella"

Una cella in un contenitore tabulare.

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <td role="cell">95</td>
    <td role="cell">14</td>
    <td role="cell">25</td>
  </tbody>
</table>

role = "checkbox"

Un input controllabile che ha tre possibili valori: true, false o mixed.

<p>
  <input type="checkbox" role="checkbox" aria-checked="false">
  I agree to the terms
</p>

role = "columnheader"

Una cella contenente le informazioni di intestazione per una colonna.

<table role="grid">
  <thead>
    <tr>
      <th role="columnheader">Day 1</th>
      <th role="columnheader">Day 2</th>
      <th role="columnheader">Day 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
<table>

role = "Casella combinata"

Una presentazione di una selezione; di solito simile a una casella di testo in cui gli utenti possono digitare avanti per selezionare un'opzione, o digitare per inserire testo arbitrario come nuovo elemento nell'elenco.

<input type="text" role="combobox" aria-expanded="false">

In genere, si utilizza JavaScript per creare il resto della funzionalità typeahead o list select.

role = "complementare"

Una sezione di supporto del documento, progettata per essere complementare al contenuto principale a un livello simile nella gerarchia DOM, ma rimane significativa se separata dal contenuto principale.

<div role="complementary">
  <h2>More Articles</h2>

  <ul>
    <!-- etc -->
  </ul>
</div>

role = "ContentInfo"

Un'ampia regione percepibile che contiene informazioni sul documento principale.

<p role="contentinfo">
  Author: Albert Einstein<br>
  Published: August 15, 1940
</p>

role = "definizione"

Una definizione di un termine o concetto.

<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>

role = "finestra"

Una finestra di dialogo è una finestra dell'applicazione progettata per interrompere l'elaborazione corrente di un'applicazione al fine di richiedere all'utente di immettere informazioni o richiedere una risposta.

<div role="dialog">
  <p>Are you sure?</p>
  <button role="button">Yes</button>
  <button role="button">No</button>
</div>

role = "directory"

Un elenco di riferimenti ai membri di un gruppo, ad esempio un indice statico.

<ul role="directory">
  <li><a href="/chapter-1">Chapter 1</a></li>
  <li><a href="/chapter-2">Chapter 2</a></li>
  <li><a href="/chapter-3">Chapter 3</a></li>
</ul>

role = "documento"

Una regione contenente informazioni correlate dichiarate come contenuto del documento, a differenza di un'applicazione web.

<div role="document">
  <h1>The Life of Albert Einstein</h1>
  <p>Lorem ipsum...</p>
</div>

role = "forma"

Una regione di riferimento che contiene una raccolta di oggetti e oggetti che, nel complesso, si combinano per creare un modulo.

L'utilizzo dell'elemento HTML semanticamente corretto <form> implica la semantica ARIA predefinita, ovvero role=form non è richiesto in quanto non si dovrebbe applicare un ruolo di contrasto a un elemento che è già semantico, poiché l'aggiunta di un ruolo sovrascrive la semantica nativa di un elemento.

L'impostazione di un attributo ARIA e / o aria- * che corrisponde alla semantica implicita ARIA predefinita non è necessaria e non è consigliata in quanto queste proprietà sono già impostate dal browser.

<form action="">
  <fieldset>
    <legend>Login form</legend>
    <div>
      <label for="username">Your username</label>
      <input type="text" id="username" aria-describedby="username-tip" required />
      <div role="tooltip" id="username-tip">Your username is your email address</div>
    </div>
    <div>
      <label for="password">Your password</label>
      <input type="text" id="password" aria-describedby="password-tip" required />
      <div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
    </div>
  </fieldset>
</form>

Dovresti usare role=form su elementi non semantici (non raccomandato, non valido)

<div role=form>
  <input type="email" placeholder="Your email address">
  <button>Sign up</button>
</div>

role = "griglia"

Una griglia è un controllo interattivo che contiene celle di dati tabulari disposti in righe e colonne, come una tabella.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

role = "gridcell"

Una cella in una griglia o treegrida.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">17</td>
      <td role="gridcell">64</td>
      <td role="gridcell">18</td>
    </tr>
  </tbody>
<table>

role = "gruppo"

Un insieme di oggetti dell'interfaccia utente che non devono essere inclusi in un riepilogo o in un sommario della pagina mediante tecnologie assistive.

<div role="group">
  <button role"button">Previous</button>
  <button role"button">Next</button>
</div>

role = "heading"

Un'intestazione per una sezione della pagina.

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

role = "img"

Un contenitore per una raccolta di elementi che formano un'immagine.

<figure role="img">
  <img alt="A cute cat." src="albert.jpg">
  <figcaption>This is my cat, Albert.</figcaption>
<figure>

role = "link"

Un riferimento interattivo a una risorsa interna o esterna che, quando attivata, fa sì che l'interprete utilizzi tale risorsa.

Nella maggior parte dei casi l'impostazione di un attributo ARIA e / o di un attributo aria- * corrispondente alla semantica implicita di ARIA non è necessaria e non è consigliata in quanto tali proprietà sono già impostate dal browser.

Fonte: https://www.w3.org/TR/html5/dom.html#aria-usage-note

role = "lista"

Un gruppo di voci di elenco non interattive.

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

role = "casella di riepilogo"

Un widget che consente all'utente di selezionare uno o più elementi da un elenco di scelte.

<ul role="listbox">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

In genere, si utilizza JavaScript per creare la funzionalità di selezione multipla.

role = "listitem"

Un singolo elemento in un elenco o directory.

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

role = "log"

Un tipo di area live in cui vengono aggiunte nuove informazioni in ordine significativo e le vecchie informazioni potrebbero scomparire.

<ul role="log">
  <li>User 1 logged in.</li>
  <li>User 2 logged in.</li>
  <li>User 1 logged out.</li>
</ul>

role = "main"

Il contenuto principale di un documento.

<!-- header & nav here -->
<div role="main">
  <p>Lorem ipsum...</p>
</div>
<!-- footer here -->

role = "tendone"

Un tipo di regione in cui le informazioni non essenziali cambiano frequentemente.

<ul role="marquee">
  <li>Dow +0.26%</li>
  <li>Nasdaq +0.54%</li>
  <li>S&amp;P +0.44%</li>
</ul>

role = "matematica"

Contenuto che rappresenta un'espressione matematica.

<img role="math" alt="y=mx+b" src="slope.png">

role = "menu"

Un tipo di widget che offre un elenco di scelte all'utente.

<ul role="menu">
  <li role="menuitem">New</li>
  <li role="menuitem">Open</li>
  <li role="menuitem">Save</li>
  <li role="menuitem">Close</li>
</ul>

role = "barra dei menu"

Una presentazione di menu che di solito rimane visibile e di solito viene presentata orizzontalmente.

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

role = "menuitem"

Un'opzione in un gruppo di scelte contenute in un menu o in una barra dei menu.

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

role = "menuitemcheckbox"

Un menu di menu controllabile che ha tre possibili valori: vero, falso o misto.

<ul role="menu">
  <li role="menuitem">Console</li>
  <li role="menuitem">Layout</li>
  <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>

role = "menuitemradio"

Un menu di menu controllabile in un gruppo di ruoli menuitemradio, solo uno dei quali può essere controllato alla volta.

<ul role="menu">
  <li role="menuitemradio" aria-checked="true">Left</li>
  <li role="menuitemradio" aria-checked="false">Center</li>
  <li role="menuitemradio" aria-checked="false">Right</li>
</ul>

role = "navigazione"

Una raccolta di elementi di navigazione (in genere collegamenti) per la navigazione del documento o dei documenti correlati.

<ul role="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

role = "note"

Una sezione il cui contenuto è parentetico o accessorio al contenuto principale della risorsa.

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>

role = "opzione"

Un elemento selezionabile in un elenco selezionato.

<ul role="listbox">
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
  <li role="option">Option 3</li>
</ul>

role = "presentazione"

Un elemento la cui semantica implicita del ruolo nativo non verrà mappata all'API di accessibilità.

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->

role = "progressbar"

Un elemento che visualizza lo stato di avanzamento delle attività che richiedono molto tempo.

<progress role="progressbar" value="25" max="100">25%</progress>

role = "radio"

Un input controllabile in un gruppo di ruoli radio, di cui solo uno può essere controllato alla volta.

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

role = "regione"

Una grande sezione percepibile di una pagina web o di un documento, che l'autore ritiene sia abbastanza importante da essere inclusa in un riepilogo della pagina o in un sommario, ad esempio un'area della pagina contenente statistiche di eventi sportivi in ​​diretta.

<div role="region">
  Home team: 4<br>
  Away team: 2
</div>

role = "RadioGroup"

Un gruppo di pulsanti radio.

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

role = "riga"

Una fila di celle in un contenitore tabulare.

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr role="row">
      <!-- etc -->
    </tr>
  </tbody>
</table>

role = "rowgroup"

Un gruppo contenente uno o più elementi riga in una griglia.

<table>
  <thead role="rowgroup">
    <!-- etc -->
  </thead>
  <tbody role="rowgroup">
    <!-- etc -->
  </tbody>
</table>

role = "rowheader"

Una cella contenente informazioni di intestazione per una riga in una griglia.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <th role="rowheader">Day 1</th>
      <td>65</td>
    </tr>
    <tr>
      <th role="rowheader">Day 2</th>
      <td>74</td>
    </tr>
  </tbody>
</table>

role = "barra di scorrimento"

Un oggetto grafico che controlla lo scorrimento del contenuto all'interno di un'area di visualizzazione, indipendentemente dal fatto che il contenuto sia completamente visualizzato nell'area di visualizzazione.

<div id="content1">Lorem ipsum...</div>
<div
  role="scrollbar"
  aria-controls="content1"
  aria-orientation="vertical"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="scrollhandle"></div>
</div>

role = "search"

Una regione di riferimento che contiene una raccolta di oggetti e oggetti che, nel complesso, si combinano per creare una funzione di ricerca.

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

role = "searchbox"

Un tipo di casella di testo destinato a specificare i criteri di ricerca.

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

role = "separatore"

Un divisore che separa e distingue sezioni di contenuto o gruppi di menu.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

role = "slider"

Un input dell'utente in cui l'utente seleziona un valore all'interno di un determinato intervallo.

<div
  role="slider"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="sliderhandle"></div>
</div>

role = "SpinButton"

Una forma di intervallo che si aspetta che l'utente scelga tra le scelte discrete.

<input
  role="spinbutton"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25"
  type="number"
  value="25">

role = "Stato"

Un contenitore il cui contenuto è un'informazione di consulenza per l'utente ma non è abbastanza importante da giustificare un avviso, spesso ma non necessariamente presentato come barra di stato.

<div role="status">Online</div>

role = "interruttore"

Un tipo di checkbox che rappresenta valori on / off, a differenza dei valori selezionati / non selezionati.

<select role="switch" aria-checked="false">
  <option>On</option>
  <option selected>Off</option>
</select>

role = "tab"

Un'etichetta di raggruppamento che fornisce un meccanismo per selezionare il contenuto della scheda che deve essere reso all'utente.

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>

role = "tavolo"

Una sezione contenente dati disposti in righe e colonne. Il ruolo della tabella è inteso per i contenitori tabulari che non sono interattivi.

<table role="table">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

role = "tablist"

Un elenco di elementi di tabulazione, che sono riferimenti a elementi di tabpanel.

<ul role="tablist">
   <li role="tab">Introduction</li>
   <li role="tab">Chapter 1</li>
   <li role="tab">Chapter 2</li>
</ul>

role = "tabpanel"

Un contenitore per le risorse associate a una scheda, in cui ogni scheda è contenuta in un elenco di schede.

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
  <!-- etc -->
</div>

role = "testo"

Input che consente al testo in forma libera il suo valore.

<textarea role="textbox"></textarea>

role = "timer"

Un tipo di regione attiva contenente un contatore numerico che indica una quantità di tempo trascorso da un punto iniziale o il tempo rimanente fino a un punto finale.

<p>
  <span role="timer">60</span> seconds remaining.
</p>

role = "barra degli strumenti"

Una raccolta di pulsanti di funzione comunemente utilizzati rappresentati in forma visiva compatta.

<ul role="toolbar">
  <li><img alt="New" src="new.png"></li>
  <li><img alt="Open" src="open.png"></li>
  <li><img alt="Save" src="save.png"></li>
  <li><img alt="Close" src="close.png"></li>
</ul>

role = "tooltip"

Un popup contestuale che visualizza una descrizione per un elemento.

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

In genere, il suggerimento sarebbe nascosto. Usando JavaScript, il suggerimento sarebbe visualizzato dopo un ritardo quando l'utente passa sopra l'elemento che descrive.

role = "albero"

Un tipo di elenco che può contenere gruppi nidificati di livello inferiore che possono essere compressi ed espansi.

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>

role = "treegrid"

Una griglia le cui righe possono essere espanse e compresse nello stesso modo di un albero.

role = "treeitem"

Una voce di opzione di un albero. Questo è un elemento all'interno di un albero che può essere espanso o compresso se contiene un gruppo sottolivello di alberi.

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>