ARIA (Accessible Rich Internet Applications) je sada atributů, které přidávají sémantiku přístupnosti — role, stavy a vlastnosti — které nativní HTML nemůže vyjádřit. Ale nejdůležitější pravidlo ARIA je: nejdříve upřednostni nativní HTML.
Save
Save
Nativní prvky přichází se správnými rolemi, chováním klávesnice a fokusem zdarma. Sahej po ARIA pouze tehdy, když žádný nativní prvek nepomůže.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Toto je skutečně užitečné ARIA: informování čtečky obrazovky o obsahu, který se mění bez znovunačtení stránky (výsledky vyhledávání, toast zprávy, chyby ověření).
Nesprávné ARIA je horší než žádné — poskytuje uživatelům čteček obrazovky nepravdivé informace. A ARIA mění pouze sémantiku, nikoli chování: role="button" na <div> to neučiní zaměřitelným ani kliknutelným; musíš sám přidat tabindex a obsluhu klíčů.
Používej sémantické HTML pro 95% případů; používej ARIA k vyplnění mezer pro vlastní widgety (taby, kombinační pole, nabídky) a oznamování dynamických aktualizací prostřednictvím live oblastí.
Dodržuj pravidla — upřednostni nativní prvky, nemeňuj nativní sémantiku zbytečně, udržuj stavy synchronizované a nikdy nepoužívej roli, kterou plně neimplementuješ.