Čo sú atribúty Aria v HTML a prečo sú dôležité?

Weboví dizajnéri, ktorí sú v HTML noví, môžu naraziť na súbor neznámych atribútov. Tieto atribúty so slovom ARIA sa objavujú na celom webe, no ich účel môže byť pre nových používateľov záhadou.

Atribúty ARIA slúžia dôležitému účelu pri prístupnosti vašich webových stránok. Opisujú obsah daného prvku aj spôsob, akým prvok súvisí so stránkou alebo ostatnými prvkami okolo nej.

Pridanie týchto veľmi dôležitých atribútov na vašu stránku pomôže zaistiť, že všetci návštevníci budú mať rovnaký zážitok bez ohľadu na technológiu, ktorú používajú.

Čo sú atribúty ARIA?

ARIA je skratka pre Accessible Rich Internet Applications. V modernom HTML, najmä v aplikáciách bohatých na JavaScript, nie je na základe syntaxe vždy okamžite zrejmé, akú úlohu zohrávajú jednotlivé prvky.

Ťažkosti s rozlišovaním rolí môžu byť problémom, keď používatelia prezerajú web pomocou nástrojov na zjednodušenie ovládania, ako sú čítačky obrazovky. Ak vášmu koncovému používateľovi chýba správny sémantický kód HTML, pri používaní nástrojov na zjednodušenie ovládania nemusí byť schopný navigovať na webe.

Aj keď preferovaný spôsob, ako tento problém vyriešiť, je používať správne sémantické prvky v HTML5, to nie je vždy praktické alebo možné. Tu zasahujú atribúty ARIA na prvkoch HTML. Tieto atribúty pomáhajú definovať rolu a atribúty vášho prvku spôsobom, ktorý dokážu spracovať nástroje dostupnosti.

Prečo sú atribúty ARIA dôležité?

Stručne povedané, atribúty ARIA umožňujú používateľom so zdravotným postihnutím používať vašu webovú stránku. Tieto roly a atribúty definujú dodatočné informácie o rôznych prvkoch na vašej lokalite, ktoré by inak nemuseli byť ľahko dostupné.

Existuje široká škála atribútov ARIA, ktoré môžete priradiť. Mali by ste ich použiť kdekoľvek, kde je potrebný ďalší kontext, aby dokument dával zmysel nevizuálnym spôsobom.

Vezmime si napríklad stránku, ktorá má hlavnú navigáciu zloženú z a prvok zabalený v a prvok, skôr ako a element:

<divtrieda="nav">
<ul>
<li>Domovli>
<li>Obchodli>
<li>Oli>
ul>
div>

Atribúty ARIA môžete používateľom pomôcť pri navigácii. Pridanie atribútov role a árie do súboru umožňuje čítačke obrazovky a asistenčným technológiám zistiť, kde sa nachádza vaša ponuka.

<divtrieda="nav">
<ulúlohu="navigácia"árie-štítok="Hlavná">
<li>Domovli>
<li>Obchodli>
<li>Oli>
ul>
div>

Aj keď vo väčšine prípadov by ste mali používať správne prvky, nemusí to byť vždy možné v rámci obmedzení toho, čo robíte. Ak napríklad váš web vyžaduje použitie indikátora priebehu, ale chcete dizajn, ktorý štandardný panel neumožňuje.

V tomto scenári môžete vytvoriť vlastnú množinu prvkov na zobrazenie indikátora priebehu. Pre čítačku obrazovky však tieto prvky budú vyzerať ako neporiadok; nebude môcť poskytnúť užitočné informácie návštevníkom vášho webu.

Nastavením role obalu na ukazateľ postupua pridávaním aria-valuenow, aria-valuemin, a aria-valuemax atribúty obálky, stále môžete indikovať pokrok.

V modernej dobe je vytváranie prístupných webových stránok dôležitejšie ako kedykoľvek predtým. Existujú niekoľko knižníc komponentov React vytvorených s ohľadom na dostupnosť.

Prístupná webová lokalita vám môže nielen pomôcť s hodnotením vo vyhľadávaní pre niekoľko veľkých vyhľadávacích nástrojov, ale zabezpečí, že neodstrihnete potenciálnu skupinu používateľov od vašej používateľskej základne.

Pridanie vhodných atribútov ARIA na vašu stránku pomôže zaistiť, aby ste informácie prezentovali všetkým používateľom. Konečným výsledkom bude stránka, ktorá privíta všetkých divákov a poskytne každému čo najbližšie k rovnakému zážitku.

Ktoré atribúty ARIA by som mal použiť?

Existuje veľa rôznych atribútov, ktoré by ste mali na svojej stránke používať. Vo všeobecnosti tieto atribúty spadajú do dvoch rôznych kategórií. Prvým sú atribúty widgetu, ktoré zvyčajne popisujú vlastný interaktívny prvok.

Ďalšou kategóriou, ktorú si musíte uvedomiť, sú atribúty vzťahu. Sú to atribúty, ktoré prenášajú informácie do asistenčných technológií o tom, ako konkrétny prvok súvisí so zvyškom lokality alebo inými prvkami.

Pokiaľ ide o zvažovanie, ktoré atribúty ARIA by ste mali zahrnúť, jednoduchá odpoveď je čo najviac. Všade, kde prvok, ktorý používate, neopisuje rolu, ktorú prvok plní, by ste mali použiť atribút role.

Ak máte pole so štítkom, toto pole by malo mať áriou označená atribút. Pokiaľ atribúty, ktoré používate, dávajú zmysel, iba ich pridaním sprístupníte svoju stránku.

Atribúty miniaplikácií sú oveľa širšou kategóriou. Obsahuje väčšinu atribútov ARIA, ktoré budete musieť pridať na štandardnú stránku. V predchádzajúcom príklade prispôsobeného indikátora priebehu sú atribúty miniaplikácie aria-valuenow, aria-valuemin a aria-valuemax. Opisujú stav alebo možné stavy prvku, na ktorom sa nachádzajú.

Existuje množstvo rôznych atribútov, ktoré môžete použiť na opis stavu prvku. Jedným z najbežnejších je árie-štítok. Tento atribút použije štítok na prvok, na ktorý ho umiestnite, ktorý je viditeľný iba pre asistenčné technológie.

Ďalšou spoločnou dvojicou atribútov ARIA, ktoré spadajú do tejto kategórie, sú ária-skrytá a áriou postihnutý. Tieto môžu oznámiť aktuálny stav prvku a či ho má čítačka obrazovky prečítať používateľovi. Je to užitočné pre množstvo rôznych zariadení s vlastnými čítačkami obrazovky.

Vzťahové atribúty

Na rozdiel od atribútov widgetu, atribúty vzťahu poskytujú pomocným technológiám indikácie o vzťahu a použití prvku k ostatným prvkom v jeho okolí. Najbežnejším z nich je atribút role. Rola určuje, na aký účel prvok v rámci lokality slúži.

Ak nastavíte úlohu pripisovať navigácia, bude okamžite identifikovaný ako obálka navigácie.

Niektoré atribúty vzťahu definujú, ako prvok súvisí s ostatnými prvkami okolo neho. The áriou označená atribút napríklad ukazuje, ktorý prvok funguje ako označenie tohto prvku. To môže byť užitočné, keď používate rozloženia, ktoré dávajú zmysel vizuálne, ale majú v toku dokumentu za sebou menovky pre konkrétne ovládacie prvky formulára.

Aj keď existuje menej atribútov vzťahov ako atribútov widgetu, tieto atribúty majú často väčší význam. Často môžu opísať tok a ovládanie dokumentu a poskytnúť ďalšie podrobnosti o spôsobe, akým môže používateľ prechádzať na vašom webe.

Tieto atribúty sú obzvlášť dôležité pri navrhovaní formulárov a navigačných položiek na vašej lokalite.

Prečo je také dôležité zahrnúť atribúty ARIA do kódu HTML

Atribúty ARIA slúžia na vašej webovej stránke jednoduchému a nevyhnutnému účelu. Slúžia na to, aby bola stránka dostupná pre všetkých používateľov bez ohľadu na použitie softvéru na zjednodušenie ovládania. Pre používateľov so zdravotným postihnutím môže umiestnenie týchto atribútov na vašej lokalite urobiť lokalitu použiteľnou.

Preferovanou metódou práce s asistenčnou technológiou je použitie správnych sémantických prvkov. Ak to však nie je možné, atribúty ARIA umožňujú voľne pracovať bez toho, aby vaši používatelia prichádzali o obsah.