ikonka šipky nahoru

Nezapomínejte na handicapované uživatele webu

Skoro každý pátý člověk má nějaký handicap. To je celkem dost uživatelů internetu na to, aby jste neřešili přístupnost webu pro handicapované. Na svých webech s větší návštěvností se proto snažím používat WAI-ARIA prvky.

WAI-ARIA jsou orientační body v podobě značek v kódu, které pomáhají zlepšit přístupnost webu pro tyto uživatele (a jejich zařízení, která používají). Díky tomu, se na webu mohou lépe orientovat (např. rychle najdou menu, hlavní obsah atd.).

Co jsou WAI-ARIA

WAI-ARIA z anglického Web Accessibility Initiative-Accessible Rich Internet Aplication. Je to samostatná specifikace, která zlepšuje funkcionalitu a přístupnost webů a webových aplikací pro lidi s nějakým handicapem. Hlavně pomáhá s dynamickým obsahem a s pokročilejšími prvky ovládacího rozhraní vytvářených pomocí technologií jako Ajax, JavaScript a HTML5 jehož některé prvky by jinak pro handicapované uživatele odkázané na různé asistivní technologie byly nepřístupné. WAI-ARIA přiřazuje prvkům role a dává těmto rolím vlastnosti a stavy.

Pár ukázek orientačních bodů

  • role=“navigation“ – používá se pro označení navigací na stránce
  • role=“main“ – označuje hlavní obsah stránky
  • role=“search“ – označuje vyhledávání na stránce
  • role=“alert“ – označuje upozornění uživatele na stránce
  • role=“menu“ – označuje kontejner, který obsahuje sadu navigačních odkazů
  • role=“menuitem“ – označuje odkaz jako položku v menu
  • role=“menubar“ – označuje menu pro dropdown navigaci
  • aria-label=“Přihlásit“ – označuje element stránky, který asistivní zařízení přečte jako název objektu stránky, lze jím označit labely a skrytá pole atd.
<nav role="navigation"></nav>

Tento kód umožní skok na navigaci webu. Dobrou podporu WAI-ARIA značek má např. Bootstrap.

Přístupnost webu a HTML5

WAI-ARIA je vhodné kombinovat s HTML 5 tagy. Samotné HTML5 tagy totiž některé asistivní technologie zatím ještě nepodporují.