HTML
ARIA

Syntaxis

• aria-Live
• aria-relevant
• aria-autocomplete
• -Aria gecontroleerd
• aria-disabled
• -Aria uitgebreid
• aria-haspopup
• -Aria verborgen
• aria-ongeldig
• aria-label
• aria-niveau
• aria multiline
• aria-multiselectable
• aria-oriëntatie
• -Aria geperst
• aria-readonly
• -Aria vereist
• -Aria geselecteerde
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• aria-atomic
• aria-druk
• aria-dropEffect
• -Aria sleepte
• aria-activedescendant
• aria-controles
• aria-describedby
• aria-flowto
• aria-labelledby
• aria-eigenaar
• aria-posinset
• aria-setSize

Opmerkingen

role = "alert"

Een bericht met belangrijke, en meestal tijdgevoelige, informatie.

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

Merk op dat ik tegelijkertijd role="alert" en aria-live="assertive" heb opgenomen. Dit zijn synonieme attributen, maar sommige schermlezers ondersteunen alleen het een of het ander. Door beide gelijktijdig te gebruiken, maximaliseren we daarom de kansen dat de live regio zal functioneren zoals verwacht.

Bron - Heydon Pickering 'Enkele praktische ARIA-voorbeelden'

role = "alertdialog"

Een type dialoogvenster dat een waarschuwingsbericht bevat, waarbij de eerste focus naar een element in het dialoogvenster gaat.

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

role = "application"

Een regio die als webtoepassing wordt verklaard, in tegenstelling tot een webdocument. In dit voorbeeld is de applicatie een eenvoudige rekenmachine die twee getallen bij elkaar kan optellen.

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

role = "artikel"

Een sectie van een pagina die bestaat uit een compositie die een onafhankelijk onderdeel vormt van een document, pagina of site.

---

Het instellen van een ARIA-rol en / of aria- * -attribuut dat overeenkomt met de standaard impliciete ARIA-semantiek is onnodig en wordt niet aanbevolen omdat deze eigenschappen al door de browser zijn ingesteld.

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

Je zou role=article over niet-semantische elementen (niet aanbevolen, ongeldig)

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

---

W3C Vermelding voor role=article

role = "banner"

Een regio die voornamelijk sitegerichte inhoud bevat in plaats van paginaspecifieke inhoud.

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

Een invoer die door de gebruiker getriggerde acties mogelijk maakt wanneer erop wordt geklikt of gedrukt.

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

role = "cel"

Een cel in een container in tabelvorm.

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

role = "checkbox"

Een controleerbare invoer met drie mogelijke waarden: waar, onwaar of gemengd.

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

role = "kolomnaam"

Een cel met koptekstinformatie voor een kolom.

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

Een presentatie van een selecte; meestal vergelijkbaar met een tekstvak waar gebruikers vooruit kunnen typen om een optie te selecteren, of typen om willekeurige tekst in te voeren als een nieuw item in de lijst.

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

Normaal gesproken gebruikt u JavaScript om de rest van de typeahead of list select-functionaliteit te bouwen.

role = "complementair"

Een ondersteunend gedeelte van het document, ontworpen als aanvulling op de hoofdinhoud op een vergelijkbaar niveau in de DOM-hiërarchie, maar blijft zinvol wanneer het wordt gescheiden van de hoofdinhoud.

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

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

role = "contentinfo"

Een groot waarneembaar gebied dat informatie over het bovenliggende document bevat.

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

role = "definitie"

Een definitie van een term of concept.

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

role = "dialoog"

Een dialoogvenster is een applicatievenster dat is ontworpen om de huidige verwerking van een applicatie te onderbreken om de gebruiker te vragen informatie in te voeren of een reactie te vereisen.

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

role = "directory"

Een lijst met verwijzingen naar leden van een groep, zoals een statische inhoudsopgave.

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

Een regio met gerelateerde informatie die wordt gedeclareerd als documentinhoud, in tegenstelling tot een webtoepassing.

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

role = "vorm"

Een mijlpaalgebied dat een verzameling items en objecten bevat die samen worden gecombineerd om een formulier te maken.

Het gebruik van het semantisch correcte HTML-element <form> impliceert standaard ARIA-semantiek, wat betekent dat role=form niet vereist is, omdat u geen contrasterende rol moet toepassen op een element dat al semantisch is, omdat het toevoegen van een rol de oorspronkelijke semantiek van een element overschrijft.

Het instellen van een ARIA-rol en / of aria- * -attribuut dat overeenkomt met de standaard impliciete ARIA-semantiek is onnodig en wordt niet aanbevolen omdat deze eigenschappen al door de browser zijn ingesteld.

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

U gebruikt role=form op niet-semantische elementen (niet aanbevolen, ongeldig)

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

role = "grid"

Een raster is een interactief besturingselement dat cellen met tabelgegevens bevat die in rijen en kolommen zijn gerangschikt, zoals een tabel.

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

role = "rastercel"

Een cel in een raster of treegrid.

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

Een set gebruikersinterfaceobjecten die niet zijn bedoeld om te worden opgenomen in een paginaoverzicht of inhoudsopgave door hulptechnologieën.

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

role = "titel"

Een kop voor een gedeelte van de pagina.

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

role = "img"

Een container voor een verzameling elementen die een afbeelding vormen.

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

role = "link"

Een interactieve verwijzing naar een interne of externe bron die, wanneer geactiveerd, ervoor zorgt dat de user agent naar die bron navigeert.

In de meeste gevallen is het instellen van een ARIA-rol en / of aria- * -attribuut dat overeenkomt met de standaard impliciete ARIA-semantiek onnodig en niet aanbevolen, omdat deze eigenschappen al door de browser zijn ingesteld.

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

role = "list"

Een groep niet-interactieve lijstitems.

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

role = "keuzelijst"

Een widget waarmee de gebruiker een of meer items uit een lijst met keuzes kan selecteren.

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

Meestal gebruikt u JavaScript om de meervoudige selectiefunctionaliteit te bouwen.

role = "listitem"

Een enkel item in een lijst of map.

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

role = "log"

Een type live regio waar nieuwe informatie in zinvolle volgorde wordt toegevoegd en oude informatie kan verdwijnen.

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

role = "main"

De hoofdinhoud van een document.

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

role = "marquee"

Een soort live regio waar niet-essentiële informatie regelmatig verandert.

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

role = "wiskunde"

Inhoud die een wiskundige uitdrukking vertegenwoordigt.

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

role = "menu"

Een type widget dat de gebruiker een lijst met keuzes biedt.

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

Een presentatie van een menu dat meestal zichtbaar blijft en meestal horizontaal wordt weergegeven.

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

Een optie in een groep keuzes in een menu of menubalk.

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

Een controleerbare menuitem die drie mogelijke waarden heeft: waar, onwaar of gemengd.

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

Een controleerbare menuitem in een groep menuitemradio-rollen, waarvan er slechts één tegelijk kan worden gecontroleerd.

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

Een verzameling navigatie-elementen (meestal koppelingen) voor het navigeren door het document of gerelateerde documenten.

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

Een sectie waarvan de inhoud tussen haakjes of ondersteunend is aan de hoofdinhoud van de bron.

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

role = "optie"

Een selecteerbaar item in een selectielijst.

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

role = "presentatie"

Een element waarvan de impliciete eigen rolsemantiek niet wordt toegewezen aan de toegankelijkheids-API.

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

Een element dat de voortgangsstatus weergeeft voor taken die lang duren.

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

role = "radio"

Een controleerbare invoer in een groep radiorollen, waarvan er slechts één tegelijk kan worden gecontroleerd.

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

Een groot waarneembaar gedeelte van een webpagina of document, dat volgens de auteur belangrijk genoeg is om te worden opgenomen in een paginasamenvatting of inhoudsopgave, bijvoorbeeld een gedeelte van de pagina met statistieken over live sportevenementen.

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

role = "RadioGroup"

Een groep keuzerondjes.

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

Een rij cellen in een tabelcontainer.

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

role = "rowgroup"

Een groep die een of meer rij-elementen in een raster bevat.

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

role = "rowheader"

Een cel met koptekstinformatie voor een rij in een raster.

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

Een grafisch object dat het schuiven van inhoud binnen een weergavegebied bestuurt, ongeacht of de inhoud volledig in het weergavegebied wordt weergegeven.

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

Een mijlpaalgebied dat een verzameling items en objecten bevat die samen een zoekfunctie vormen.

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

role = "zoekvak"

Een type tekstvak bedoeld voor het opgeven van zoekcriteria.

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

role = "separator"

Een scheidingslijn die delen van inhoud of groepen menuitems scheidt en onderscheidt.

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

role = "slider"

Een gebruikersinvoer waarbij de gebruiker een waarde binnen een bepaald bereik selecteert.

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

role = "SpinButton"

Een vorm van bereik waarvan de gebruiker verwacht dat hij een keuze maakt uit discrete keuzes.

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

role = "status"

Een container waarvan de inhoud adviesinformatie voor de gebruiker is, maar niet belangrijk genoeg is om een waarschuwing te rechtvaardigen, vaak maar niet noodzakelijkerwijs gepresenteerd als een statusbalk.

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

role = "switch"

Een type selectievakje dat aan / uit-waarden vertegenwoordigt, in tegenstelling tot aangevinkte / niet-aangevinkte waarden.

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

role = "tab"

Een groepslabel dat een mechanisme biedt voor het selecteren van de inhoud van het tabblad dat aan de gebruiker moet worden weergegeven.

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

role = "table"

Een sectie met gegevens gerangschikt in rijen en kolommen. De tabelrol is bedoeld voor tabulaire containers die niet interactief zijn.

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

role = "tablist"

Een lijst met tabelementen, die verwijzingen zijn naar tabpaneelelementen.

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

role = "TabPanel"

Een container voor de bronnen die aan een tabblad zijn gekoppeld, waarbij elk tabblad is opgenomen in een tablijst.

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

Invoer die vrije tekst als waarde toestaat.

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

role = "timer"

Een type live-regio met een numerieke teller die een hoeveelheid verstreken tijd aangeeft vanaf een startpunt of de resterende tijd tot een eindpunt.

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

role = "toolbar"

Een verzameling veelgebruikte functieknoppen in een compacte visuele vorm.

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

Een contextuele pop-up die een beschrijving voor een element weergeeft.

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

Meestal is de knopinfo verborgen. Met JavaScript wordt de knopinfo na een vertraging weergegeven wanneer de gebruiker boven het element zweeft dat het beschrijft.

role = "boom"

Een type lijst die geneste groepen op subniveau kan bevatten die kunnen worden samengevouwen en uitgebreid.

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

Een raster waarvan de rijen op dezelfde manier kunnen worden uitgevouwen en samengevouwen als voor een boom.

role = "treeitem"

Een optie-item van een boom. Dit is een element binnen een boom dat kan worden uitgevouwen of samengevouwen als het een groep boomitems op subniveau bevat.

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