HTML
ARIA

Składnia

• aria-live
• istotne dla arii
• aria-autouzupełnianie
• sprawdzone przez arię
• aria wyłączone
• rozszerzone aria
• aria-haspopup
• ukryty w arii
• aria-nieważne
• aria-label
• poziom arii
• aria-multiline
• aria-multiselectable
• orientacja na arię
• tłoczony w arii
• aria-readonly
• wymagany aria
• wybrany aria
• aria-sort
• aria-valuemax
• aria-wartościowa
• aria-valuenow
• tekst-aria
• aria-atomowy
• aria-zajęty
• aria-dropeffect
• wleczony aria
• zawieszka aktywowana przez arię
• aria-control
• opisany przez arię
• aria-flowto
• aria-labelledby
• aria-owns
• aria-posinset
• aria-setsize

Uwagi

role = „alert”

Wiadomość z ważnymi i zwykle ważnymi informacjami.

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

Pamiętaj, że jednocześnie uwzględniłem zarówno role="alert" i aria-live="assertive" . Są to synonimiczne atrybuty, ale niektóre czytniki ekranu obsługują tylko jeden lub drugi. Korzystając z obu jednocześnie, zwiększamy szanse, że region na żywo będzie działał zgodnie z oczekiwaniami.

Źródło - Heydon Pickering „Kilka praktycznych przykładów ARIA”

role = "alertdialog"

Rodzaj okna dialogowego zawierającego komunikat ostrzegawczy, w którym początkowe fokus przechodzi do elementu w oknie dialogowym.

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

rola = „aplikacja”

Region zadeklarowany jako aplikacja internetowa, a nie dokument internetowy. W tym przykładzie aplikacja jest prostym kalkulatorem, który może dodać dwie liczby razem.

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

rola = „artykuł”

Część strony składająca się z kompozycji, która stanowi niezależną część dokumentu, strony lub witryny.

---

Ustawienie roli ARIA i / lub atrybutu aria- *, które pasują do domyślnej niejawnej semantyki ARIA, jest niepotrzebne i nie jest zalecane, ponieważ te właściwości są już ustawione przez przeglądarkę.

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

Użyłbyś role=article na temat elementów nie semantycznych (niezalecane, nieprawidłowe)

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

---

W3C Wpis dla role=article

role = „banner”

Region, który zawiera głównie treść zorientowaną na witrynę, a nie treść specyficzną dla strony.

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

rola = „przycisk”

Dane wejściowe, które pozwalają na działania uruchamiane przez użytkownika po kliknięciu lub naciśnięciu.

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

rola = „komórka”

Komórka w pojemniku tabelarycznym.

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

rola = „pole wyboru”

Sprawdzalne dane wejściowe, które mają trzy możliwe wartości: prawda, fałsz lub mieszanie.

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

rola = „nagłówek kolumny”

Komórka zawierająca informacje nagłówka dla kolumny.

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

Prezentacja wybranych; zwykle podobny do pola tekstowego, w którym użytkownicy mogą pisać z wyprzedzeniem, aby wybrać opcję, lub wpisać dowolny tekst jako nowy element na liście.

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

Zazwyczaj używasz JavaScript, aby zbudować resztę funkcji wyboru typu na początku lub na liście.

rola = „uzupełniająca”

Część pomocnicza dokumentu, zaprojektowana jako komplementarna do głównej treści na podobnym poziomie w hierarchii DOM, ale ma znaczenie, gdy jest oddzielona od głównej treści.

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

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

role = "contentinfo"

Duży widoczny region zawierający informacje o dokumencie nadrzędnym.

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

rola = „definicja”

Definicja terminu lub pojęcia.

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

rola = „dialog”

Okno dialogowe to okno aplikacji zaprojektowane w celu przerwania bieżącego przetwarzania aplikacji, aby zachęcić użytkownika do wprowadzenia informacji lub uzyskania odpowiedzi.

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

rola = „katalog”

Lista odniesień do członków grupy, takich jak statyczny spis treści.

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

rola = „dokument”

Region zawierający powiązane informacje zadeklarowane jako treść dokumentu, w przeciwieństwie do aplikacji internetowej.

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

rola = „formularz”

Region przełomowy, który zawiera kolekcję przedmiotów i obiektów, które jako całość łączą się, tworząc formularz.

Użycie semantycznie poprawnego elementu HTML <form> implikuje domyślną semantykę ARIA, co oznacza, że role=form nie jest wymagana, ponieważ nie należy stosować kontrastującej roli do elementu, który jest już semantyczny, ponieważ dodanie roli zastępuje natywną semantykę elementu.

Ustawienie roli ARIA i / lub atrybutu aria- *, które pasują do domyślnej niejawnej semantyki ARIA, jest niepotrzebne i nie jest zalecane, ponieważ te właściwości są już ustawione przez przeglądarkę.

<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żywałbyś role=form na elementach nie semantycznych (niezalecane, nieprawidłowe)

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

rola = „siatka”

Siatka to interaktywna kontrolka, która zawiera komórki danych tabelarycznych ułożonych w rzędach i kolumnach, podobnie jak tabela.

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

role = "gridcell"

Komórka w siatce lub 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>

rola = „grupa”

Zestaw obiektów interfejsu użytkownika, które nie są przeznaczone do uwzględnienia w streszczeniu strony lub spisie treści za pomocą technologii wspomagających.

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

rola = „nagłówek”

Nagłówek sekcji strony.

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

rola = „img”

Pojemnik na kolekcję elementów tworzących obraz.

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

rola = „link”

Interaktywne odwołanie do wewnętrznego lub zewnętrznego zasobu, które po aktywacji powoduje przejście do tego zasobu przez użytkownika.

W większości przypadków ustawienie roli ARIA i / lub atrybutu aria- *, które pasują do domyślnej niejawnej semantyki ARIA, jest niepotrzebne i nie jest zalecane, ponieważ te właściwości są już ustawione przez przeglądarkę.

Źródło - https://www.w3.org/TR/html5/dom.html#aria-usage-note

rola = „lista”

Grupa nieinteraktywnych elementów listy.

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

rola = „pole listy”

Widżet, który pozwala użytkownikowi wybrać jeden lub więcej elementów z listy opcji.

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

Zwykle do zbudowania funkcji wielokrotnego wyboru służy JavaScript.

role = "listitem"

Pojedynczy element na liście lub w katalogu.

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

role = "log"

Rodzaj aktywnego regionu, w którym nowe informacje są dodawane w znaczącej kolejności, a stare informacje mogą zniknąć.

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

rola = „główna”

Główna treść dokumentu.

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

role = "markiza"

Rodzaj aktywnego regionu, w którym często nieistotne informacje często się zmieniają.

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

rola = „matematyka”

Treść reprezentująca wyrażenie matematyczne.

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

role = „menu”

Typ widżetu, który oferuje użytkownikowi listę opcji do wyboru.

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

rola = „pasek menu”

Prezentacja menu, które zwykle pozostaje widoczne i zwykle jest prezentowane poziomo.

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

Opcja w grupie opcji zawartych w menu lub pasku menu.

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

Sprawdzalny menuitem, który ma trzy możliwe wartości: true, false lub mixed.

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

role = "menuitemradio"

Sprawdzalny menuitem w grupie ról menuitemradio, z których tylko jedną można sprawdzić na raz.

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

rola = „nawigacja”

Zbiór elementów nawigacyjnych (zwykle łącza) do nawigacji po dokumencie lub powiązanych dokumentach.

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

Sekcja, której treść jest nawiasowa lub pomocnicza w stosunku do głównej treści zasobu.

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

rola = „opcja”

Element do wyboru na liście wyboru.

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

rola = „prezentacja”

Element, którego domyślna semantyka natywnej roli nie zostanie odwzorowana na interfejs API dostępności.

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

rola = „pasek postępu”

Element, który wyświetla status postępu zadań, które zajmują dużo czasu.

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

rola = „radio”

Sprawdzalne dane wejściowe w grupie ról radiowych, z których tylko jedną można sprawdzić na raz.

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

rola = „region”

Duża dostrzegalna sekcja strony internetowej lub dokumentu, którą zdaniem autora jest wystarczająco ważna, aby zostać uwzględnionym w streszczeniu strony lub spisie treści, na przykład obszar strony zawierający statystyki wydarzeń sportowych na żywo.

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

rola = „grupa radiowa”

Grupa przycisków opcji.

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

rola = „wiersz”

Rząd komórek w pojemniku tabelarycznym.

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

rola = „grupa wierszy”

Grupa zawierająca jeden lub więcej elementów wiersza w siatce.

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

rola = „nagłówek”

Komórka zawierająca informacje nagłówka dla wiersza w siatce.

<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 = „pasek przewijania”

Obiekt graficzny, który kontroluje przewijanie zawartości w obszarze wyświetlania, niezależnie od tego, czy treść jest w pełni wyświetlana w obszarze wyświetlania.

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

rola = „szukaj”

Przełomowy region zawierający kolekcję przedmiotów i obiektów, które jako całość łączą się w celu utworzenia funkcji wyszukiwania.

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

rola = „pole wyszukiwania”

Rodzaj pola tekstowego służącego do określania kryteriów wyszukiwania.

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

rola = „separator”

Dzielnik, który oddziela i rozróżnia sekcje treści lub grupy elementów menu.

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

rola = „suwak”

Dane wejściowe użytkownika, w których użytkownik wybiera wartość z danego zakresu.

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

role = "spinbutton"

Forma zakresu, która oczekuje, że użytkownik wybierze spośród dyskretnych wyborów.

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

role = „status”

Kontener, którego treść stanowi informacje doradcze dla użytkownika, ale nie jest wystarczająco ważny, aby uzasadnić alert, często, ale niekoniecznie, przedstawiany jako pasek stanu.

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

rola = „przełącznik”

Typ pola wyboru reprezentującego wartości włączania / wyłączania, w przeciwieństwie do wartości zaznaczonych / niezaznaczonych.

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

rola = „karta”

Etykieta grupująca zapewniająca mechanizm wyboru zawartości karty, która ma być renderowana dla użytkownika.

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

rola = „stół”

Sekcja zawierająca dane ułożone w rzędach i kolumnach. Rola tabeli jest przeznaczona dla kontenerów tabelarycznych, które nie są interaktywne.

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

role = „tablist”

Lista elementów tab, które są odniesieniami do elementów tabpanel.

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

role = "tabpanel"

Kontener zasobów powiązanych z kartą, w którym każda karta znajduje się na tablicy.

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

rola = „pole tekstowe”

Dane wejściowe, które dopuszczają dowolny tekst jako jego wartość.

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

role = „timer”

Rodzaj aktywnego obszaru zawierającego licznik numeryczny wskazujący czas, który upłynął od punktu początkowego lub czas pozostały do punktu końcowego.

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

rola = „pasek narzędzi”

Zbiór najczęściej używanych przycisków funkcyjnych w zwartej formie wizualnej.

<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 = "podpowiedź"

Kontekstowe okienko wyskakujące, które wyświetla opis elementu.

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

Zazwyczaj podpowiedź byłaby ukryta. Przy użyciu JavaScript podpowiedź będzie wyświetlana z opóźnieniem, gdy użytkownik najedzie myszą na opisany element.

rola = „drzewo”

Typ listy, która może zawierać grupy zagnieżdżone na niższym poziomie, które można zwinąć i rozwinąć.

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

Siatka, której rzędy można rozwinąć i zwinąć w taki sam sposób, jak w przypadku drzewa.

role = "treeitem"

Element opcji drzewa. Jest to element drzewa, który można rozwinąć lub zwinąć, jeśli zawiera niższą grupę elementów drzewa.

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