Co jsou atributy Aria v HTML a proč jsou důležité?

Weboví návrháři, kteří jsou v HTML noví, mohou narazit na sadu neznámých atributů. Tyto atributy s předponou se slovem ARIA se objevují na celém webu, ale jejich účel může být pro nové uživatele záhadou.

Atributy ARIA slouží důležitému účelu v přístupnosti vašich webových stránek. Popisují jak obsah daného prvku, tak způsob, jakým prvek souvisí se stránkou nebo ostatními prvky kolem ní.

Přidání těchto veledůležitých atributů na váš web pomůže zajistit, že všichni návštěvníci získají stejný zážitek bez ohledu na technologii, kterou používají.

Co jsou atributy ARIA?

ARIA je zkratka pro Accessible Rich Internet Applications. V moderním HTML, zejména aplikacích bohatých na JavaScript, není vždy hned na základě syntaxe zřejmé, jakou roli jednotlivé prvky plní.

Potíže s rozlišováním rolí mohou být problémem, když uživatelé prohlížejí web pomocí nástrojů pro usnadnění, jako jsou čtečky obrazovky. Bez správného sémantického kódu HTML nemusí být váš koncový uživatel schopen procházet web při použití nástrojů pro usnadnění.

I když preferovaný způsob, jak tento problém vyřešit, je používat správné sémantické prvky v HTML5, to není vždy praktické nebo možné. Zde vstupují atributy ARIA v prvcích HTML. Tyto atributy pomáhají definovat roli a atributy vašeho prvku způsobem, který mohou nástroje pro usnadnění zpracovat.

Proč jsou atributy ARIA důležité?

Stručně řečeno, atributy ARIA umožňují uživatelům se zdravotním postižením používat váš web. Tyto role a atributy definují další informace o různých prvcích na vašem webu, které by jinak nemusely být snadno dostupné.

Existuje široká škála atributů ARIA, které můžete přiřadit. Měli byste je použít všude, kde je potřeba další kontext, aby dokument dával smysl nevizuálním způsobem.

Vezměme si například web, který má hlavní navigaci složenou z a prvek zabalený v a prvek, spíše než a živel:

<divtřída="nav">
<ul>
<li>Domovli>
<li>Prodejnali>
<li>Oli>
ul>
div>

Atributy ARIA můžete uživatelům usnadnit navigaci. Přidání atributů role a aria-label do umožňuje čtečce obrazovky a asistenčním technologiím zjistit, kde se vaše nabídka nachází.

<divtřída="nav">
<ulrole="navigace"árie-štítek="Hlavní">
<li>Domovli>
<li>Prodejnali>
<li>Oli>
ul>
div>

Zatímco ve většině případů byste měli používat správné prvky, nemusí to být vždy možné v rámci omezení toho, co děláte. Pokud například váš web vyžaduje použití ukazatele průběhu, ale chcete návrh, který standardní pruh neumožňuje.

V tomto scénáři můžete vytvořit vlastní sadu prvků pro zobrazení ukazatele průběhu. Pro čtečku obrazovky však tyto prvky budou vypadat jako nepořádek; nebude schopen poskytovat užitečné informace návštěvníkům vašeho webu.

Nastavením role obálky na ukazatel průběhua přidávání aria-valuenow, árie-valuemin, a árie-hodnotamax atributů obálky, stále můžete indikovat průběh.

V moderní době je vytváření přístupných webových stránek důležitější než kdy jindy. Existují několik knihoven komponent React vytvořených s ohledem na dostupnost.

Přístupné webové stránky vám mohou nejen pomoci s hodnocením ve vyhledávání pro několik velkých vyhledávačů, ale zajistí, že neodříznete potenciální skupinu uživatelů od své uživatelské základny.

Přidání příslušných atributů ARIA na váš web pomůže zajistit, že informace budete prezentovat všem uživatelům. Konečným výsledkem bude web, který přivítá všechny diváky a nabídne všem co nejblíže stejnému zážitku.

Které atributy ARIA bych měl použít?

Existuje spousta různých atributů, které byste měli na svém webu používat. Obecně tyto atributy spadají do dvou různých kategorií. Prvním jsou atributy widgetu, které obvykle popisují vlastní interaktivní prvek.

Další kategorií, které si musíte být vědomi, jsou atributy vztahu. Jedná se o atributy, které předávají pomocným technologiím informace o tom, jak určitý prvek souvisí se zbytkem webu nebo jinými prvky.

Pokud jde o zvažování, které atributy ARIA byste měli zahrnout, jednoduchá odpověď je co nejvíce. Všude, kde prvek, který používáte, nepopisuje roli, kterou prvek plní, byste měli použít atribut role.

Pokud máte pole se štítkem, toto pole by mělo mít árií označený atribut. Dokud atributy, které používáte, dávají smysl, jejich přidáním pouze zpřístupníte svůj web.

Atributy widgetů jsou mnohem větší kategorií. Obsahuje většinu atributů ARIA, které budete muset přidat na standardní web. V předchozím příkladu přizpůsobeného ukazatele průběhu jsou všechny atributy widgetu aria-valuenow, aria-valuemin a aria-valuemax. Popisují stav nebo možné stavy prvku, na kterém se nacházejí.

Existuje spousta různých atributů, které můžete použít k popisu stavu prvku. Jedním z nejčastějších je árie-štítek. Tento atribut aplikuje na prvek, na který jej umístíte, štítek, který je viditelný pouze pro asistenční technologie.

Další běžnou dvojicí atributů ARIA, které spadají do této kategorie, jsou árie skrytá a s postižením árií. Ty mohou uživateli sdělit aktuální stav prvku a to, zda jej má čtečka obrazovky přečíst. To je užitečné pro řadu různých zařízení s vlastními čtečkami obrazovky.

Atributy vztahu

Na rozdíl od atributů widgetu, atributy vztahu poskytují pomocným technologiím indikace o vztahu a použití prvku k ostatním prvkům v jeho okolí. Nejběžnější z nich je atribut role. Role určuje, k jakému účelu prvek na webu slouží.

Pokud nastavíte role přisuzovat navigace, bude okamžitě identifikován jako obálka navigace.

Některé atributy vztahu definují, jak se prvek vztahuje k ostatním prvkům v jeho okolí. The árií označený atribut například ukazuje, který prvek funguje jako štítek pro tento prvek. To může být užitečné, když používáte rozvržení, která dávají smysl vizuálně, ale mají za sebou v toku dokumentu popisky pro konkrétní ovládací prvky formuláře.

I když existuje méně atributů vztahů než atributů widgetu, tyto atributy mají často větší důležitost. Často mohou popsat tok a ovládání dokumentu a poskytnout další podrobnosti o způsobu, jakým může uživatel procházet vaše stránky.

Tyto atributy jsou zvláště důležité při navrhování formulářů a navigačních položek na vašem webu.

Proč je tak důležité zahrnout do kódu HTML atributy ARIA

Atributy ARIA slouží na vašem webu k jednoduchému a nezbytnému účelu. Slouží k tomu, aby byl web dostupný všem uživatelům bez ohledu na použití softwaru pro usnadnění. Pro uživatele se zdravotním postižením může umístění těchto atributů na webu učinit web použitelným.

Preferovanou metodou pro práci s asistenční technologií je použití správných sémantických prvků. Když to však není možné, atributy ARIA umožňují pracovat volně, aniž by vaši uživatelé přišli o obsah.