Sprievodca pre vývojárov po ARIA štítkoch, ktoré naozaj pomáhajú

ARIA štítky sú na názvy, nie na ospravedlnenia

ARIA je užitočná, no často sa používa ako záplata na nejasné HTML. Práve tam sa tímy dostávajú do problémov.

Najčastejším príkladom je aria-label. Vyzerá neškodne: pridáte reťazec, uspokojíte linter a idete ďalej. Prístupný názov však nie je dekorácia. Je to názov, ktorý mnohé asistenčné technológie sprostredkujú používateľom, keď sa pohybujú po tlačidlách, odkazoch, formulárových poliach, nadpisoch, landmarkoch a ovládacích prvkoch.

Ak je tento názov neurčitý, duplicitný, zastaraný alebo odlišný od viditeľného označenia, rozhranie sa používa ťažšie. Niekedy je to ešte horšie: aria-label môže prepísať lepší text, ktorý už v DOM existoval.

Cieľom nie je pridávať viac ARIA. Cieľom je, aby boli názov, rola, stav a účel každého prvku rozhrania jasné.

Prístupný názov jednoducho

Väčšina interaktívnych prvkov má prístupný názov. Čítačky obrazovky ho používajú na oznámenie toho, čo daný prvok je.

Napríklad:

<button>Save changes</button>

Čítačka obrazovky môže oznámiť niečo ako: „Save changes, button.“ Rola vychádza z natívneho prvku button. Názov vychádza z textu vnútri neho.

To je ideálny prípad: viditeľný text a prístupný názov sa zhodujú.

Atribúty ARIA na označovanie sú užitočné vtedy, keď viditeľné rozhranie neposkytuje úplný názov alebo keď názov musí pochádzať z iného prvku. Hlavné atribúty sú:

• aria-label: poskytuje reťazec priamo na prvku.
• aria-labelledby: odkazuje na jeden alebo viac prvkov, ktorých text sa stane názvom.
• aria-describedby: odkazuje na podporný opisný text, nie na hlavný názov.

Tieto tri spolu súvisia, ale nie sú zameniteľné.

Prvé pravidlo: uprednostnite natívne HTML a viditeľné označenia

Ak môžete na ovládací prvok umiestniť viditeľný text, urobte to ako prvé.

Toto je lepšie:

<button>Delete invoice</button>

Než toto:

<button aria-label="Delete invoice">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Druhý vzor je platný pre tlačidlo, ktoré obsahuje iba ikonu. Ak však dizajn znesie viditeľný text, viditeľný text pomáha každému: používateľom čítačiek obrazovky, používateľom hlasového ovládania, ľuďom s kognitívnou záťažou, ľuďom, ktorí stránku rýchlo skenujú, aj ľuďom používajúcim prekladové nástroje.

Toto je v práci na prístupnosti opakujúca sa téma. Natívne HTML a viditeľné affordancie riešia viac problémov než skryté metadáta. Rovnaký princíp platí aj pre sémantiku tlačidiel vo všeobecnosti; ak váš tím audituje ovládacie prvky UI, náš kontrolný zoznam pre prístupné webové tlačidlá je dobrým doplnkom k tomuto sprievodcovi.

Kedy je aria-label správny nástroj

Použite aria-label, keď prvok potrebuje prístupný názov a neexistuje vhodný viditeľný text, na ktorý by sa dalo odkázať.

Klasickým prípadom je tlačidlo iba s ikonou:

<button aria-label="Search">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <!-- icon -->
  </svg>
</button>

Toto je rozumné. Viditeľná ikona naznačuje vyhľadávanie, ale samotná cesta SVG neposkytuje spoľahlivý názov. aria-label ho doplní.

Medzi ďalšie dobré prípady patria:

• Tlačidlo zatvorenia reprezentované iba znakom „X“.
• Navigačný landmark, ktorý potrebuje konkrétnejší názov, napríklad aria-label="Product".
• Opakovaný ovládací prvok, pri ktorom viditeľný kontext nie je súčasťou textu tlačidla.

Napríklad:

<nav aria-label="Primary">
  ...
</nav>

<nav aria-label="Footer">
  ...
</nav>

Obe sú navigačné landmarky, ale ich označenia pomáhajú používateľom rozlíšiť ich pri pohybe podľa landmarkov.

Kedy je aria-label nesprávny nástroj

Nepridávajte aria-label len preto, že test hovorí, že prvok potrebuje označenie. Najprv opravte markup.

Zlé:

<div role="button" tabindex="0" aria-label="Submit">Submit</div>

Lepšie:

<button>Submit</button>

Prvý príklad vytvára zbytočnú prácu. Teraz musíte znovu vytvoriť správanie klávesnice, deaktivované stavy, správanie vo formulári a očakávania, ktoré natívne tlačidlá už poskytujú.

Vyhnite sa aj používaniu aria-label na premenovanie viditeľného textu spôsobom, ktorý mení význam.

<button aria-label="Delete invoice">Remove</button>

Vyzerá to ako drobnosť, ale môže to zmiasť používateľov, ktorí sa spoliehajú na hlasový vstup. Ak viditeľné tlačidlo hovorí „Remove“, ale jeho prístupný názov je „Delete invoice“, používateľ, ktorý sa pokúsi povedať „click Remove“, nemusí dostať očakávaný výsledok. Požiadavka WCAG „label in name“ existuje presne z tohto dôvodu: viditeľný text by mal byť vo všeobecnosti obsiahnutý v prístupnom názve.

Lepšia verzia:

<button aria-label="Remove invoice">Remove</button>

Často ešte lepšie:

<button>Remove invoice</button>

Siahnite po aria-labelledby, keď už viditeľný text existuje

Ak je text označenia už na stránke, aria-labelledby je zvyčajne lepší než aria-label.

Príklad:

<h2 id="billing-title">Billing address</h2>
<section aria-labelledby="billing-title">
  ...
</section>

Prístupný názov sekcie teraz pochádza z viditeľného nadpisu. Vyhnete sa duplikovaniu reťazcov, čo znižuje riziko chýb v preklade a zastaraných označení.

Je to obzvlášť užitočné pre skupiny formulárov:

<fieldset aria-labelledby="shipping-speed-title">
  <legend id="shipping-speed-title">Shipping speed</legend>

  <label>
    <input type="radio" name="shipping" value="standard">
    Standard
  </label>

  <label>
    <input type="radio" name="shipping" value="express">
    Express
  </label>
</fieldset>

V mnohých prípadoch stačí natívny legend aj bez ARIA. Ide o to, že viditeľné označenia by mali viesť. ARIA má prepájať existujúci význam, nie vytvárať jeho druhú súkromnú verziu.

Používajte aria-describedby pre pomocný text, nie pre názov

Opis nie je označenie.

Zvážte toto pole:

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="password-help">
<p id="password-help">Use at least 12 characters.</p>

Prístupný názov je „Password“. Opis je „Use at least 12 characters.“ Čítačka obrazovky môže oznámiť oboje, ale slúžia na rôzne účely.

Nerobte toto:

<input type="password" aria-label="Use at least 12 characters">

Tým sa pole pomenuje podľa inštrukcie, nie podľa konceptu. Používateľ, ktorý sa pohybuje formulárom, chce najprv vedieť, čo pole je, a až potom aké obmedzenia platia.

Toto rozlíšenie je dôležité aj pri chybových stavoch:

<label for="email">Email</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<p id="email-error">Enter an email address in the format [email protected].</p>

Označenie zostáva stabilné. Chybová správa sa stáva podporným kontextom.

Opakované ovládacie prvky potrebujú jedinečné názvy

Zoznamy a karty sú miesta, kde sú ARIA štítky často potrebné.

Zlé:

<button>Delete</button>
<button>Delete</button>
<button>Delete</button>

Používateľ čítačky obrazovky, ktorý sa pohybuje po tlačidlách, môže počuť „Delete, button“ trikrát bez kontextu.

Dobré:

<button aria-label="Delete report: Q4 revenue">Delete</button>
<button aria-label="Delete report: Hiring plan">Delete</button>
<button aria-label="Delete report: Vendor list">Delete</button>

Toto je legitímne použitie aria-label: viditeľný text zostáva stručný, zatiaľ čo prístupný názov obsahuje objekt.

Tento vzor však používajte opatrne. Ak je názov objektu viditeľný nablízku, aria-labelledby môže byť udržiavateľnejší:

<article>
  <h3 id="report-q4">Q4 revenue</h3>
  <button aria-labelledby="delete-q4 report-q4" id="delete-q4">Delete</button>
</article>

Prístupný názov sa stane „Delete Q4 revenue“. Tým sa vyhnete duplikovaniu názvu reportu v atribúte.

Neoznačujte všetko

Nie každý prvok potrebuje ARIA štítok.

Statický text ho zvyčajne nepotrebuje. Dekoratívne ikony ho nepotrebujú. Kontajnery ho nepotrebujú, pokiaľ nemajú zmysluplný landmark alebo rolu widgetu. Nadmerné označovanie môže stránku urobiť hlučnou a ťažšie navigovateľnou.

Pri obrázkoch používajte model špecifický pre obrázky: významové obrázky potrebujú užitočné alt; dekoratívne obrázky potrebujú prázdne alt="". Nepoužívajte ARIA štítky ako náhradu za dobrý text obrázka. Ak váš tím tieto koncepty mieša, vráťte sa k pragmatickému alt textu pre obrázky a oddeľte alternatívy obrázkov od názvov ovládacích prvkov.

Častou chybou je pridať každému SVG aria-label. Ak je SVG vnútri tlačidla a tlačidlo už má názov, ikona by mala byť zvyčajne skrytá pred asistenčnými technológiami:

<button aria-label="Open menu">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Inak môže používateľ počuť redundantné alebo zvláštne oznámenia v závislosti od kombinácie prehliadača a asistenčnej technológie.

Kontrolujte vypočítaný názov, nielen kód

Chyby prístupnosti často prežijú code review, pretože markup vyzerá vierohodne.

Moderné vývojárske nástroje prehliadačov dokážu zobraziť vypočítaný strom prístupnosti. V Chrome, Edge, Firefox a Safari skontrolujte prvok a hľadajte informácie o prístupnosti, ako sú rola, názov a opis. Overujete tri veci:

1. Je rola taká, akú očakávate?
2. Je prístupný názov jasný a konkrétny?
3. Je opis užitočný bez toho, aby nahrádzal názov?

Potom otestujte niekoľko tokov so skutočnou čítačkou obrazovky. Nemusíte sa stať odborníkom na asistenčné technológie na plný úväzok, aby ste zachytili základy. Na macOS je VoiceOver zabudovaný. Na Windows je NVDA široko používaná a bezplatná. Na mobile podľa potreby testujte s VoiceOver na iOS a TalkBack na Android.

Automatizované nástroje sú užitočné, ale nedokážu spoľahlivo povedať, či sú „Open“, „Read more“ alebo „Delete“ dostatočne kontextové. Berte automatizáciu ako sieť, nie ako sudcu. Je to podobné auditovaniu výkonu: report vás môže nasmerovať na podozrivé oblasti, ale vplyv stále musíte interpretovať. Rovnaký pokojný prístup, ktorý odporúčame pri čítaní reportu Lighthouse bez paniky, platí aj tu.

Praktický kontrolný zoznam na revíziu

Pred nasadením ARIA štítkov sa spýtajte:

• Mohlo by to byť namiesto toho natívne HTML?
• Existuje viditeľný text, ktorý by sa mal použiť ako označenie?
• Ak viditeľný text existuje, obsahuje ho prístupný názov?
• Sú opakované ovládacie prvky jedinečné pri navigácii mimo vizuálneho kontextu?
• Je pomocný text pripojený pomocou aria-describedby, a nie natlačený do označenia?
• Sú dekoratívne ikony skryté pred asistenčnými technológiami?
• Skontroloval niekto vypočítaný prístupný názov vo vývojárskych nástrojoch prehliadača?
• Prebehol aspoň jeden test kritického toku so skutočnou čítačkou obrazovky?

Tento kontrolný zoznam zachytí väčšinu problémov s označeniami skôr, než sa z nich stanú problémy používateľov.

Tichá disciplína dobrej ARIA

Dobrá práca s ARIA je zriedka dramatická. Je to najmä zdržanlivosť.

Používajte skutočné tlačidlá. Používajte skutočné označenia. Udržujte viditeľné a prístupné názvy zosúladené. Pridajte aria-label iba vtedy, keď neexistuje lepší viditeľný zdroj. Použite aria-labelledby, keď stránka už obsahuje správny text. Použite aria-describedby pre podporné inštrukcie a chyby.

Webová platforma dáva vývojárom veľa zadarmo, keď ju používame priamo. ARIA je tu na medzery. Zručnosť spočíva v tom, vedieť, kedy tam medzera naozaj je.