HTML
ARIE

Syntax

• Arie-Live
• arienrelevant
• Arie-Autovervollständigung
• aria-geprüft
• Aria-Behinderte
• Arie erweitert
• aria-haspopup
• Arie versteckt
• aria-ungültig
• Aria-Label
• Aria-Ebene
• Arie-Multiline
• Arie-multiselektierbar
• Arienorientierung
• ariengepresst
• aria-readonly
• Arie erforderlich
• Arie ausgewählt
• aria-sort
• Aria-ValueMax
• aria-valuemin
• Aria-Valuenow
• Aria-Wertetext
• Aria-Atomic
• Arie beschäftigt
• aria-dropeffekt
• Arie gezerrt
• Aria-aktivierterAnhänger
• Aria-Kontrollen
• Arie-beschriebenvon
• aria-flowto
• Arie beschriftetvon
• Aria besitzt
• Aria-Posinset
• aria-setsize

Bemerkungen

role = "alert"

Eine Nachricht mit wichtigen und normalerweise zeitkritischen Informationen.

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

Beachten Sie, dass ich gleichzeitig sowohl role="alert" als auch aria-live="assertive" habe. Dies sind auch Attribute, aber einige Screenreader unterstützen nur das eine oder das andere. Durch die gleichzeitige Verwendung beider maximieren wir daher die Chancen, dass die Live-Region wie erwartet funktioniert.

Quelle - Heydon Pickering 'Einige praktische ARIA-Beispiele'

role = "alertdialog"

Ein Typ eines Dialogfelds, das eine Warnmeldung enthält, wobei der anfängliche Fokus auf ein Element innerhalb des Dialogfelds gerichtet ist.

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

role = "Anwendung"

Eine als Webanwendung deklarierte Region im Gegensatz zu einem Webdokument. In diesem Beispiel handelt es sich bei der Anwendung um einen einfachen Rechner, der möglicherweise zwei Zahlen addiert.

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

role = "Artikel"

Ein Abschnitt einer Seite, der aus einer Komposition besteht, die einen unabhängigen Teil eines Dokuments, einer Seite oder einer Site bildet.

---

Das Festlegen einer ARIA-Rolle und / oder eines aria- * -Attributs, die der standardmäßigen impliziten ARIA-Semantik entsprechen, ist nicht erforderlich und wird nicht empfohlen, da diese Eigenschaften bereits vom Browser festgelegt werden.

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

Sie würden role=article für nicht semantische Elemente verwenden (nicht empfohlen, ungültig).

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

---

W3C Eintrag für role=article

role = "banner"

Eine Region, die eher seitenorientierten Inhalt als seitenabhängigen Inhalt enthält.

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

Eine Eingabe, die vom Benutzer ausgelöste Aktionen beim Klicken oder Drücken ermöglicht

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

Rolle = "Zelle"

Eine Zelle in einem Tabellencontainer.

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

role = "Ankreuzfeld"

Eine überprüfbare Eingabe mit drei möglichen Werten: true, false oder mixed.

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

role = "columnheader"

Eine Zelle, die Header-Informationen für eine Spalte enthält.

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

Eine Präsentation eines select; In der Regel ähnlich wie bei einem Textfeld, in das Benutzer zuvor eine Option auswählen können, oder einen beliebigen Text als neuen Eintrag in die Liste.

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

Normalerweise verwenden Sie JavaScript, um den Rest der Typhead- oder Listenauswahlfunktionalität zu erstellen.

Rolle = "komplementär"

Ein unterstützender Abschnitt des Dokuments, der auf einer ähnlichen Ebene in der DOM-Hierarchie den Hauptinhalt ergänzen soll, bleibt jedoch bedeutsam, wenn er vom Hauptinhalt getrennt wird.

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

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

role = "contentinfo"

Ein großer wahrnehmbarer Bereich, der Informationen zum übergeordneten Dokument enthält.

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

Rolle = "Definition"

Eine Definition eines Begriffs oder Begriffs.

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

role = "dialog"

Ein Dialog ist ein Anwendungsfenster, das die aktuelle Verarbeitung einer Anwendung unterbricht, um den Benutzer zur Eingabe von Informationen oder zur Antwort aufzufordern.

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

role = "verzeichnis"

Eine Liste von Verweisen auf Mitglieder einer Gruppe, z. B. ein statisches Inhaltsverzeichnis.

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

Eine Region, die verwandte Informationen enthält, die im Gegensatz zu einer Webanwendung als Dokumentinhalt deklariert sind.

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

role = "form"

Ein Markierungsbereich, der eine Sammlung von Elementen und Objekten enthält, die insgesamt zu einem Formular kombiniert werden.

Die Verwendung des semantisch korrekten HTML-Elements <form> impliziert die standardmäßige ARIA-Semantik. Die Bedeutung von role=form ist nicht erforderlich, da Sie keine kontrastierende Rolle auf ein bereits semantisches Element anwenden sollten, da durch das Hinzufügen einer Rolle die native Semantik eines Elements überschrieben wird.

Das Festlegen einer ARIA-Rolle und / oder eines aria- * -Attributs, die der standardmäßigen impliziten ARIA-Semantik entsprechen, ist nicht erforderlich und wird nicht empfohlen, da diese Eigenschaften bereits vom Browser festgelegt werden.

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

Sie würden role=form für nicht semantische Elemente verwenden (nicht empfohlen, ungültig).

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

role = "grid"

Ein Raster ist ein interaktives Steuerelement, das Tabellendaten enthält, die in Zeilen und Spalten wie eine Tabelle angeordnet sind.

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

role = "gridcell"

Eine Zelle in einem Gitter oder Baumgrill.

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

Rolle = "Gruppe"

Eine Gruppe von Benutzeroberflächenobjekten, die von assistiven Technologien nicht in eine Seitenübersicht oder ein Inhaltsverzeichnis einbezogen werden sollen.

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

role = "Überschrift"

Eine Überschrift für einen Abschnitt der Seite.

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

role = "img"

Ein Container für eine Sammlung von Elementen, die ein Bild bilden.

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

role = "link"

Eine interaktive Referenz zu einer internen oder externen Ressource, die bei ihrer Aktivierung den Benutzeragenten dazu bringt, zu dieser Ressource zu navigieren.

In den meisten Fällen ist das Festlegen einer ARIA-Rolle und / oder eines aria- * -Attributs, die der standardmäßigen impliziten ARIA-Semantik entsprechen, nicht erforderlich und wird nicht empfohlen, da diese Eigenschaften bereits vom Browser festgelegt werden.

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

role = "list"

Eine Gruppe nicht interaktiver Listenelemente.

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

role = "Listbox"

Ein Widget, mit dem der Benutzer ein oder mehrere Elemente aus einer Auswahlliste auswählen kann.

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

Normalerweise würden Sie JavaScript verwenden, um die Funktion zur Mehrfachauswahl zu erstellen.

role = "listitem"

Ein einzelnes Element in einer Liste oder einem Verzeichnis.

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

role = "log"

Eine Art von Live-Region, in der neue Informationen in sinnvoller Reihenfolge hinzugefügt werden und alte Informationen möglicherweise verschwinden.

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

role = "main"

Der Hauptinhalt eines Dokuments.

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

Rolle = "Laufschrift"

Eine Art von Live-Region, in der sich nicht wesentliche Informationen häufig ändern.

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

role = "math"

Inhalt, der einen mathematischen Ausdruck darstellt.

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

role = "Menü"

Ein Widget-Typ, der dem Benutzer eine Auswahlliste bietet.

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

Rolle = "Menüleiste"

Eine Präsentation des Menüs, die normalerweise sichtbar bleibt und normalerweise horizontal angezeigt wird.

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

Eine Option in einer Gruppe von Optionen, die in einem Menü oder einer Menüleiste enthalten sind.

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

Ein überprüfbares Menü, das drei mögliche Werte hat: wahr, falsch oder gemischt.

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

Rolle = "Menuitemradio"

Ein überprüfbares Menuitem in einer Gruppe von Menuitemradio-Rollen, von denen nur eine einzeln geprüft werden kann.

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

Eine Sammlung von Navigationselementen (normalerweise Links) zum Navigieren im Dokument oder verwandten Dokumenten.

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

Ein Abschnitt, dessen Inhalt dem Hauptinhalt der Ressource parenthetisch oder ergänzend ist.

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

role = "Option"

Ein auswählbares Element in einer Auswahlliste.

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

Rolle = "Präsentation"

Ein Element, dessen implizite systemeigene Rollensemantik der Zugriffs-API nicht zugeordnet wird

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

Ein Element, das den Fortschrittsstatus für Aufgaben anzeigt, die lange dauern.

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

Rolle = "Radio"

Eine überprüfbare Eingabe in einer Gruppe von Funkrollen, von denen jeweils nur eine überprüft werden kann.

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

Rolle = "Region"

Ein großer wahrnehmbarer Abschnitt einer Webseite oder eines Dokuments, von dem der Autor hält, dass er wichtig genug ist, um in eine Seitenzusammenfassung oder ein Inhaltsverzeichnis aufgenommen zu werden, beispielsweise einen Bereich der Seite mit Live-Sportereignisstatistiken.

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

Rolle = "Radiogruppe"

Eine Gruppe von Optionsfeldern.

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

Eine Reihe von Zellen in einem Tabellencontainer.

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

role = "Zeilengruppe"

Eine Gruppe mit einem oder mehreren Zeilenelementen in einem Raster.

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

role = "Rowheader"

Eine Zelle, die Kopfzeileninformationen für eine Zeile in einem Raster enthält.

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

Ein grafisches Objekt, das den Bildlauf des Inhalts innerhalb eines Anzeigebereichs steuert, unabhängig davon, ob der Inhalt vollständig im Anzeigebereich angezeigt wird.

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

Ein Markierungsbereich, der eine Sammlung von Elementen und Objekten enthält, die zusammen eine Suchfunktion erstellen.

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

role = "Suchfeld"

Ein Textfeldtyp, der zum Angeben von Suchkriterien vorgesehen ist.

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

role = "Trennzeichen"

Ein Teiler, der Inhaltsbereiche oder Gruppen von Menüelementen voneinander trennt und unterscheidet.

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

Rolle = "Schieberegler"

Eine Benutzereingabe, bei der der Benutzer einen Wert aus einem bestimmten Bereich auswählt.

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

role = "Drehfeld"

Eine Form des Bereichs, von der der Benutzer unter diskreten Auswahlmöglichkeiten auswählen muss.

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

role = "status"

Ein Container, dessen Inhalt Empfehlungen für den Benutzer ist, aber nicht wichtig genug ist, um eine Warnung zu rechtfertigen, die häufig, aber nicht notwendigerweise als Statusleiste angezeigt wird.

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

role = "wechseln"

Eine Art Kontrollkästchen, das Ein / Aus-Werte im Gegensatz zu aktivierten / nicht geprüften Werten darstellt

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

role = "tab"

Ein Gruppierungsetikett, das einen Mechanismus zum Auswählen des Registerkarteninhalts bereitstellt, der dem Benutzer angezeigt werden soll

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

role = "table"

Ein Abschnitt, der Daten enthält, die in Zeilen und Spalten angeordnet sind. Die Tabellenrolle ist für tabellarische Container gedacht, die nicht interaktiv sind.

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

role = "tablist"

Eine Liste von Tabulatorelementen, die Verweise auf Tabulatorelemente sind.

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

role = "tabpanel"

Ein Container für die Ressourcen, die einer Registerkarte zugeordnet sind, wobei jede Registerkarte in einer Tablist enthalten ist.

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

Eingabe, die Freiformtext als Wert zulässt.

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

role = "Timer"

Eine Art von Live-Region, die einen numerischen Zähler enthält, der die abgelaufene Zeit ab einem Startpunkt oder die bis zu einem Endpunkt verbleibende Zeit angibt.

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

role = "Werkzeugleiste"

Eine Sammlung häufig verwendeter Funktionstasten, die in kompakter visueller Form dargestellt werden.

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

Ein Kontext-Popup, das eine Beschreibung für ein Element anzeigt.

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

Normalerweise wird der Tooltip ausgeblendet. Bei Verwendung von JavaScript wird der Tooltip nach einer Verzögerung angezeigt, wenn der Benutzer über das von ihm beschriebene Element fährt.

role = "Baum"

Ein Listentyp, der untergeordnete verschachtelte Gruppen enthalten kann, die reduziert und erweitert werden können.

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

Ein Raster, dessen Zeilen auf dieselbe Weise wie für einen Baum erweitert und reduziert werden können

role = "treeitem"

Ein Optionselement eines Baums. Dies ist ein Element innerhalb einer Baumstruktur, das erweitert oder reduziert werden kann, wenn es eine Unterebenengruppe von Baumstrukturen enthält.

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