Pozrite sa do webových štandardov ARIA a HTML aplikácií
Naozaj otvorený a inkluzívny web potrebuje technológie, ktoré umožňujú zdravotne postihnutým používateľom spoliehať sa na podporné technológie, aby si mohli vychutnať dynamický webový obsah a moderné webové aplikácie. Webové štandardy prístupnosti W3C sa zameriavajú na naplnenie webu aplikáciami Rich Rich Internet Access (ARIA), ktoré môžu používatelia s postihnutím efektívne využívať.
ARIA je jedným z mnohých štandardov dostupnosti a pokynov, ktoré publikoval Web Accessibility Initiative (WAI). Poskytuje ďalšie označenie, ktoré sa dá ľahko vložiť do dokumentov HTML. WAI-ARIA je riešenie pre viaceré platformy, ktoré sa zameriava na otvorenú webovú platformu, takže si nemyslite len na webové stránky, ale aj na hry, digitálnu zábavu, zdravotnú starostlivosť, mobilné zariadenia a iné druhy aplikácií.
V tomto príspevku sa pozrieme na to, ako môžete pridať prístup k dokumentom HTML pomocou štandardov WAI-ARIA.
Rámec ARIA
Syntax kódu HTML neumožňuje vývojárom vždy správne popísať prvky, identifikovať ich úlohy a určiť vzťahy medzi nimi. Zatiaľ čo to je zriedka problém pre návštevníkov, ktorí sú v plnom vlastníctve svojich zmyslov, môže brániť používateľom asistenčných technológií pochopiť, čo sa deje na obrazovke a preskúmať ich možnosti.
Toto je miesto, kde ARIA prichádza k našej pomoci, pretože umožňuje definovať účel rôznych prvkov s pomocou významné úlohy, a opísať ich povahu aria-prefixed atribúty. Aria-predprimované atribúty majú dva typy: vlastnosti ktoré opisujú funkcie, ktoré sa menej pravdepodobne menia počas celého životného cyklu stránky, a stavy ktoré poskytujú informácie o veciach, ktoré sa môžu často meniť v dôsledku interakcie používateľa.
Role pamiatok
Pozoruhodné roly sú najznámejšie formy modelu rolí ARIA (ostatné sú abstraktné role, role widgetov a role štruktúry dokumentov). Role pamiatok umožňujú vývojárom identifikovať veľké viditeľných regiónov na webovej stránke, ktorú môžu pomocní používatelia chcieť rýchlo pristupovať.
Existuje 8 typov rolí orientačných funkcií ARIA a je potrebné ich pridať ako atribúty príslušným značkám HTML.
role =”prápor”
Bannerová úloha sa má používať hlavne pre obsah, ktorý súvisí s celou stránkou, nielen s jednotlivými stránkami. Obvykle sa pridáva ako atribút do hlavnej hlavičky stránky pre logo a ďalšie dôležité informácie o celom webe. Je dôležité, aby ste mohli používať bannerovú rolu iba raz v rámci ľubovoľných dokumentov alebo aplikácií HTML.
role =”hlavné”
Hlavná významná úloha súvisí s hlavným obsahom dokumentu. Nemôže sa používať viac ako raz na ľubovoľnej stránke HTML. Zvyčajne nasleduje Role navigácie sa používa na označenie oblasti, ktorá obsahuje navigačné prvky, ako sú odkazy a zoznamy na webe. Komplementárna orientačná úloha popisuje ďalší obsah, ktorý súvisí s hlavným obsahom stránky. Musí sa umiestniť na podobnú úroveň v hierarchii DOM ako Úloha contentinfo informuje agentov používateľov o prítomnosti regiónu, kde možno nájsť rôzne druhy metadát, ako sú informácie o autorských právach, právne vyhlásenia a vyhlásenia o ochrane osobných údajov. Obvykle sa používa na zápätie stránky. Forma orientačnej role formulára označuje formulár čakajúci na zadanie používateľa. Pre vyhľadávacie formuláre by ste mali používať Role vyhľadávania je dosť jasné, má pomôcť pomocným technológiám identifikovať vyhľadávacie funkcie webových stránok. Môžete použiť rolu orientačného bodu aplikácie pre región, ktorý chcete deklarovať ako webovú aplikáciu, a nie ako webový dokument. Neodporúča sa ho zahrnúť do bežných webových stránok, pretože odporúča, aby sa asistenčné technológie prepínali z normálneho režimu prehliadania do režimu prehliadania aplikácií. Túto dominantnú rolu by ste mali používať s veľkou starostlivosťou. Hoci role vám umožňujú definovať význam značiek HTML, stavy a vlastnosti poskytujú používateľovi ďalšie informácie o tom, ako s nimi interagovať. Obe stavy a vlastnosti sú označené aria-prefixed atribúty so syntaxou aria- *. Najznámejšie atribúty ARIA sú pravdepodobne požadované vlastnosti aria aria-checked state. Požadovaná Aria je a vlastnosť pretože je to permanentná vlastnosť vstupného prvku (t. j. používateľ ho musí vyplniť), zatiaľ čo aria-checked je a stáť pretože začiarkavacie políčko môže často zmeniť jeho hodnotu v dôsledku interakcie používateľa. Štáty a vlastnosti niekedy berú tokenné hodnoty (obmedzený súbor preddefinovaných hodnôt), napríklad vlastnosť aria-live môže mať 3 rôzne hodnoty: preč, zdvorilý, asertívny. Syntax v tomto príklade vyzerá takto: V ostatných prípadoch sú hodnoty atriovo predprimárnych atribútov reprezentované reťazce, čísla, celé čísla, ID odkazy alebo pravda lož hodnoty. Použite vzťahové atribúty na označenie vzťahov medzi rôznymi prvkami na vašom webe, ktoré nie je možné určiť inak z štruktúry dokumentu. Napríklad Po nastavení roly orientačného bodu ARIA pre oblasť, ktorá je viditeľná na vašej stránke HTML, môže pomôcť pomocným technológiám veľa, ak zmeníte predprimárne stavy ARIA a vlastnosti podradených prvkov v súlade s udalosťami, ktoré sa dejú na obrazovke. To môže byť rozhodujúce, keď používatelia musia komunikovať s webom, napríklad vyplnením formulára alebo spustením vyhľadávacieho dopytu. Všeobecným pravidlom návrhu dizajnu je to, že súčasný stav používateľského rozhrania musí byť vždy vnímaný asistenčnými technológiami. Napríklad, ak si používateľ vyberie vo formulári možnosť, musí sa tiež zobraziť vybrané pre asistenčné technológie. To možno ľahko dosiahnuť využitím stavu vybratého v arii s nasledujúcou syntaxou: Pokyny W3I WAI-ARIA Authoring Practices vám môžu poskytnúť mnohé ďalšie skvelé nápady, ako správne zosúladiť vizuálne a prístupné rozhrania vašej stránky. Použitie funkcií a atribútov ARIA môže byť niekedy nadbytočné. Keď používate sémantické značky HTML5, ako napríklad Napríklad nie je potrebné používať formulár významnú úlohu pri definovaní Takže ak ste už pridali skrytý Atribút HTML do vstupného formulára, nie je potrebné pridávať aria skryté stav, pretože ho predvolene používa prehliadač.. Tento bol pridaný k špecifikáciám W3C s cieľom mapovania hlavné ARIA orientačná rola na sémantický HTML element. role =”navigácia”
role =”komplementárne”
role = "hlavné". Súvisiace príspevky, populárne články, posledné komentáre sú typickými príkladmi autonómneho komplementárneho obsahu.role =”contentinfo”
role =”formulár”
role = "search" namiesto.role =”Vyhľadávanie”
role =”prihláška”
Štáty a vlastnosti
Syntax predprimárnych atribútov Aria
Ako používať stavy ARIA a vlastnosti
1. Vytvoriť vzťahy medzi prvkami s atribútmi vzťahov
aria-labelledby Vlastnosť identifikuje prvok, ktorý označuje aktuálny prvok.aria-labelledby - medzi mnohými inými vecami - môže viazať nadpisy na regióny orientačných bodov ARIA nasledujúcim spôsobom:Toto je záhlavie
Hlavný obsah… 2. Synchronizujte stavy a vlastnosti s životným cyklom prvku
3. Porovnaj vizuálne a prístupné rozhranie
.Nepoužívajte nadmerné používanie ARIA
alebo , moderné webové prehliadače štandardne pridávajú príslušnú sémantiku ARIA. V tomto prípade nemá zmysel samostatne nastaviť roly s orientačnými hodnotami ARIA. element. Namiesto syntax je dosť jednoduché na použitie . Je tiež zbytočné používať atribúty natívneho jazyka HTML spolu s príslušným atribútom ARIA.
