ARIA (Accessible Rich Internet Applications) yra atributų rinkinys, kuris prideda pritaikymo semantiką — roles, states ir properties — kuriuos negali išreikšti įprastas HTML. Tačiau svarbiausia ARIA taisyklė yra: pirmiausia naudokite įprastą HTML.
Save
Save
Įprasti elementai jau turi tinkamas roles, klaviatūros elgseną ir fokusą. Siekite ARIA tik tada, kai nė vienas įprastas elementas neatlieka reikalingos funkcijos.
<!-- 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 -->
Tai yra tikrai naudinga ARIA: informavimas ekrano skaitytuvų apie turinį, kuris kinta be puslapio perkrovimo (paieškos rezultatai, tostai, validavimo klaidos).
Netinkama ARIA yra blogiau nei jokia — ji suteikia ekrano skaitytuvų naudotojams klaidingą informaciją. ARIA keičia tik semantiką, niekada elgseną: role="button" ant <div> nesudaro jos sukoncentruojama arba spaudžiama; jūs patys turite pridėti tabindex ir klavišų tvarkytuvus.
Naudokite semantinį HTML 95 procentų atvejų; naudokite ARIA spragoms užpildyti pasirinktiniams valdikliams (tabs, comboboxes, menus) ir dinaminiai atnaujinimams skelbti per live regiones.
Laikykitės taisyklių — pirmenybę teikite įprastam HTML, nenekeiskite įprasto HTML semantikos be reikalingumo, palaikykite states sinchronizuotus ir niekada nepritaikykite role, kurio pilnai neįgyvendinate.