Pohled do webového standardu ARIA a dostupnosti aplikací HTML
Skutečně otevřený a otevřený web potřebuje technologie, které umožní uživatelům se zdravotním postižením spoléhat na asistenční technologie, aby si mohli vychutnat dynamický webový obsah a moderní webové aplikace. Webové standardy přístupnosti W3C mají za cíl naplnit web pomocí aplikací ARIA (Accessible Rich Internet Applications), které mohou uživatelé se zdravotním postižením efektivně využívat..
ARIA je jedním z mnoha standardů a směrnic o přístupnosti publikovaných v rámci iniciativy Web Accessibility Intitiative (WAI). Poskytuje další značení, které lze snadno vkládat do dokumentů HTML. WAI-ARIA je multiplatformové řešení pro více zařízení, které se zaměřuje na Open Web Platform, takže nemyslete jen na webové stránky, ale také na hry, digitální zábavu, zdravotnictví, mobilní telefony a další aplikace..
V tomto příspěvku se podíváme na to, jak můžete pomocí standardů WAI-ARIA zpřístupnit své dokumenty HTML.
Rámec ARIA
Syntaxe HTML neumožňuje vývojářům vždy správně popisovat prvky, identifikovat jejich role a specifikovat vztahy mezi nimi. I když je to jen zřídka problém pro návštěvníky, kteří jsou plně v držení svých smyslů, může to bránit uživatelům asistenční technologie pochopit, co se děje na obrazovce a zkoumat jejich možnosti..
Toto je místo, kde ARIA přichází k naší pomoci, protože umožňuje definovat účel různých prvků pomocí dominantní role, a popsat jejich povahu Atributy předpony árie. Atributy předpony Aria mají dva typy: vlastnosti které popisují vlastnosti, u nichž je menší pravděpodobnost změny v průběhu životního cyklu stránky, a států které poskytují informace o věcech, které se mohou často měnit v důsledku interakce uživatele.
Významné role
Významné role jsou nejznámějšími formami RIA Modelu ARIA (jiné jsou Abstraktní role, Role Widgetu a Role dokumentu). Významné role umožňují vývojářům identifikovat velké vnímatelné regiony na webové stránce, ke kterým mohou uživatelé s asistenční technologií chtít rychlý přístup.
K dispozici je 8 typů orientačních rolí ARIA a musí být přidány jako atributy odpovídajících tagů HTML.
role =”prapor”
Úloha banneru je určena především pro obsah, který souvisí s celou stránkou, nikoli pouze pro jednotlivé stránky. Obvykle se přidává jako atribut do hlavního záhlaví webu pro logo a další důležité informace pro celou webovou stránku. Je důležité, abyste roli banneru mohli používat pouze jednou v rámci libovolných dokumentů HTML nebo aplikací.
role =”hlavní”
Hlavní orientační role souvisí s hlavním obsahem dokumentu. Nelze jej použít více než jednou na jakékoli stránce HTML. Obvykle to následuje Navigační role je určena pro označení oblasti, která obsahuje navigační prvky, jako jsou odkazy a seznamy na webu. Doplňující mezník popisuje další obsah, který souvisí s hlavním obsahem webu. Musí být umístěna na podobnou úroveň v hierarchii DOM jako Role contentinfo informuje agenty uživatele o přítomnosti oblasti, kde lze nalézt různé druhy metadat, jako jsou informace o autorských právech, právní prohlášení a prohlášení o ochraně osobních údajů. Obvykle se používá pro zápatí webu. Role orientačního bodu formuláře označuje formulář čekající na vstup uživatele. Pro vyhledávací formuláře byste měli použít Vyhledávací role je velmi samozřejmá, jejím cílem je pomoci asistenčním technologiím identifikovat funkci vyhledávání na webových stránkách. Můžete použít roli orientačního bodu aplikace pro oblast, kterou chcete deklarovat jako webovou aplikaci, nikoli jako webový dokument. Není doporučeno zahrnout je do tradičních webových stránek, protože to naznačuje, že asistenční technologie mohou přepnout z normálního režimu prohlížení do režimu procházení aplikací. Tuto roli byste měli používat pouze s velkou péčí. Zatímco role vám umožňují definovat význam značek HTML, stavy a vlastnosti poskytují uživateli další informace o tom, jak s nimi pracovat. Oba stavy a vlastnosti jsou označeny Atributy předpony árie se syntaxí árie-*. Nejznámějšími atributy ARIA jsou pravděpodobně vlastnost vyžadovaná programem aria a stav kontrolovaný arií. Požadovaná Aria je vlastnictví protože je to trvalá vlastnost vstupního prvku (tj. uživatel ho musí vyplnit), zatímco aria je kontrolována a Stát protože zaškrtávací políčko může často měnit jeho hodnotu v důsledku interakce uživatele. Stavy a vlastnosti někdy mají hodnoty tokenu (omezený soubor předdefinovaných hodnot), například vlastnost aria-live může mít 3 různé hodnoty: vypnuto, zdvořilý, asertivní. Syntaxe v tomto příkladu vypadá takto: V ostatních případech jsou hodnoty atributů předvolených árie reprezentovány struny, čísla, celá čísla, ID reference nebo true / false hodnoty. Použijte atributy vztahu k označení vztahů mezi různými prvky na vašem webu, které nelze jinak určit ze struktury dokumentu. Například Poté, co nastavíte roli orientačního bodu ARIA pro vnímatelnou oblast na stránce HTML, může pomoci podpůrným technologiím, pokud změníte stavy a vlastnosti podřízených prvků v souladu s událostmi na obrazovce. To může být klíčové tam, kde uživatelé musí komunikovat s webem, například vyplněním formuláře nebo spuštěním vyhledávacího dotazu. Obecným pravidlem návrhu přístupnosti je, že současný stav uživatelského rozhraní musí být vždy vnímatelný pomocnými technologiemi. Například pokud uživatel vybere možnost ve formuláři, musí být také vybrán pro podpůrné technologie. Toho lze snadno dosáhnout využitím stavu zvoleného árie s následující syntaxí: W3C WAI-ARIA Authoring Practices Guideline vám může poskytnout mnoho dalších skvělých nápadů, jak správně harmonizovat vizuální a přístupná rozhraní vašeho webu.. Použití rolí ARIA a atributů může být někdy zbytečné. Při použití sémantických značek HTML5, jako je např Například není nutné používat formulář významnou roli při definování Takže pokud jste již přidali skrytý HTML atribut na vstup formuláře, je zbytečné přidávat aria-hidden ve výchozím nastavení.. Ten byl přidán ke specifikacím W3C za účelem mapování hlavní ARIA mezník role sémantický HTML element. role =”navigace”
role =”komplementární”
role = "hlavní". Související příspěvky, populární články, nejnovější komentáře jsou typickými příklady autonomního doplňkového obsahu.role =”contentinfo”
role =”formulář”
role = "search" místo toho.role =”Vyhledávání”
role =”aplikace”
Stavy a vlastnosti
Syntaxe předvolených atributů Aria
Jak používat stavy ARIA a vlastnosti
1. Vybudujte vztahy mezi prvky s atributy vztahu
aria-labelledby vlastnost identifikuje prvek, který označuje aktuální prvek.aria-labelledby - mezi mnoha dalšími věcmi - můžete vázat záhlaví do oblastí orientačních bodů ARIA následujícím způsobem:Toto je záhlaví
Hlavní obsah… 2. Synchronizujte stavy a vlastnosti s životním cyklem prvku
3. Shoda vizuálních a přístupných rozhraní
.Nepoužívejte nadužívání ARIA
nebo , moderní webové prohlížeče standardně přidávají příslušnou sémantiku ARIA. V tomto případě nemá smysl samostatně definovat mezníkové role ARIA. živel. Místo syntaxe je naprosto dostačující k použití jen . Je také zbytečné používat nativní atributy HTML spolu s příslušným atributem ARIA.
