HTML
ARIA

Syntaxe

• aria-live
• aria-pertinent
• aria-autocomplete
• aria-vérifié
• aria-handicapé
• aria-expand
• aria-haspopup
• aria-caché
• aria-invalide
• label aria
• niveau aria
• aria-multiline
• aria-multiselectable
• orientation aria
• aria-pressé
• aria-readonly
• aria-required
• aria-sélectionné
• aria-tri
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• aria-atomic
• aria-occupé
• aria-dropeffect
• aria-traîné
• aria-activedescendant
• aria-contrôles
• aria-décrit par
• aria-flowto
• aria-labelledby
• Aria-possède
• aria-posinset
• aria-setsize

Remarques

role = "alerte"

Un message contenant des informations importantes et généralement sensibles au temps.

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

Notez que j'ai inclus à la fois role="alert" et aria-live="assertive" en même temps. Ce sont des attributs synonymes, mais certains lecteurs d'écran ne supportent que l'un ou l'autre. En utilisant les deux simultanément, nous maximisons donc les chances que la région en direct fonctionne comme prévu.

Source - Heydon Pickering 'Quelques exemples pratiques d'ARIA'

role = "alertdialog"

Un type de boîte de dialogue contenant un message d'alerte, où le focus initial est dirigé vers un élément de la boîte de dialogue.

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

role = "application"

Une région déclarée en tant qu'application Web, par opposition à un document Web. Dans cet exemple, l'application est une calculatrice simple qui peut ajouter deux nombres ensemble.

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

role = "article"

Section d'une page constituée d'une composition qui constitue une partie indépendante d'un document, d'une page ou d'un site.

---

La définition d'un attribut ARIA et / ou d'un attribut aria- * correspondant à la sémantique implicite ARIA implicite est inutile et n'est pas recommandée car ces propriétés sont déjà définies par le navigateur.

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

Vous utiliseriez role=article sur des éléments non sémantiques (non recommandé, non valide)

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

---

Entrée W3C pour le role=article

role = "banner"

Une région qui contient principalement du contenu orienté site, plutôt que du contenu spécifique à la page.

<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 = "bouton"

Une entrée permettant des actions déclenchées par l'utilisateur lorsque l'utilisateur clique ou appuie dessus.

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

role = "cell"

Une cellule dans un conteneur tabulaire.

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

role = "checkbox"

Une entrée vérifiable qui a trois valeurs possibles: true, false ou mixed.

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

role = "en-tête de colonne"

Une cellule contenant des informations d'en-tête pour une colonne.

<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 = "combobox"

Une présentation d'une sélection; généralement similaire à une zone de texte où les utilisateurs peuvent taper en avant pour sélectionner une option, ou taper pour entrer du texte arbitraire en tant que nouvel élément dans la liste.

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

En règle générale, vous utiliseriez JavaScript pour créer le reste de la fonctionnalité de sélection de tête ou de liste.

role = "complémentaire"

Une section de support du document, conçue pour compléter le contenu principal à un niveau similaire dans la hiérarchie DOM, mais reste significative lorsqu'elle est séparée du contenu principal.

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

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

role = "contentinfo"

Une grande région perceptible contenant des informations sur le document parent.

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

role = "definition"

Une définition d'un terme ou d'un concept.

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

role = "dialog"

Une boîte de dialogue est une fenêtre d'application conçue pour interrompre le traitement en cours d'une application afin d'inviter l'utilisateur à saisir des informations ou à demander une réponse.

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

role = "répertoire"

Une liste de références aux membres d'un groupe, telle qu'une table des matières statique.

<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 = "document"

Une région contenant des informations connexes déclarées en tant que contenu de document, par opposition à une application Web.

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

role = "form"

Une région de repère qui contient une collection d'éléments et d'objets qui, dans leur ensemble, se combinent pour créer un formulaire.

L'utilisation de l'élément HTML sémantiquement correct <form> implique la sémantique ARIA par défaut, ce qui signifie que role=form n'est pas requis car vous ne devez pas appliquer de rôle contrasté à un élément déjà sémantique, car l'ajout d'un rôle remplace la sémantique native d'un élément.

La définition d'un attribut ARIA et / ou d'un attribut aria- * correspondant à la sémantique implicite ARIA implicite est inutile et n'est pas recommandée car ces propriétés sont déjà définies par le navigateur.

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

Vous utiliseriez role=form sur des éléments non sémantiques (non recommandé, non valide)

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

role = "grid"

Une grille est un contrôle interactif qui contient des cellules de données tabulaires disposées en lignes et en colonnes, comme une table.

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

role = "gridcell"

Une cellule dans une grille ou une grille.

<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 = "group"

Un ensemble d'objets d'interface utilisateur qui ne sont pas destinés à être inclus dans un résumé de page ou une table des matières par des technologies d'assistance.

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

role = "en-tête"

Un en-tête pour une section de la page.

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

role = "img"

Un conteneur pour une collection d'éléments qui forment une image.

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

role = "link"

Une référence interactive à une ressource interne ou externe qui, lorsqu'elle est activée, oblige l'agent utilisateur à accéder à cette ressource.

Dans la majorité des cas, il est inutile de définir un attribut ARIA et / ou un attribut aria- * correspondant à la sémantique implicite ARIA implicite, ce qui n'est pas recommandé car ces propriétés sont déjà définies par le navigateur.

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

role = "list"

Un groupe d'éléments de liste non interactifs.

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

role = "listbox"

Un widget qui permet à l'utilisateur de sélectionner un ou plusieurs éléments dans une liste de choix.

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

En règle générale, vous utiliseriez JavaScript pour créer la fonctionnalité de sélection multiple.

role = "listitem"

Un seul élément dans une liste ou un répertoire.

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

role = "log"

Un type de région en direct dans lequel de nouvelles informations sont ajoutées dans un ordre significatif et les anciennes informations peuvent disparaître.

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

role = "main"

Le contenu principal d'un document.

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

role = "chapiteau"

Un type de région en direct où les informations non essentielles changent fréquemment.

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

role = "math"

Contenu qui représente une expression mathématique.

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

role = "menu"

Un type de widget qui offre une liste de choix à l'utilisateur.

<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 = "menubar"

Une présentation de menu qui reste généralement visible et est généralement présentée horizontalement.

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

Une option dans un groupe de choix contenus dans un menu ou une barre de menus.

<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 menuitem vérifiable qui a trois valeurs possibles: true, false ou mixed.

<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 menuitem vérifiable dans un groupe de rôles menuitemradio, dont un seul peut être vérifié à la fois.

<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 = "navigation"

Une collection d'éléments de navigation (généralement des liens) pour naviguer dans le document ou les documents associés.

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

Une section dont le contenu est parenthétique ou accessoire au contenu principal de la ressource.

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

role = "option"

Un élément sélectionnable dans une liste de sélection.

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

role = "presentation"

Un élément dont la sémantique implicite du rôle natif ne sera pas mappée à l'API d'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 élément qui affiche l'état d'avancement pour les tâches qui prennent beaucoup de temps.

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

role = "radio"

Une entrée vérifiable dans un groupe de rôles radio, dont un seul peut être vérifié à la fois.

<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 = "region"

Une grande partie perceptible d'une page Web ou d'un document que l'auteur juge suffisamment importante pour être incluse dans un résumé de page ou une table des matières, par exemple une zone de la page contenant des statistiques d'événements sportifs en direct.

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

role = "radiogroup"

Un groupe de boutons 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 = "row"

Une rangée de cellules dans un conteneur tabulaire.

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

role = "rowgroup"

Un groupe contenant un ou plusieurs éléments de ligne dans une grille.

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

role = "rowheader"

Une cellule contenant des informations d'en-tête pour une ligne dans une grille.

<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 = "scrollbar"

Objet graphique qui contrôle le défilement du contenu dans une zone de visualisation, que le contenu soit entièrement affiché ou non dans la zone de visualisation.

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

Une région de repère qui contient une collection d'éléments et d'objets qui, dans leur ensemble, se combinent pour créer une fonction de recherche.

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

role = "searchbox"

Un type de zone de texte destiné à spécifier des critères de recherche.

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

role = "separator"

Un séparateur qui sépare et distingue des sections de contenu ou des groupes de menuitems.

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

role = "curseur"

Une entrée utilisateur où l'utilisateur sélectionne une valeur dans une plage donnée.

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

role = "spinbutton"

Une forme de plage qui attend de l'utilisateur qu'il choisisse parmi des choix discrets.

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

role = "status"

Un conteneur dont le contenu est une information consultative pour l'utilisateur mais n'est pas assez important pour justifier une alerte, souvent mais pas nécessairement présenté comme une barre d'état.

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

role = "switch"

Type de case à cocher représentant les valeurs d'activation / désactivation, par opposition aux valeurs cochées / non cochées.

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

role = "tab"

Une étiquette de regroupement fournissant un mécanisme pour sélectionner le contenu de l'onglet à rendre à l'utilisateur.

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

role = "table"

Une section contenant des données organisées en lignes et en colonnes. Le rôle de table est destiné aux conteneurs tabulaires qui ne sont pas interactifs.

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

role = "tablist"

Une liste d'éléments d'onglet, qui sont des références à des éléments 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 conteneur pour les ressources associées à un onglet, où chaque onglet est contenu dans une tablist.

<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 = "textbox"

Entrée qui autorise le texte libre comme valeur.

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

role = "timer"

Type de région active contenant un compteur numérique indiquant la durée écoulée depuis un point de départ ou la durée restante jusqu'à un point final.

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

role = "barre d'outils"

Une collection de boutons de fonctions couramment utilisés représentés sous forme visuelle compacte.

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

Une fenêtre contextuelle qui affiche une description pour un élément.

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

En règle générale, l'info-bulle est masquée. En utilisant JavaScript, l'info-bulle sera affichée après un délai lorsque l'utilisateur survole l'élément décrit.

role = "tree"

Type de liste pouvant contenir des groupes imbriqués de sous-niveau pouvant être réduits et développés.

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

Une grille dont les lignes peuvent être étendues et réduites de la même manière que pour un arbre.

role = "treeitem"

Un élément d'option d'un arbre. C'est un élément dans une arborescence qui peut être développé ou réduit s'il contient un groupe de sous-niveaux d'arborescence.

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