Co je to WAI-ARIA a proč je důležité mít přístupnější web

Co znamená WAI-ARIA?

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) je sada specifikací vytvořená konsorciem W3C (World Wide Web Consortium), která má za cíl zlepšit přístupnost webových stránek a webových aplikací nejčastěji pro uživatele se zdravotním postižením. Tento standard umožňuje webovým vývojářům přidávat k prvkům na stránkách další atributy do HTLM tagů, které jsou důležité pro uživatele čtecích zařízení, kteří mají speciální software, který umožňuje nevidomým a slabozrakým lidem procházet snadněji weby.

Je třeba atribut "alt" u obrázků, který se doporučuje přidávat pro zlepšení SEO WAI-ARIA atribut? Ten do těchto specifikací nespadám ale je důležitý i tak pro přístupnost, protože umožňuje uživatelům s asistivními technologiemi pochopit obsah obrázků.  Nebo když někdo zadá špatnou adresu obrázku tak se mu objeví aspoň text, co by tam měl vidět i když to tam není. Můžete se tak trochu vžít do role lidí, kterým jsou "alt" atributy užitečné

Proč je důležité neopomíjet přístupnost webu?

Webová přístupnost je zásadní pro to, aby byli schopni webové stránky používat všichni lidé, bez ohledu na jejich fyzické či psychické omezení. V situaci, kdy webové stránky obsahují složité prvky, jako jsou interaktivní formuláře, pokročilá navigace nebo multimediální obsah, mohou tito uživatelé narazit na problémy. WAI-ARIA řeší právě tyto problémy tím, že dává vývojářům nástroje k vytvoření webu, který bude přístupný všem.

Pro dostupnost informací všem je možné, že třeba u poptávek pro státní instituce bude jeden z bodů zadání dodržet tyto standardy.

Jak WAI-ARIA přispívá k webové přístupnosti?

WAI-ARIA přidává nové atributy, které komunikují s čtečkami obrazovky a jinými asistivními technologiemi. Tyto atributy specifikují role, stavy a vlastnosti webových prvků, což umožňuje lepší popis funkcí prvků, jako jsou tlačítka, formuláře, navigace a další, pro uživatele se zdravotním postižením.

Historie a vývoj WAI-ARIA

Jak vznikl standard WAI-ARIA? WAI-ARIA byl představen jako reakce na stále složitější struktury webových stránek a aplikací. Tradiční HTML prvky, jako jsou odkazy nebo tlačítka, byly snadno přístupné, ale moderní dynamické prvky vytvořené pomocí JavaScriptu. Různé webové aplikace postavené přes populární JS frameworky jako je React, Vue nebo Angula a dalších technologií vytvořily bariéry pro uživatele čtecích zařízení. W3C vytvořilo WAI-ARIA v roce 2008 jako způsob, jak zlepšit komunikaci mezi asistivními technologiemi a dynamickými prvky.

Od počátků internetu bylo mnoho pokusů o stanovení standardů pro přístupnost. Od HTML 4 a později HTML5 se webové technologie neustále vyvíjely. WAI-ARIA představuje významný krok vpřed v tom, jak mohou weby být přístupné, a to i přes moderní dynamické funkce a komponenty, které nejsou přirozeně kompatibilní s asistivními technologiemi.

Struktura WAI-ARIA

WAI-ARIA se skládá ze tří základních komponent: role, vlastnosti (attributes) a stavy (states). Tyto komponenty společně vytvářejí mechanismus pro popis dynamických prvků, které čtečky obrazovky a jiná asistivní zařízení chápou a interpretují.

• Role: Definují účel nebo funkci prvku na webové stránce (např. „tlačítko“, „navigace“).
• Vlastnosti (attributes): Poskytují další informace o daném prvku, například označují, zda je prvek označen jako volitelný nebo vyžadovaný.
• Stavy (states): Indikují aktuální stav prvku, například zda je tlačítko „aktivní“ nebo „deaktivované“.

Role, vlastnosti a stavy v rámci WAI-ARIA

Role a vlastnosti jsou klíčové pro správnou interpretaci prvků čtecími zařízeními. Například role „button“ indikuje, že prvek funguje jako tlačítko, i když není vytvořen klasickým <button> HTML prvkem. Vlastnosti a stavy mohou například ukázat, zda je nějaký prvek rozbalený nebo skrytý, což zajišťuje, že uživatelé asistivních technologií mají stejnou úroveň interakce jako ostatní uživatelé.

Jak WAI-ARIA funguje?

WAI-ARIA je implementováno přímo do HTML kódu a komunikuje s prohlížeči a asistivními technologiemi, aby zajistilo, že všechny důležité informace jsou dostupné uživatelům. Pracuje tím způsobem, že k existujícím HTML prvkům přidává speciální atributy, které poskytují další informace o funkčnosti a významu těchto prvků.

Příklady

Ukázeme si základní jednoduché kusy kódů.

aria-label
Používá se pro přidání popisku k prvku, pokud není textový obsah viditelný, ale je třeba ho zpřístupnit pro screen readery.

<button aria-label="Close">✖️</button>

aria-hidden
Používá se pro prvky, které by měly být skryté pro asistivní technologie (screen readery), například dekorativní prvky.

<span aria-hidden="true">🌟</span>

aria-live
Určuje, že obsah prvku se bude měnit dynamicky a že změny mají být oznamovány uživatelům (například upozornění nebo notifikace).

<div aria-live="polite">Nové zprávy byly odeslány.</div>

aria-expanded
Používá se pro označení, zda je nějaký prvek rozbalený nebo sbalený, například v případě rozbalovací nabídky.

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden> <li>Home</li> <li>About</li> </ul> 

role
Specifikuje typ role daného prvku, což umožňuje screen readerům správně interpretovat jeho účel. Mezi běžné hodnoty patří například alert, button, dialog, navigation, nebo tooltip.

<div role="navigation">
  <a href="#home">Home</a>
  <a href="#about">About</a>
</div>

aria-controls
Používá se k propojení prvku s jiným prvkem, který kontroluje, například tlačítko, které ovládá rozbalovací nabídku.

<button aria-controls="dropdown" aria-expanded="false">Options</button>
<ul id="dropdown" hidden>
  <li>Option 1</li>
  <li>Option 2</li>
</ul> 

aria-describedby
Umožňuje propojit prvek s popisným textem, který je například v jiném HTML elementu, a poskytuje více informací.

<button aria-describedby="desc">Info</button>
<p id="desc">Toto tlačítko zobrazí další informace.</p>