HTML
ARIA

Syntax

• aria-live
• aria relevanta
• aria-autoslutförande
• aria kontrolleras
• aria-disabled
• aria-expanderad
• aria-haspopup
• aria-gömd
• aria-invalid
• aria-etikett
• aria-nivå
• aria-multiline
• aria-multiselectable
• aria-orientering
• aria pressade
• aria-readonly
• aria-required
• aria-valda
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• aria-atom
• aria-upptagen
• aria-dropeffect
• aria-släpade
• aria-activedescendant
• aria-kontroller
• aria-describedby
• aria-flowto
• aria-labelledby
• aria-äger
• aria-posinset
• aria-setSize

Anmärkningar

role = "alert"

Ett meddelande med viktig, och vanligtvis tidskänslig, information.

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

Observera att jag har inkluderat både role="alert" och aria-live="assertive" på samma gång. Dessa är synonyma attribut, men vissa skärmläsare stöder bara det ena eller det andra. Genom att använda båda samtidigt maximerar vi därför chansen att den levande regionen fungerar som förväntat.

Källa - Heydon Pickering "Några praktiska ARIA-exempel"

role = "alertdialog"

En typ av dialog som innehåller ett varningsmeddelande, där initialt fokus går till ett element i dialogrutan.

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

role = "application"

En region som deklarerats som en webbapplikation, i motsats till ett webbdokument. I det här exemplet är applikationen en enkel kalkylator som kan lägga till två siffror tillsammans.

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

role = "artikel"

Ett avsnitt på en sida som består av en komposition som utgör en oberoende del av ett dokument, en sida eller en webbplats.

---

Att ställa in en ARIA-roll och / eller aria- * -attribut som matchar standard implicit ARIA-semantik är onödigt och rekommenderas inte eftersom dessa egenskaper redan ställs in av webbläsaren.

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

Du skulle använda role=article om icke-semantiska element (rekommenderas inte, ogiltig)

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

---

W3C Entry for role=article

role = "banner"

En region som huvudsakligen innehåller platsorienterat innehåll snarare än sidspecifikt innehåll.

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

En ingång som möjliggör användarutlösade åtgärder när du klickar eller trycker på den.

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

role = "cell"

En cell i en tabellbehållare.

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

role = "kryssrutan"

En kontrollerbar ingång som har tre möjliga värden: sant, falskt eller blandat.

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

role = "columnheader"

En cell som innehåller rubrikinformation för en kolumn.

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

En presentation av en utvald; vanligtvis liknande en textlåda där användare kan skriva i förväg för att välja ett alternativ, eller skriva för att ange godtycklig text som ett nytt objekt i listan.

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

Vanligtvis skulle du använda JavaScript för att bygga resten av typhuvudet eller listvalsfunktionen.

role = "kompletterande"

En stödjande del av dokumentet, utformad för att komplettera huvudinnehållet på en liknande nivå i DOM-hierarkin, men förblir meningsfull när den separeras från huvudinnehållet.

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

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

role = "contentinfo"

En stor uppfattbar region som innehåller information om överordnade dokument.

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

role = "definition"

En definition av en term eller ett begrepp.

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

role = "dialog"

En dialogruta är ett applikationsfönster som är utformat för att avbryta den aktuella behandlingen av en applikation för att uppmana användaren att ange information eller kräva svar.

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

role = "directory"

En lista med referenser till medlemmar i en grupp, till exempel en statisk innehållsförteckning.

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

En region som innehåller relaterad information som deklareras som dokumentinnehåll, i motsats till en webbapplikation.

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

role = "form"

Ett landmärkeområde som innehåller en samling av objekt och objekt som i sin helhet kombineras för att skapa en form.

Att använda det semantiskt korrekta HTML-elementet <form> innebär standard-semantik för ARIA, vilket innebär att role=form inte krävs, eftersom du inte bör tillämpa en kontrasterande roll på ett element som redan är semantiskt, eftersom att lägga till en roll åsidosätter det ursprungliga semantiken för ett element.

Att ställa in en ARIA-roll och / eller aria- * -attribut som matchar standard implicit ARIA-semantik är onödigt och rekommenderas inte eftersom dessa egenskaper redan ställs in av webbläsaren.

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

Du skulle använda role=form på icke-semantiska element (rekommenderas inte, ogiltigt)

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

role = "grid"

Ett rutnät är en interaktiv kontroll som innehåller celler med tabelldata ordnade i rader och kolumner, som en tabell.

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

role = "gridcell"

En cell i ett rutnät eller tregrid.

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

En uppsättning användargränssnittsobjekt som inte är avsedda att inkluderas i en sidöversikt eller innehållsförteckning med hjälp av teknik.

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

role = "rubriken"

En rubrik för ett avsnitt på sidan.

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

role = "img"

En behållare för en samling element som bildar en bild.

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

role = "link"

En interaktiv referens till en intern eller extern resurs som, när den aktiveras, får användaragenten att navigera till den resursen.

I de flesta fall är det inte nödvändigt att ställa in en ARIA-roll och / eller aria- * -attribut som matchar den standardimplicerade ARIA-semantiken och rekommenderas inte eftersom dessa egenskaper redan ställs in av webbläsaren.

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

role = "lista"

En grupp icke-interaktiva listobjekt.

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

role = "listrutan"

En widget som gör att användaren kan välja ett eller flera objekt från en lista med val.

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

Vanligtvis skulle du använda JavaScript för att bygga flervalsfunktionen.

role = "listitem"

Ett enda objekt i en lista eller katalog.

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

role = "log"

En typ av levande region där ny information läggs till i meningsfull ordning och gammal information kan försvinna.

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

role = "main"

Huvudinnehållet i ett dokument.

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

role = "tält"

En typ av levande region där information som inte är nödvändig ändras ofta.

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

role = "matte"

Innehåll som representerar ett matematiskt uttryck.

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

role = "menu"

En typ av widget som erbjuder en lista med val för användaren.

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

En presentation av menyn som vanligtvis förblir synlig och som vanligtvis presenteras horisontellt.

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

Ett alternativ i en grupp av val som finns i en meny eller menyraden.

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

En kontrollerbar meny som har tre möjliga värden: sant, falskt eller blandat.

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

En kontrollerbar menuitem i en grupp menuitemradio-roller, varav endast en kan kontrolleras åt gången.

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

En samling navigationselement (vanligtvis länkar) för att navigera i dokumentet eller relaterade dokument.

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

Ett avsnitt vars innehåll är parentetiskt eller tillhörande huvudinnehållet i resursen.

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

role = "option"

Ett valbart objekt i en väljlista.

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

role = "presentation"

Ett element vars implicita ursprungliga rollsemantik inte kommer att mappas till tillgänglighets-API: et.

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

Ett element som visar framstegsstatus för uppgifter som tar lång tid.

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

role = "radio"

En kontrollerbar ingång i en grupp radioroller, av vilka endast en kan kontrolleras åt gången.

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

Ett stort märkbart avsnitt av en webbsida eller ett dokument som författaren tycker är viktigt nog för att ingå i en sidöversikt eller innehållsförteckning, till exempel ett område på sidan som innehåller levande statistik över idrottsevenemang.

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

role = "radiogroup"

En grupp radioknappar.

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

En rad med celler i en tabellbehållare.

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

role = "rowgroup"

En grupp som innehåller ett eller flera radelement i ett rutnät.

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

role = "rowheader"

En cell som innehåller rubrikinformation för en rad i ett rutnät.

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

Ett grafiskt objekt som styr rullning av innehåll inom ett visningsområde, oavsett om innehållet visas helt i visningsområdet.

<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 = "sök"

Ett landmärkeområde som innehåller en samling av objekt och objekt som i sin helhet kombineras för att skapa en sökfunktion.

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

role = "SökBox"

En typ av textruta avsedd för att ange sökkriterier.

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

role = "separator"

En avdelare som skiljer och skiljer delar av innehåll eller grupper av menyer.

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

role = "reglaget"

En användarinmatning där användaren väljer ett värde inom ett givet intervall.

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

role = "spinbutton"

En form av intervall som förväntar sig att användaren väljer bland diskreta val.

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

role = "status"

En behållare vars innehåll är rådgivande information för användaren men inte är tillräckligt viktig för att motivera en varning, ofta men inte nödvändigtvis presenterad som en statusfält.

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

role = "switch"

En typ av kryssruta som representerar av / på-värden, i motsats till markerade / avmarkerade värden.

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

role = "-fliken"

En grupperingsetikett som tillhandahåller en mekanism för att välja flikinnehållet som ska återges till användaren.

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

role = "bord"

Ett avsnitt som innehåller data ordnade i rader och kolumner. Tabellrollen är avsedd för tabellbehållare som inte är interaktiva.

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

role = "tablist"

En lista över flikelement, som är referenser till tabellpanelelement.

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

role = "tabpanel"

En behållare för resurserna associerade med en flik, där varje flik finns i en tablista.

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

Inmatning som tillåter fri-form text som dess värde.

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

role = "timer"

En typ av levande region som innehåller en numerisk räknare som indikerar en mängd förfluten tid från en startpunkt eller den återstående tiden tills en slutpunkt.

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

role = "verktygsfält"

En samling ofta använda funktionsknappar representerade i kompakt visuell form.

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

En kontextuell popup som visar en beskrivning för ett element.

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

Vanligtvis skulle verktygstipen vara dold. Med hjälp av JavaScript visas verktygstipset efter en fördröjning när användaren svävar över elementet som den beskriver.

role = "träd"

En typ av lista som kan innehålla kapslade grupper på undernivå som kan kollapsas och utvidgas.

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

Ett rutnät vars rader kan utökas och kollapsas på samma sätt som för ett träd.

role = "treeitem"

Ett alternativ för ett träd. Detta är ett element i ett träd som kan expanderas eller kollapsas om det innehåller en undernivågrupp av trädämnen.

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