ARIA-referens: roller och attribut

alert Widget-roll

Ett element med viktig, ofta tidskänslig information. Läses automatiskt upp av skärmläsare så snart det visas.

Stödda attribut: aria-atomic, aria-busy, aria-live

<div role="alert">
  Er is een fout opgetreden bij het opslaan.
</div>

alertdialog Widget-roll

En modal dialogruta som avbryter användaren med ett viktigt meddelande och förväntar sig ett svar.

Stödda attribut: aria-modal

<div role="alertdialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
  <h2 id="dlg-title">Bevestiging</h2>
  <p id="dlg-desc">Weet je zeker dat je dit wilt verwijderen?</p>
  <button>Annuleren</button>
  <button>Verwijderen</button>
</div>

button Widget-roll

Ett interaktivt element som utför en åtgärd när det aktiveras av användaren.

HTML-motsvarighet: <button>

Stödda attribut: aria-expanded, aria-pressed, aria-disabled, aria-haspopup

<!-- Gebruik altijd een native button: -->
<button type="button">Opslaan</button>

<!-- Alleen als het echt niet anders kan: -->
<div role="button" tabindex="0">Opslaan</div>

checkbox Widget-roll

En kryssruta som kan vara markerad, omarkerad eller delvis markerad.

HTML-motsvarighet: <input type="checkbox">

Stödda attribut: aria-checked, aria-readonly, aria-required, aria-invalid

<!-- Native: -->
<label>
  <input type="checkbox"> Akkoord met voorwaarden
</label>

<!-- Met ARIA: -->
<div role="checkbox" aria-checked="false" tabindex="0">
  Akkoord met voorwaarden
</div>

combobox Widget-roll

Ett inmatningsfält kombinerat med ett popup-element (lista, rutnät eller trädstruktur) som låter användaren välja ett värde.

Stödda attribut: aria-expanded, aria-autocomplete, aria-activedescendant, aria-controls, aria-haspopup

<label for="city">Stad</label>
<input id="city" role="combobox"
  aria-expanded="false"
  aria-controls="city-list"
  aria-autocomplete="list">
<ul id="city-list" role="listbox" hidden>
  <li role="option">Amsterdam</li>
  <li role="option">Rotterdam</li>
</ul>

dialog Widget-roll

En dialogruta som visas ovanpå sidans innehåll. Kan vara modal eller icke-modal.

HTML-motsvarighet: <dialog>

Stödda attribut: aria-modal, aria-labelledby, aria-describedby

<!-- Native HTML: -->
<dialog open aria-labelledby="dlg-title">
  <h2 id="dlg-title">Instellingen</h2>
  <p>Pas je voorkeuren aan.</p>
  <button>Sluiten</button>
</dialog>

grid Widget-roll

En interaktiv tabellstruktur med rader och celler, navigerbar med piltangenter.

Stödda attribut: aria-activedescendant, aria-colcount, aria-rowcount, aria-multiselectable, aria-readonly

<div role="grid" aria-label="Medewerkers">
  <div role="row">
    <div role="columnheader">Naam</div>
    <div role="columnheader">Functie</div>
  </div>
  <div role="row">
    <div role="gridcell">Jan</div>
    <div role="gridcell">Developer</div>
  </div>
</div>

gridcell Widget-roll

En cell i ett rutnät eller trädrutnät.

HTML-motsvarighet: <td>

Stödda attribut: aria-readonly, aria-required, aria-selected, aria-expanded

<div role="row">
  <div role="gridcell" tabindex="0">Bewerkbare cel</div>
</div>

link Widget-roll

En interaktiv referens till en intern eller extern resurs.

HTML-motsvarighet: <a href>

Stödda attribut: aria-expanded, aria-haspopup, aria-disabled

<!-- Native: -->
<a href="/over-ons">Over ons</a>

<!-- Met ARIA (vermijd dit): -->
<span role="link" tabindex="0" onclick="navigate()">Over ons</span>

listbox Widget-roll

En lista där användaren kan välja ett eller flera objekt.

HTML-motsvarighet: <select>

Stödda attribut: aria-multiselectable, aria-required, aria-activedescendant, aria-orientation

<label id="kleur-label">Kies een kleur</label>
<ul role="listbox" aria-labelledby="kleur-label">
  <li role="option" aria-selected="true">Rood</li>
  <li role="option" aria-selected="false">Blauw</li>
  <li role="option" aria-selected="false">Groen</li>
</ul>

menu Widget-roll

En lista med val eller åtgärder för användaren, till exempel en kontextmeny eller åtgärdsmeny.

Stödda attribut: aria-activedescendant, aria-orientation

<button aria-haspopup="true" aria-expanded="false" aria-controls="acties-menu">
  Acties
</button>
<ul id="acties-menu" role="menu">
  <li role="menuitem">Bewerken</li>
  <li role="menuitem">Dupliceren</li>
  <li role="menuitem">Verwijderen</li>
</ul>

menubar Widget-roll

En horisontell menyrad, vanligtvis längst upp i en applikation, med menyobjekt som kan innehålla undermenyer.

Stödda attribut: aria-activedescendant, aria-orientation

<div role="menubar" aria-label="Hoofdmenu">
  <div role="menuitem" aria-haspopup="true">Bestand</div>
  <div role="menuitem" aria-haspopup="true">Bewerken</div>
  <div role="menuitem">Help</div>
</div>

menuitem Widget-roll

Ett objekt i en meny eller menyrad.

Stödda attribut: aria-disabled, aria-expanded, aria-haspopup, aria-posinset, aria-setsize

<ul role="menu">
  <li role="menuitem">Kopieer</li>
  <li role="menuitem">Plak</li>
</ul>

menuitemcheckbox Widget-roll

Ett menyobjekt med en på/av-status (kryssruta i en meny).

Stödda attribut: aria-checked

<ul role="menu">
  <li role="menuitemcheckbox" aria-checked="true">Donkere modus</li>
  <li role="menuitemcheckbox" aria-checked="false">Compacte weergave</li>
</ul>

menuitemradio Widget-roll

Ett menyobjekt i en grupp där bara ett kan vara valt åt gången.

Stödda attribut: aria-checked

<ul role="menu">
  <li role="menuitemradio" aria-checked="true">Klein</li>
  <li role="menuitemradio" aria-checked="false">Middel</li>
  <li role="menuitemradio" aria-checked="false">Groot</li>
</ul>

option Widget-roll

Ett valbart objekt i en listbox.

HTML-motsvarighet: <option>

Stödda attribut: aria-selected, aria-checked, aria-disabled, aria-posinset, aria-setsize

<ul role="listbox">
  <li role="option" aria-selected="true">Optie 1</li>
  <li role="option" aria-selected="false">Optie 2</li>
</ul>

progressbar Widget-roll

Visar förloppet för en långvarig uppgift.

HTML-motsvarighet: <progress>

Stödda attribut: aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext

<!-- Native: -->
<progress value="70" max="100">70%</progress>

<!-- Met ARIA: -->
<div role="progressbar"
  aria-valuenow="70"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Uploadvoortgang">
  70%
</div>

radio Widget-roll

En alternativknapp i en grupp där bara en kan vara vald åt gången.

HTML-motsvarighet: <input type="radio">

Stödda attribut: aria-checked, aria-disabled, aria-posinset, aria-setsize

<!-- Native: -->
<fieldset>
  <legend>Bezorgmethode</legend>
  <label><input type="radio" name="bezorg" value="post"> Post</label>
  <label><input type="radio" name="bezorg" value="afhalen"> Afhalen</label>
</fieldset>

radiogroup Widget-roll

En grupp alternativknappar där bara en kan vara vald åt gången.

HTML-motsvarighet: <fieldset>

Stödda attribut: aria-required, aria-readonly, aria-orientation

<div role="radiogroup" aria-labelledby="groep-label">
  <span id="groep-label">Taal</span>
  <div role="radio" aria-checked="true" tabindex="0">Nederlands</div>
  <div role="radio" aria-checked="false" tabindex="-1">Engels</div>
</div>

scrollbar Widget-roll

Ett grafiskt objekt som anger rullningspositionen inom ett rullningsbart område.

Stödda attribut: aria-controls, aria-orientation, aria-valuenow, aria-valuemin, aria-valuemax

<div role="scrollbar"
  aria-controls="content"
  aria-orientation="vertical"
  aria-valuenow="25"
  aria-valuemin="0"
  aria-valuemax="100"
  tabindex="0">
</div>

searchbox Widget-roll

Ett textfält specifikt avsett för sökfunktionalitet.

HTML-motsvarighet: <input type="search">

Stödda attribut: aria-activedescendant, aria-autocomplete, aria-placeholder

<label for="zoek">Zoeken</label>
<input id="zoek" type="search" role="searchbox"
  aria-autocomplete="list"
  aria-controls="suggesties">

slider Widget-roll

Ett inmatningselement som låter användaren välja ett värde inom ett intervall genom att flytta ett reglage.

HTML-motsvarighet: <input type="range">

Stödda attribut: aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext, aria-orientation

<!-- Native: -->
<label for="volume">Volume</label>
<input id="volume" type="range" min="0" max="100" value="50">

<!-- Met ARIA: -->
<div role="slider"
  aria-label="Volume"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  tabindex="0">
</div>

spinbutton Widget-roll

Ett inmatningsfält för numeriska värden med knappar för att öka eller minska värdet.

HTML-motsvarighet: <input type="number">

Stödda attribut: aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext, aria-required, aria-readonly

<label for="aantal">Aantal</label>
<input id="aantal" type="number" role="spinbutton"
  aria-valuenow="1"
  aria-valuemin="0"
  aria-valuemax="99">

switch Widget-roll

En strömbrytare som kan vara på eller av, liknande en fysisk ljusbrytare.

Stödda attribut: aria-checked

<button role="switch" aria-checked="false">
  Donkere modus
</button>

tab Widget-roll

En flik i en fliklista som aktiverar en flikpanel när den väljs.

Stödda attribut: aria-selected, aria-controls, aria-disabled, aria-expanded, aria-haspopup

<div role="tablist" aria-label="Instellingen">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">Algemeen</button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">Privacy</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">Inhoud algemeen...</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>Inhoud privacy...</div>

tablist Widget-roll

En lista med flikar som var och en aktiverar en flikpanel.

Stödda attribut: aria-activedescendant, aria-orientation, aria-multiselectable

<div role="tablist" aria-label="Productinformatie">
  <button role="tab" aria-selected="true">Beschrijving</button>
  <button role="tab" aria-selected="false">Reviews</button>
</div>

tabpanel Widget-roll

Innehållspanelen som hör till en flik.

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p>Inhoud van het eerste tabblad.</p>
</div>

textbox Widget-roll

Ett inmatningsfält för fritext, till exempel ett textfält eller ett flerradigt textområde.

HTML-motsvarighet: <input> / <textarea>

Stödda attribut: aria-activedescendant, aria-autocomplete, aria-multiline, aria-placeholder, aria-readonly, aria-required

<!-- Eenregelig: -->
<label for="naam">Naam</label>
<input id="naam" type="text">

<!-- Meerregelig: -->
<label for="bericht">Bericht</label>
<textarea id="bericht"></textarea>

tooltip Widget-roll

En kontextuell popup med beskrivande information om ett element, vanligtvis synlig vid hovring eller fokus.

<button aria-describedby="tip1">Opslaan</button>
<div role="tooltip" id="tip1">Sla je wijzigingen op (Ctrl+S)</div>

tree Widget-roll

En hierarkisk lista med objekt som kan expanderas och komprimeras, till exempel en filstruktur.

Stödda attribut: aria-multiselectable, aria-activedescendant, aria-orientation

<ul role="tree" aria-label="Bestanden">
  <li role="treeitem" aria-expanded="true">src/
    <ul role="group">
      <li role="treeitem">index.js</li>
      <li role="treeitem">style.css</li>
    </ul>
  </li>
</ul>

treegrid Widget-roll

Ett rutnät vars rader kan expanderas och komprimeras som en trädstruktur.

Stödda attribut: aria-activedescendant, aria-multiselectable

<table role="treegrid" aria-label="Afdelingen">
  <tr role="row" aria-expanded="true" aria-level="1">
    <td role="gridcell">Engineering</td>
  </tr>
  <tr role="row" aria-level="2">
    <td role="gridcell">Frontend team</td>
  </tr>
</table>

treeitem Widget-roll

Ett objekt i ett träd. Kan innehålla barn och expanderas/komprimeras.

Stödda attribut: aria-expanded, aria-selected, aria-checked, aria-level, aria-posinset, aria-setsize

<li role="treeitem" aria-expanded="false" aria-level="1">
  Documenten
  <ul role="group" hidden>
    <li role="treeitem" aria-level="2">Rapport.pdf</li>
  </ul>
</li>

banner Landmark-roll

Det webbplatsövergripande sidhuvudet med logotyp, navigering och sökfunktionalitet. Som standard är <header>-elementet i body en banner.

HTML-motsvarighet: <header>

<header>
  <a href="/">Logo</a>
  <nav aria-label="Hoofdnavigatie">...</nav>
</header>

complementary Landmark-roll

Kompletterande innehåll som är relaterat till huvudinnehållet men även kan användas självständigt, till exempel en sidopanel.

HTML-motsvarighet: <aside>

<aside aria-label="Gerelateerde artikelen">
  <h2>Lees ook</h2>
  <ul>...</ul>
</aside>

contentinfo Landmark-roll

Den webbplatsövergripande sidfoten med upphovsrätt, kontaktuppgifter och länkar. Som standard är <footer>-elementet i body en contentinfo.

HTML-motsvarighet: <footer>

<footer>
  <p>&copy; 2025 Bedrijfsnaam</p>
  <nav aria-label="Footernavigatie">...</nav>
</footer>

form Landmark-roll

En region med formulärelement. Blir först en landmark när den har ett tillgängligt namn.

HTML-motsvarighet: <form>

<form aria-labelledby="form-title">
  <h2 id="form-title">Contactformulier</h2>
  <label for="email">E-mail</label>
  <input id="email" type="email">
  <button type="submit">Versturen</button>
</form>

main Landmark-roll

Sidans huvudinnehåll. Bara ett synligt main-element är tillåtet per sida.

HTML-motsvarighet: <main>

<main id="main-content">
  <h1>Paginatitel</h1>
  <p>Hoofdinhoud van de pagina.</p>
</main>

navigation Landmark-roll

En region med navigeringslänkar till andra sidor eller avsnitt på sidan.

HTML-motsvarighet: <nav>

<nav aria-label="Hoofdnavigatie">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/diensten">Diensten</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

region Landmark-roll

Ett generiskt landmärkeområde som är tillräckligt viktigt för att visas i landmärkeslistan. Kräver ett tillgängligt namn.

HTML-motsvarighet: <section>

<section aria-labelledby="sec-title">
  <h2 id="sec-title">Laatste nieuws</h2>
  <p>Inhoud van deze sectie.</p>
</section>

search Landmark-roll

En region med sökfunktionalitet för webbplatsen eller applikationen.

HTML-motsvarighet: <search>

<!-- HTML: -->
<search>
  <label for="zoek">Zoeken</label>
  <input id="zoek" type="search">
  <button>Zoek</button>
</search>

<!-- Met ARIA: -->
<form role="search" aria-label="Site doorzoeken">
  <input type="search" aria-label="Zoeken">
  <button>Zoek</button>
</form>

application Dokumentstruktur

Anger att en region beter sig som en skrivbordsapplikation. Skärmläsare växlar till applikationsläge. Använd med stor försiktighet.

Stödda attribut: aria-activedescendant

<!-- Gebruik alleen voor echte webapplicaties zoals een
     spreadsheet of teksteditor. NIET voor gewone websites. -->
<div role="application" aria-label="Spreadsheet">
  ...
</div>

article Dokumentstruktur

Ett oberoende innehållsstycke som kan stå för sig själv, till exempel ett blogginlägg, en nyhetsartikel eller en kommentar.

HTML-motsvarighet: <article>

<article>
  <h2>Titel van het artikel</h2>
  <p>Inhoud van het artikel.</p>
  <footer>Gepubliceerd op 1 januari 2025</footer>
</article>

cell Dokumentstruktur

En cell i en tabell.

HTML-motsvarighet: <td>

Stödda attribut: aria-colindex, aria-colspan, aria-rowindex, aria-rowspan

<table>
  <tr>
    <td>Celinhoud</td>
  </tr>
</table>

columnheader Dokumentstruktur

En rubrikcell för en kolumn i en tabell eller ett rutnät.

HTML-motsvarighet: <th>

Stödda attribut: aria-sort, aria-colindex

<table>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">Naam</th>
      <th scope="col">E-mail</th>
    </tr>
  </thead>
</table>

definition Dokumentstruktur

Definitionen av en term.

HTML-motsvarighet: <dd>

<dl>
  <dt>WCAG</dt>
  <dd role="definition">Web Content Accessibility Guidelines</dd>
</dl>

document Dokumentstruktur

Markerar innehåll som ett dokument som kan läsas, till skillnad från en applikation. Detta är standardläget för webbsidor.

<!-- Handig binnen een role="application" om terug
     te schakelen naar documentmodus: -->
<div role="application">
  <div role="document">
    <p>Deze tekst kan normaal gelezen worden.</p>
  </div>
</div>

feed Dokumentstruktur

En rullningsbar lista med artiklar där nya artiklar laddas automatiskt när användaren rullar.

Stödda attribut: aria-busy, aria-setsize

<div role="feed" aria-label="Nieuwsfeed">
  <article aria-posinset="1" aria-setsize="-1">
    <h2>Eerste bericht</h2>
  </article>
  <article aria-posinset="2" aria-setsize="-1">
    <h2>Tweede bericht</h2>
  </article>
</div>

figure Dokumentstruktur

Ett visuellt element med en valfri bildtext, till exempel en bild, ett diagram eller ett kodfragment.

HTML-motsvarighet: <figure>

<figure>
  <img src="grafiek.png" alt="Omzetgrafiek Q4 2025">
  <figcaption>Figuur 1: Omzet per kwartaal</figcaption>
</figure>

group Dokumentstruktur

En grupp relaterade element som inte är avsedd som landmärke.

HTML-motsvarighet: <fieldset>

Stödda attribut: aria-activedescendant, aria-disabled

<fieldset>
  <legend>Adresgegevens</legend>
  <label for="straat">Straat</label>
  <input id="straat">
  <label for="plaats">Plaats</label>
  <input id="plaats">
</fieldset>

heading Dokumentstruktur

En rubrik för ett avsnitt på sidan. Använd alltid nativa HTML-rubriker (h1-h6) istället för denna roll.

HTML-motsvarighet: <h1> - <h6>

Stödda attribut: aria-level

<!-- Gebruik altijd native koppen: -->
<h1>Hoofdtitel</h1>
<h2>Subtitel</h2>

<!-- Alleen als het echt niet anders kan: -->
<div role="heading" aria-level="2">Subtitel</div>

img Dokumentstruktur

En bild eller visuellt element. Används för komplexa bilder som består av flera element (t.ex. SVG).

HTML-motsvarighet: <img>

<!-- Native: -->
<img src="logo.png" alt="Bedrijfslogo">

<!-- SVG als afbeelding: -->
<svg role="img" aria-label="Staafgrafiek met omzetcijfers">
  ...
</svg>

list Dokumentstruktur

En lista med objekt.

HTML-motsvarighet: <ul> / <ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

listitem Dokumentstruktur

Ett objekt i en lista.

HTML-motsvarighet: <li>

Stödda attribut: aria-level, aria-posinset, aria-setsize

<ul>
  <li>Lijstitem</li>
</ul>

math Dokumentstruktur

Ett matematiskt uttryck.

HTML-motsvarighet: <math>

<div role="math" aria-label="a kwadraat plus b kwadraat is c kwadraat">
  a&sup2; + b&sup2; = c&sup2;
</div>

none Dokumentstruktur

Tar bort den semantiska betydelsen av ett element. Synonym för presentation. Elementet blir osynligt för skärmläsare men innehållet förblir tillgängligt.

<!-- Verwijder de semantiek van een tabel die alleen
     voor layout wordt gebruikt: -->
<table role="none">
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

note Dokumentstruktur

En anmärkning eller komplettering till huvudinnehållet.

<div role="note">
  <strong>Let op:</strong> Deze functie is alleen beschikbaar voor premium-gebruikers.
</div>

presentation Dokumentstruktur

Tar bort den semantiska betydelsen av ett element. Synonym för none.

<!-- Decoratieve afbeelding: -->
<img src="decoratie.png" role="presentation" alt="">

<!-- Layout-tabel: -->
<table role="presentation">
  <tr><td>Geen echte tabel</td></tr>
</table>

row Dokumentstruktur

En rad i en tabell, ett rutnät eller trädrutnät.

HTML-motsvarighet: <tr>

Stödda attribut: aria-colindex, aria-expanded, aria-level, aria-rowindex, aria-selected

<table>
  <tr>
    <td>Cel 1</td>
    <td>Cel 2</td>
  </tr>
</table>

rowgroup Dokumentstruktur

En grupp rader i en tabell (thead, tbody, tfoot).

HTML-motsvarighet: <thead> / <tbody> / <tfoot>

<table>
  <thead>
    <tr><th>Kop</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

rowheader Dokumentstruktur

En rubrikcell för en rad i en tabell.

HTML-motsvarighet: <th scope="row">

Stödda attribut: aria-sort, aria-rowindex

<table>
  <tr>
    <th scope="row">Januari</th>
    <td>150</td>
    <td>200</td>
  </tr>
</table>

separator Dokumentstruktur

En avskiljare mellan avsnitt eller grupper av menyobjekt. Kan vara fokuserbar om det är en justerbar avskiljare.

HTML-motsvarighet: <hr>

Stödda attribut: aria-orientation, aria-valuenow, aria-valuemin, aria-valuemax

<!-- Decoratief: -->
<hr>

<!-- Focusbaar (instelbare paneelscheiding): -->
<div role="separator"
  tabindex="0"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100">
</div>

table Dokumentstruktur

En icke-interaktiv tabell med data ordnade i rader och kolumner.

HTML-motsvarighet: <table>

Stödda attribut: aria-colcount, aria-rowcount

<table>
  <caption>Omzet per kwartaal</caption>
  <thead>
    <tr><th>Kwartaal</th><th>Omzet</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>&euro; 50.000</td></tr>
  </tbody>
</table>

term Dokumentstruktur

Ett ord eller en fras med en tillhörande definition.

HTML-motsvarighet: <dt>

<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications</dd>
</dl>

toolbar Dokumentstruktur

Ett verktygsfält med knappar eller andra kontroller, grupperade som en logisk enhet.

Stödda attribut: aria-activedescendant, aria-orientation

<div role="toolbar" aria-label="Tekstopmaak">
  <button aria-pressed="false">Vet</button>
  <button aria-pressed="false">Cursief</button>
  <button aria-pressed="false">Onderstreept</button>
</div>

log Live region

En region där ny information läggs till i kronologisk ordning, till exempel en chattlogg eller aktivitetslogg.

Stödda attribut: aria-live, aria-relevant

<div role="log" aria-label="Chatberichten" aria-live="polite">
  <p>Jan: Hallo!</p>
  <p>Piet: Goedemorgen!</p>
</div>

marquee Live region

En region med icke-väsentlig information som ändras regelbundet, till exempel en rullande nyhetsticker.

Stödda attribut: aria-live

<div role="marquee" aria-label="Koerswijzigingen" aria-live="off">
  AEX: +1,2% | DAX: -0,5%
</div>

status Live region

En region med statusmeddelanden som inte är tillräckligt viktiga för att meddelas som alert. Har implicit aria-live="polite".

HTML-motsvarighet: <output>

Stödda attribut: aria-atomic, aria-live

<!-- Native: -->
<output>3 resultaten gevonden</output>

<!-- Met ARIA: -->
<div role="status">3 resultaten gevonden</div>

timer Live region

Ett element som visar en löpande timer eller nedräkning.

<div role="timer" aria-label="Resterende tijd" aria-live="off">
  02:30
</div>

aria-busy State

Anger att ett element uppdateras och att hjälpmedel bör vänta tills uppdateringen är klar.

Värde: true | false

Används av: alle rollen

<div role="feed" aria-busy="true">
  Laden...
</div>

aria-checked State

Anger aktuell markerad status för kryssrutor, alternativknappar och strömbrytare.

Värde: true | false | mixed | undefined

HTML-motsvarighet: checked

Används av: checkbox, menuitemcheckbox, menuitemradio, option, radio, switch, treeitem

<div role="checkbox" aria-checked="false" tabindex="0">
  Onthoud mij
</div>

aria-current State

Anger vilket element som är det aktuella objektet i en uppsättning, till exempel den aktuella sidan i navigeringen.

Värde: token

Används av: alle rollen

<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/diensten">Diensten</a>
  <a href="/contact">Contact</a>
</nav>

aria-disabled State

Anger att ett element är synligt men inte interaktivt. Till skillnad från HTML-attributet disabled är elementet fortfarande fokuserbart.

Värde: true | false

HTML-motsvarighet: disabled

Används av: button, link, menuitem, tab, input-rollen

<button aria-disabled="true">
  Versturen (niet beschikbaar)
</button>

aria-expanded State

Anger om ett element (t.ex. en menylista eller trädstruktur) är expanderat eller komprimerat.

Värde: true | false | undefined

Används av: button, combobox, link, menuitem, tab, treeitem

<button aria-expanded="false" aria-controls="menu1">
  Menu
</button>
<ul id="menu1" hidden>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

aria-hidden State

Döljer ett element och alla dess barn för hjälpmedel. Elementet förblir visuellt synligt. Använd med försiktighet.

Värde: true | false | undefined

Används av: alle rollen

<!-- Decoratief icoon verbergen: -->
<button>
  <span aria-hidden="true">&#x2716;</span>
  Sluiten
</button>

aria-invalid State

Anger att det inmatade värdet inte uppfyller förväntat format.

Värde: token

Används av: textbox, combobox, listbox, spinbutton, checkbox, radio

<label for="email">E-mail</label>
<input id="email" type="email"
  aria-invalid="true"
  aria-errormessage="email-err">
<span id="email-err">Voer een geldig e-mailadres in.</span>

aria-pressed State

Anger den nedtryckta statusen för en växelknapp.

Värde: true | false | mixed | undefined

Används av: button

<button aria-pressed="false">
  Donkere modus
</button>

aria-selected State

Anger den valda statusen för objekt i en lista, flik eller rutnät.

Värde: true | false | undefined

HTML-motsvarighet: selected

Används av: option, tab, gridcell, row, treeitem

<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>

aria-autocomplete Property

Anger om och hur ett textfält visar automatiska förslag vid inmatning.

Värde: token

Används av: combobox, textbox, searchbox

<input role="combobox"
  aria-autocomplete="list"
  aria-controls="suggesties"
  aria-expanded="false">

aria-haspopup Property

Anger att ett element kan utlösa ett popup-element (meny, listbox, träd, rutnät eller dialog).

Värde: token

Används av: button, combobox, link, menuitem, tab, textbox

<button aria-haspopup="menu" aria-expanded="false">
  Opties
</button>

aria-level Property

Definierar den hierarkiska nivån för ett element inom en struktur (t.ex. rubriknivå, träddjup).

Värde: integer

Används av: heading, listitem, row, treeitem

<!-- h1-h6 hebben impliciet een level.
     Gebruik aria-level alleen als je role="heading" gebruikt: -->
<div role="heading" aria-level="3">Subtitel</div>

aria-modal Property

Anger att en dialog är modal: resten av sidan är inte tillgänglig så länge dialogrutan är öppen.

Värde: true | false

Används av: dialog, alertdialog

<div role="dialog" aria-modal="true" aria-labelledby="titel">
  <h2 id="titel">Bevestiging</h2>
  <p>Weet je het zeker?</p>
  <button>Ja</button>
  <button>Nee</button>
</div>

aria-multiline Property

Anger om ett textfält accepterar flera rader text.

Värde: true | false

Används av: textbox

<div role="textbox" aria-multiline="true" contenteditable="true"
  aria-label="Bericht">
</div>

aria-multiselectable Property

Anger att flera objekt kan väljas samtidigt i en lista, ett rutnät eller träd.

Värde: true | false

HTML-motsvarighet: multiple

Används av: grid, listbox, tablist, tree

<ul role="listbox" aria-multiselectable="true" aria-label="Kleuren">
  <li role="option" aria-selected="true">Rood</li>
  <li role="option" aria-selected="true">Blauw</li>
  <li role="option" aria-selected="false">Groen</li>
</ul>

aria-orientation Property

Anger om ett element är orienterat horisontellt eller vertikalt.

Värde: token

Används av: scrollbar, separator, slider, tablist, toolbar, listbox, menu, menubar, radiogroup, tree

<div role="tablist" aria-orientation="vertical">
  <button role="tab">Tab 1</button>
  <button role="tab">Tab 2</button>
</div>

aria-placeholder Property

Definierar en ledtråd som beskriver vilket värde som förväntas, synlig när fältet är tomt.

Värde: string

HTML-motsvarighet: placeholder

Används av: textbox, searchbox

<!-- Gebruik bij voorkeur het HTML-attribuut: -->
<input type="text" placeholder="bijv. jan@voorbeeld.nl">

aria-readonly Property

Anger att ett element inte är redigerbart men fortfarande läsbart och fokuserbart.

Värde: true | false

HTML-motsvarighet: readonly

Används av: checkbox, combobox, grid, gridcell, listbox, radiogroup, slider, spinbutton, textbox

<input type="text" readonly aria-readonly="true" value="Niet bewerkbaar">

aria-required Property

Anger att ett formulärfält måste fyllas i innan formuläret kan skickas.

Värde: true | false

HTML-motsvarighet: required

Används av: checkbox, combobox, gridcell, listbox, radiogroup, spinbutton, textbox, tree

<!-- Gebruik bij voorkeur het HTML-attribuut: -->
<label for="naam">Naam *</label>
<input id="naam" type="text" required>

aria-roledescription Property

Definierar en mänskligt läsbar, anpassad beskrivning av ett elements roll. Använd sparsamt.

Värde: string

Används av: alle rollen (behalve abstract)

<div role="region" aria-roledescription="carrousel" aria-label="Uitgelichte producten">
  ...
</div>

aria-sort Property

Anger om och hur en kolumn eller rad i en tabell är sorterad.

Värde: token

Används av: columnheader, rowheader

<table>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        Naam
        <button>Sorteer</button>
      </th>
    </tr>
  </thead>
</table>

aria-valuemax Property

Definierar det maximalt tillåtna värdet för en intervall-widget.

Värde: number

HTML-motsvarighet: max

Används av: progressbar, scrollbar, separator, slider, spinbutton

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>

aria-valuemin Property

Definierar det minimalt tillåtna värdet för en intervall-widget.

Värde: number

HTML-motsvarighet: min

Används av: progressbar, scrollbar, separator, slider, spinbutton

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
</div>

aria-valuenow Property

Definierar det aktuella värdet för en intervall-widget.

Värde: number

HTML-motsvarighet: value

Används av: progressbar, scrollbar, separator, slider, spinbutton

<progress role="progressbar"
  aria-valuenow="70"
  aria-valuemin="0"
  aria-valuemax="100">
  70%
</progress>

aria-valuetext Property

Definierar en mänskligt läsbar text som alternativ till det numeriska värdet i aria-valuenow.

Värde: string

Används av: progressbar, scrollbar, separator, slider, spinbutton

<div role="slider"
  aria-valuenow="3"
  aria-valuemin="1"
  aria-valuemax="5"
  aria-valuetext="Gemiddeld"
  aria-label="Tevredenheid">
</div>

aria-activedescendant Relationsattribut

Refererar till ID:t för det för tillfället aktiva barnelement i en sammansatt widget, utan att flytta DOM-fokus.

Värde: ID-referentie

Används av: combobox, grid, group, listbox, menu, menubar, radiogroup, tablist, tree, treegrid

<ul role="listbox" aria-activedescendant="opt2" tabindex="0">
  <li role="option" id="opt1">Optie 1</li>
  <li role="option" id="opt2">Optie 2</li>
  <li role="option" id="opt3">Optie 3</li>
</ul>

aria-controls Relationsattribut

Refererar till ID:t för det element som styrs av detta element.

Värde: ID-referentie(s)

Används av: button, combobox, scrollbar, tab, textbox

<button aria-expanded="false" aria-controls="dropdown">
  Menu openen
</button>
<ul id="dropdown" hidden>
  <li>Item 1</li>
</ul>

aria-describedby Relationsattribut

Refererar till ID:n för element som ger ytterligare beskrivande information om detta element.

Värde: ID-referentie(s)

Används av: alle rollen

<label for="ww">Wachtwoord</label>
<input id="ww" type="password" aria-describedby="ww-eisen">
<p id="ww-eisen">Minimaal 8 tekens, met een hoofdletter en cijfer.</p>

aria-details Relationsattribut

Refererar till ett element med detaljerad information, som komplement till aria-describedby.

Värde: ID-referentie

Används av: alle rollen

<img src="grafiek.png" alt="Omzetgrafiek" aria-details="grafiek-data">
<table id="grafiek-data">
  <caption>Omzetgegevens</caption>
  ...
</table>

aria-errormessage Relationsattribut

Refererar till ID:t för det element som innehåller felmeddelandet för detta element. Läses bara upp när aria-invalid="true".

Värde: ID-referentie

Används av: textbox, combobox, listbox, spinbutton, checkbox, radiogroup

<label for="email">E-mail</label>
<input id="email" type="email"
  aria-invalid="true"
  aria-errormessage="email-fout">
<span id="email-fout" role="alert">
  Voer een geldig e-mailadres in.
</span>

aria-flowto Relationsattribut

Anger en alternativ läsordning genom att referera till nästa element i flödet.

Värde: ID-referentie(s)

Används av: alle rollen

<div aria-flowto="sectie2">Eerst lezen</div>
<div id="sectie3">Dit wordt overgeslagen</div>
<div id="sectie2">Dan dit lezen</div>

aria-label Relationsattribut

Definierar en textetikett för ett element som inte har en synlig etikett. Skriver över befintlig text för skärmläsare.

Värde: string

Används av: alle rollen (behalve presentatie)

<button aria-label="Sluiten">
  <svg aria-hidden="true"><!-- X-icoon --></svg>
</button>

<nav aria-label="Hoofdnavigatie">
  ...
</nav>

aria-labelledby Relationsattribut

Refererar till ID:n för element som fungerar som etikett för detta element. Har företräde framför aria-label och HTML-elementet label.

Värde: ID-referentie(s)

HTML-motsvarighet: <label for>

Används av: alle rollen (behalve presentatie)

<h2 id="sec-titel">Contactgegevens</h2>
<form aria-labelledby="sec-titel">
  <label for="tel">Telefoon</label>
  <input id="tel" type="tel">
</form>

aria-owns Relationsattribut

Definierar en förälder-barn-relation när DOM-strukturen inte återspeglar detta. Använd sparsamt.

Värde: ID-referentie(s)

Används av: alle rollen

<!-- Menu-button en menu staan niet genest in de DOM,
     maar logisch is het menu een kind van de button: -->
<button aria-owns="los-menu" aria-expanded="true">Acties</button>
<ul id="los-menu" role="menu">
  <li role="menuitem">Opslaan</li>
</ul>

aria-atomic Live region-attribut

Anger om hjälpmedel ska läsa upp hela live-regionen (true) eller bara de ändrade delarna (false).

Värde: true | false

Används av: alle rollen (in live-regio's)

<div role="status" aria-live="polite" aria-atomic="true">
  3 van 10 items geladen
</div>

aria-live Live region-attribut

Anger att innehållet i ett element kan ändras dynamiskt och att hjälpmedel ska meddela dessa ändringar.

Värde: token

Används av: alle rollen

<!-- Beleefd: wacht tot de gebruiker klaar is -->
<div aria-live="polite">3 resultaten gevonden</div>

<!-- Assertief: onderbreek de gebruiker -->
<div aria-live="assertive">Sessie verloopt over 2 minuten!</div>

aria-relevant Live region-attribut

Anger vilka typer av ändringar i en live-region som är relevanta: tillägg, borttagningar, text eller allt.

Värde: token list

Används av: alle rollen (in live-regio's)

<div role="log"
  aria-live="polite"
  aria-relevant="additions">
  <!-- Alleen nieuwe berichten worden aangekondigd -->
</div>