Pochopení ARIA pro přístupnost webu

Bez pole ARIA jsou pole pro automatické dokončování, jako například tento příklad z Amazonu, extrémně obtížné pro uživatele čtečky obrazovky.

Bez pole ARIA jsou pole pro automatické dokončování, jako například tento příklad z Amazonu, extrémně obtížné pro uživatele čtečky obrazovky.

Pokud prozkoumáte přístupnost webu, pravděpodobně se dostanete do ARIA - přístupné Rich Internetové aplikace. Někteří budou považovat za řešení všech problémů s dostupností webu. Jiní budou odsouzeni za to, že způsobují problémy. Oba tyto popisy mají prvek pravdy, protože stejně jako všechny webové technologie závisí na tom, jak ji používáte.

ARIA je specifikace z iniciativy Web Accessibility of the World Wide Web Consortium. Poskytuje soubor atributů HTML, které pomáhají asistenční technologii pochopit složité interakce běžné s moderními webovými stránkami.

Pro zrakově postižené uživatele jsou vztahy mezi prvky na webové stránce vystaveny umístěním a designem. ARIA poskytuje způsob sdílení těchto vztahů s asistenční technologií, jako jsou čtečky obrazovky.

ARIA přináší několik klíčových vlastností: role, stavy a vlastnosti a vztahy.

  • Role informujte uživatele o struktuře stránky. Nadpisy, bannery, vyhledávací pole, postranní lišty, hlavní obsah - všechny mohou být přenášeny pomocí rolí.
  • Státy a vlastnosti informujte uživatele o tom, jaká je aktuální podmínka pro prvek. Například s tlačítkem, který otevírá panel, je tento panel aktuálně otevřený nebo zavřený (rozšířená aria)? Je oblast dynamická, takže obsah tohoto pole může být aktualizován bez obnovy stránky (aria-live)?
  • Vztahy informujte uživatele o tom, zda jsou položky vzájemně propojeny. Může obsahovat popisy, jako například pokyny pro vyplnění vstupu (aria-popsáno) nebo informace o tom, co bude další prvek pro čtení (aria-flowto).

Autosuggest Fields

Zvažte pole pro zadání autosuggest, například na Google nebo Amazon. Začnete psát a skript na pozadí nalezne výsledky podobné těm, které píšete, a navrhne je jako volby. Tyto návrhy budou vytaženy v nedalekém elementu HTML, který mohou vidět a vybírat z viditelných uživatelů.

Pole autosuggest není výchozí element HTML. Pokud by tomu tak bylo, navrhované výsledky by se přímo přidružily k dotazu. Pole autosuggest je v podstatě mnohem bohatší verzí výběrového rozbalovacího seznamu, kde můžete pouze pole zúžit pomocí prvních písmen v možnostech. S vyhledávacím polem autosuggest jsou pravidla dotazu typicky mnohem složitější.

Vybraný prvek je výchozí částí kódu HTML. Možnosti jsou programově spojeny se vstupním polem a tyto informace jsou sdíleny přímo s asistenční technologií, jako je čtečka obrazovky.

Pole autosuggestu je však odlišné: vždy je vytvořeno na zakázku. Bez ARIA neexistuje explicitní vztah mezi výsledky a vstupem, což je pro uživatele čtečky obrazovky velmi obtížné vědět, že se něco děje. Pomocí ARIA můžeme vytvořit vztah mezi vstupním polem a návrhy a můžete informovat asistenční technologii o tom, že aktualizovaný region bude obsahovat nové informace, které je třeba ohlásit návštěvníkovi.

S těmito jednoduchými atributy, jinými slovy, přeměňujete pole, kde uživatel čtečky obrazovky nemá žádnou představu, na něco, kde každý uživatel získá výhodu automatických návrhů.

Zejména pro dynamické regiony je ARIA nejen hodnotná, ale i kritická pro přístupnost webových stránek. Když se jazyk JavaScript používá k obnovení pouze části obrazovky, asistenční technologie často nemá žádný způsob, jak vědět, že se něco změnilo. Označení regionu jako aria-live upozorní pomocnou technologii, jaké oblasti stránky monitorují změny.

Při správném použití může ARIA výrazně zvýšit přístupnost webu. Ale pokud tomu tak není, může vytvořit zcela nové problémy.

ARIA není náhradou za HTML

Normální vstupní prvek je takto označen.

<label for = 'your-name'> Vaše jméno </ label> <název vstupu = 'vaše jméno' id = 'vaše jméno' />
Mohli byste, ale neměli byste to dělat.
<span id = "Vaše jméno"> Vaše jméno </ span> <název vstupu = 'vaše jméno' aria-labelledby = 'vaše jméno' />

Proč je to nepřijatelné? Protože ARIA je podporována pouze asistenční technologií. Ale není to ani nutně podporováno všemi podpůrnými technologiemi a vůbec není rozpoznáno vaším prohlížečem. Pokud tedy právě používáte prohlížeč bez asistenční technologie nebo používáte starší technologii, která nepodporuje operační systém ARIA, toto vstupní pole není označeno vůbec.

Co je dobré využití ARIA? Na základě výše uvedeného vstupního formuláře je dobré využít, když potřebujete poskytnout rozsáhlejší informace o vašem oboru, například následujících.
<label for = "vaše narozeniny"> Vaše narozeniny </ label> <input id = "vaše narozeniny" name = "vaše narozeniny" aria-describedby = 'datum-formát' typ = "text" <span id = "date-format"> Zadejte datum ve formátu RR / MM / DD </ span>

To je účinné, protože samotný štítek neposkytuje veškeré informace potřebné k vyplnění pole. Vylepšuje se však popisem, který je nyní explicitně spojen se zadávacím polem a čtenář čte uživatel po jeho štítku.

ARIA vylepšuje HTML

HTML má hodně vestavěného významu. Pole formuláře obsahují popisky, okruhy poskytují strukturu a obrázky mají alternativní text. Když stavíte přístupnou webovou stránku, je prvním krokem propojení všech bodů ve vašem HTML. Pokud sémantické významy již existují v prvku HTML, nemusíte jej prodlužovat pomocí ARIA. Jakmile budete mít HTML vylepšené, přidejte atributy ARIA, když nemůžete informace předávat ve formátu HTML.

Nenechte se odnést

Je lákavé prozkoumat atributy ARIA a přidat je všude. Ne. ARIA zvyšuje význam prvků HTML, ale to neznamená, že HTML již nemá význam. Pokud se podíváte na standardní element HTML, jako je <h1>, tento prvek je sám o sobě stejný jako písmo <h1 role = 'nadpis' aria-level = '1' />. Tuto roli nebo atribut na úrovni aria nemusíte zahrnovat - jsou nadbytečné.

Není také důvod používat <h1 role = 'nadpis' aria-level = '2'>. Tento kód říká, že hlavička H1 má význam H2. No, pokud to znamená H2, použijte H2. To je mnohem jednodušší.

Zdroj

Napsat komentář

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.