Orientační body WAI-ARIA pro přístupnější web

WAI-ARIA je technologie umožňující popsat obsah nebo chování webů tak, aby byly snadno dostupné i zrakově nebo jinak postiženým uživatelům.

Asistivní technologie – občas se nepřesně říká slepecké čtečky – umožňují provoz ve dvou režimech:

  • Pasivně-sekvenční, kdy web prochází pomocí nadpisové osnovy dokumentu. Pro uživatele je to příjemné asi jako ovládání webu tabulátorem. Takže jde to, ale dře to.
  • Po hendikepovaného uživatele je pohodlnější strukturovaný režim, ve kterém čtečka nabízí konkrétní oblasti stránky.

Ten druhý režim právě umožňují WAI-ARIA orientační body (landmarks). Přidání do webu je otázka chvilky a pomůžete tím mnoha lidem, takže pokud je ještě nepoužíváte, čtěte dál. Do HTML prostě přidáte pár atributů navíc.

Tyhle orientační body se určitě naučte

  • role="banner" – ne banner, ale třeba název webu nebo logo
  • role="navigation" – navigace; může jich být na stránce více
  • role="main" – hlavní obsah stránky
  • role="search" – vyhledávání na stránce
  • role="complementary" – doplňkovým obsah, obvykle „boční lišta“
  • role="contentinfo" – informace o obsahu, na webech nejčastěji něco jako patička

Pokud teď v hlavě nemáte kapacitu na všechny, naučte se zatím navigation a main. Skok na navigaci a obsah je pro uživatele asistivních technologií nejzásadnější. Na ostatní se ale nevykašlete, naučte se je časem taky.

Další možnosti WAI-ARIA

Hlavně pro potřeby psaní webových aplikací se kromě orientačních bodů hodí znát i další typy ARIA atributů:

  • Označení widgetů – přidání významu komponentám uživatelského rozhraní. Například role="alert" pro časově omezené upozornění uživateli. Nebo tab a tabpanel pro vyznačení záložkové navigace uvnitř stránky a menu, menuitem, menubar pro dropdown navigaci.
  • Označení struktury dokumentu – například role="article" pro označení atomické části hlavního obsahu. Může to být článek v seznamu článků, položka ve výpisu produktů nebo třeba role="presentation" pro popis elementu, který je použitý jen pro prezentaci obsahu a nechceme zachovat jeho sémantický význam. Jak se vám líbí třeba <table role="presentation">? Krásné, že?

Ani tím ale možnosti WAI-ARIA nekončí. Orientační body patří do kategorie rolí. Dalšími kategoriemi ještě jsou stavy a vlastnosti. Možností jejich využití v aplikacích je hodně. Příkladem budiž hlášení počtu zbývajících znaků v textovém poli formuláře. Pokud vás to zajímá více, doporučím seriál Radka Pavlíčka na Zdrojáku.

Sami vidíte, že WAI-ARIA je sémanticky (významově) daleko bohatší než běžné HTML. Kromě pomoci znevýhodněným uživatelům je tedy možné atributy využít v CSS nebo Javascriptu jako selektor.

Pár příkladů z Bootstrapu

Pojďme si užitečnost ARIA atributů ukázat na dvou komponentách z Bootstrapu 4. První bude skupina tlačítek:

<div class="btn-group" role="group" aria-label="Zvolte akci">
  <button type="button" class="btn btn-secondary">První akce</button>
  <button type="button" class="btn btn-secondary">Druhá akce</button>
</div>

Atribut role="group" tady asistivním technologií sděluje, že jde o skupinu prvků. Prvek samotný se pak nezařadí do struktury sekvenčního procházení stránky. aria-label tady je namísto skrytého nadpisu (cože, vy ještě pro přístupnost používáte skryté nadpisy?) – je to text, který asistivní technologie přečte pro označení téhle části stránky.

A ještě kousek z bootstrapího dropdown menu:

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
    id="dropdown-1" data-toggle="dropdown" 
    aria-haspopup="true" aria-expanded="false">
    Zvolte akci
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown-1">
    <a class="dropdown-item" href="#">První akce</a>
    <a class="dropdown-item" href="#">Druhá akce</a>
  </div>
</div>

Atribut aria-haspopup="true" říká, že po aktivaci tohoto elementu vyskočí jiný, který je ve vizuální hierarchii výše. Prostě popup. aria-expanded="false" říká, že tohle je element sice „rozkliknutelný“, ale teď „nerozkliknutý“. Použitelné třeba při „rozklikávání“ stromových struktur. aria-labelledby="dropdown-1" je sestra od aria-label. Tahle ale jen říká, kde asistivní technologie najde popis sekce v existující struktuře HTML.

Chcete další praktické ukázky bez Bootstrapu? Tady jich je devět moc pěkných.

Můžu místo role použít HTML5 tagy?

Co třeba <nav> namísto <div role="navigation">? To bych nedělal. U HTML5 tagů pořád neexistuje plná podpora jejich sémantického propojení s asistivními technologiemi. WAI-ARIA je na tom podle mých informací výrazně lépe. Je ale možné zápisy kombinovat – <nav role="navigation">. Sémantika pomocí WAI-ARIA a zpřehlednění pomocí HTML5 tagu? OK, jinak ale ty HTML5 značky zase taková výhra nejsou. Jinými slovy – HTML5 tagy jsou volitelné, WAI-ARIA povinná.

Jak testovat?

ARIA role umí zobrazit rozšíření Web Developer, které je dostupné pro Chrome, Firefox nebo Operu. Na Apple výrobcích to jde „z pohledu“ hendikepovaného uživatele testovat pomocí nativního rozšíření Voice Over (OS X, iOS).

Video: WAI-ARIA: demo s VoiceOver

Kromě základů WAI-ARIA si na videu ukážeme demo použití s VoiceOver. To je čtečka vestavěná na Macu.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii HTML.

Favikony webu s RealFaviconGenerator

16. 1. 2017 v příručce

Ikona webu. Kromě tradiční favicon.ico, ikony na záložce rozhraní prohlížeče, se dnes „favikony“ zobrazují v celé řadě dalších kontextů.

SVG inspirace: efekty, animace, interakce, přechody a další udělátka

14. 9. 2016 v příručce

SVG posouvá hranice možností webdesignu, ale trápí mě jak málo se to ví. V tomto textu budu proto shromažďovat ukázky možností, které SVG nabízí.

Kurz „Dnešní webová kodéřina“

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Kurz vede Martin Michálek. Příští termín: 23. února.

Termíny dalších veřejných školení

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč