Kūrėjo gidas apie ARIA etiketes, kurios iš tiesų padeda

ARIA etiketės skirtos pavadinimams, o ne atsiprašymams

ARIA yra naudinga, tačiau dažnai naudojama kaip pataisa neaiškiam HTML. Būtent tada komandos patenka į bėdą.

Dažniausias pavyzdys yra aria-label. Atrodo nekaltai: pridėti eilutę, patenkinti linterį ir eiti toliau. Tačiau pasiekiamas pavadinimas nėra dekoracija. Tai pavadinimas, kurį daugelis pagalbinių technologijų pateikia naudotojams, kai jie naršo pagal mygtukus, nuorodas, formų laukus, antraštes, orientyrus ir valdiklius.

Jei tas pavadinimas neaiškus, pasikartojantis, pasenęs arba skiriasi nuo matomos etiketės, sąsaja tampa sunkiau naudojama. Kartais dar blogiau: aria-label gali perrašyti geresnį tekstą, kuris jau buvo DOM.

Tikslas nėra pridėti daugiau ARIA. Tikslas yra aiškiai perteikti kiekvieno sąsajos elemento pavadinimą, vaidmenį, būseną ir paskirtį.

Pasiekiamas pavadinimas paprastai

Dauguma interaktyvių elementų turi pasiekiamą pavadinimą. Ekrano skaitytuvai naudoja šį pavadinimą, kad praneštų, kas yra elementas.

Pavyzdžiui:

<button>Save changes</button>

Ekrano skaitytuvas gali pranešti maždaug taip: „Save changes, button.“ Vaidmuo gaunamas iš natyvaus button elemento. Pavadinimas gaunamas iš jame esančio teksto.

Tai idealus atvejis: matomas tekstas ir pasiekiamas pavadinimas sutampa.

ARIA žymėjimo atributai tampa naudingi tada, kai matoma sąsaja nepateikia pilno pavadinimo arba kai pavadinimas turi būti paimtas iš kito elemento. Pagrindiniai atributai yra:

• aria-label: pateikia eilutę tiesiogiai elemente.
• aria-labelledby: nurodo vieną ar kelis elementus, kurių tekstas tampa pavadinimu.
• aria-describedby: nurodo papildomą aprašymo tekstą, o ne pagrindinį pavadinimą.

Šie trys atributai susiję, bet nėra tarpusavyje pakeičiami.

Pirma taisyklė: pirmenybę teikite natyviam HTML ir matomoms etiketėms

Jei ant valdiklio galite pateikti matomą tekstą, pirmiausia taip ir padarykite.

Tai geriau:

<button>Delete invoice</button>

Nei tai:

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

Antrasis modelis tinka tik piktogramos mygtukui. Tačiau jei dizainas gali toleruoti matomą tekstą, jis padeda visiems: ekrano skaitytuvų naudotojams, kalbos atpažinimo naudotojams, žmonėms, patiriantiems kognityvinę apkrovą, greitai skenuojantiems puslapį ir naudojantiems vertimo įrankius.

Tai pasikartojanti tema pasiekiamumo darbe. Natyvus HTML ir matomos valdymo užuominos išsprendžia daugiau problemų nei paslėpti metaduomenys. Tas pats principas plačiau taikomas ir mygtukų semantikai; jei jūsų komanda audituoja UI valdiklius, mūsų pasiekiamų žiniatinklio mygtukų kontrolinis sąrašas yra geras šio gido papildymas.

Kada aria-label yra tinkamas įrankis

Naudokite aria-label, kai elementui reikia pasiekiamo pavadinimo ir nėra tinkamo matomo teksto, į kurį būtų galima nurodyti.

Klasikinis atvejis yra tik piktogramos mygtukas:

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

Tai pagrįsta. Matoma piktograma sufleruoja paiešką, bet pats SVG kelias nesuteikia patikimo pavadinimo. aria-label jį pateikia.

Kiti geri atvejai:

• Uždarymo mygtukas, vaizduojamas tik „X“.
• Navigacijos orientyras, kuriam reikia konkretesnio pavadinimo, pvz., aria-label="Product".
• Pasikartojantis valdiklis, kai matomas kontekstas nėra mygtuko teksto dalis.

Pavyzdžiui:

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

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

Abu yra navigacijos orientyrai, bet jų etiketės padeda naudotojams juos atskirti judant pagal orientyrus.

Kada aria-label yra netinkamas įrankis

Nepridėkite aria-label vien todėl, kad testas sako, jog elementui reikia etiketės. Pirmiausia pataisykite žymėjimą.

Blogai:

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

Geriau:

<button>Submit</button>

Pirmasis pavyzdys sukuria nereikalingo darbo. Dabar turite iš naujo sukurti klaviatūros elgseną, išjungtas būsenas, formų elgseną ir lūkesčius, kuriuos natyvūs mygtukai jau suteikia.

Taip pat venkite naudoti aria-label matomam tekstui pervadinti taip, kad pasikeistų prasmė.

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

Tai atrodo smulkmena, bet gali suklaidinti naudotojus, kurie remiasi kalbos įvestimi. Jei matomas mygtukas sako „Remove“, bet jo pasiekiamas pavadinimas yra „Delete invoice“, naudotojas, bandantis pasakyti „click Remove“, gali negauti laukiamo rezultato. WCAG reikalavimas dėl „etiketės pavadinime“ egzistuoja būtent dėl šios priežasties: matomas tekstas paprastai turėtų būti įtrauktas į pasiekiamą pavadinimą.

Geresnė versija:

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

Dažnai dar geriau:

<button>Remove invoice</button>

Rinkitės aria-labelledby, kai matomas tekstas jau egzistuoja

Jei etiketės tekstas jau yra puslapyje, aria-labelledby paprastai yra geriau nei aria-label.

Pavyzdys:

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

Sekcijos pasiekiamas pavadinimas dabar gaunamas iš matomos antraštės. Taip išvengiate eilučių dubliavimo, todėl sumažėja vertimo klaidų ir pasenusių etikečių rizika.

Tai ypač naudinga formų grupėms:

<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>

Daugeliu atvejų natyvaus legend pakanka be ARIA. Esmė ta, kad matomos etiketės turėtų vesti. ARIA turėtų susieti esamą prasmę, o ne kurti antrą privačią jos versiją.

Naudokite aria-describedby pagalbos tekstui, o ne pavadinimui

Aprašymas nėra etiketė.

Apsvarstykite šį lauką:

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

Pasiekiamas pavadinimas yra „Password.“ Aprašymas yra „Use at least 12 characters.“ Ekrano skaitytuvas gali pranešti abu, bet jie atlieka skirtingas funkcijas.

Nedarykite taip:

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

Taip laukas pavadinamas pagal instrukciją, o ne pagal sąvoką. Naudotojas, naršantis formą, pirmiausia nori žinoti, kas tai per laukas, o tik tada — kokie apribojimai taikomi.

Šis skirtumas svarbus ir klaidų būsenose:

<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>

Etiketė išlieka stabili. Klaidos pranešimas tampa papildomu kontekstu.

Pasikartojantiems valdikliams reikia unikalių pavadinimų

Sąrašai ir kortelės yra vietos, kur ARIA etiketės dažnai tampa reikalingos.

Blogai:

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

Ekrano skaitytuvo naudotojas, naršantis pagal mygtukus, gali tris kartus išgirsti „Delete, button“ be jokio konteksto.

Gerai:

<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>

Tai teisėtas aria-label naudojimas: matomas tekstas išlieka glaustas, o pasiekiamas pavadinimas įtraukia objektą.

Tačiau šį modelį naudokite atsargiai. Jei objekto pavadinimas matomas netoliese, aria-labelledby gali būti lengviau prižiūrimas:

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

Pasiekiamas pavadinimas tampa „Delete Q4 revenue.“ Taip išvengiama ataskaitos pavadinimo dubliavimo atribute.

Nežymėkite visko etiketėmis

Ne kiekvienam elementui reikia ARIA etiketės.

Statiniam tekstui jos paprastai nereikia. Dekoratyvinėms piktogramoms — taip pat. Konteineriams nereikia, nebent jie turi prasmingą orientyro ar valdiklio vaidmenį. Perteklinis etikečių naudojimas gali padaryti puslapį triukšmingą ir sunkiau naršomą.

Vaizdams naudokite vaizdams skirtą modelį: prasmingiems vaizdams reikia naudingo alt; dekoratyviniams vaizdams reikia tuščio alt="". Nenaudokite ARIA etikečių kaip gero vaizdo teksto pakaitalo. Jei jūsų komanda painioja šias sąvokas, grįžkite prie pragmatiško vaizdų alt teksto ir atskirkite vaizdų alternatyvas nuo valdiklių pavadinimų.

Dažna klaida — kiekvienam SVG suteikti aria-label. Jei SVG yra mygtuko viduje ir mygtukas jau turi pavadinimą, piktograma paprastai turėtų būti paslėpta nuo pagalbinių technologijų:

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

Kitaip naudotojas gali girdėti perteklinius arba keistus pranešimus, priklausomai nuo naršyklės ir pagalbinės technologijos derinio.

Tikrinkite apskaičiuotą pavadinimą, ne tik kodą

Pasiekiamumo klaidos dažnai išgyvena kodo peržiūrą, nes žymėjimas atrodo įtikinamai.

Šiuolaikiniai naršyklių kūrėjo įrankiai gali parodyti apskaičiuotą pasiekiamumo medį. Chrome, Edge, Firefox ir Safari naršyklėse patikrinkite elementą ir ieškokite pasiekiamumo informacijos, tokios kaip vaidmuo, pavadinimas ir aprašymas. Tikrinate tris dalykus:

1. Ar vaidmuo yra toks, kokio tikitės?
2. Ar pasiekiamas pavadinimas aiškus ir konkretus?
3. Ar aprašymas padeda, bet nepakeičia pavadinimo?

Tada išbandykite kelis srautus su tikru ekrano skaitytuvu. Kad pagautumėte pagrindus, nereikia tapti visos darbo dienos pagalbinių technologijų ekspertu. macOS turi integruotą VoiceOver. Windows aplinkoje NVDA yra plačiai naudojamas ir nemokamas. Mobiliajame įrenginyje, kai aktualu, testuokite su VoiceOver iOS sistemoje ir TalkBack Android sistemoje.

Automatiniai įrankiai naudingi, bet jie negali patikimai pasakyti, ar „Open“, „Read more“ arba „Delete“ turi pakankamai konteksto. Automatizavimą laikykite tinklu, o ne teisėju. Tai panašu į našumo auditą: ataskaita gali parodyti įtartinas vietas, bet poveikį vis tiek turite interpretuoti patys. Čia tinka tas pats ramus požiūris, kurį rekomenduojame skaitant Lighthouse ataskaitą be panikos.

Praktinis peržiūros kontrolinis sąrašas

Prieš išleisdami ARIA etiketes, paklauskite:

• Ar vietoj to galėtų būti natyvus HTML?
• Ar yra matomas tekstas, kuris turėtų būti naudojamas kaip etiketė?
• Jei matomas tekstas yra, ar pasiekiamas pavadinimas jį apima?
• Ar pasikartojantys valdikliai yra unikalūs, kai naršoma be vizualinio konteksto?
• Ar pagalbos tekstas susietas su aria-describedby, o ne priverstinai įkištas į etiketę?
• Ar dekoratyvinės piktogramos paslėptos nuo pagalbinių technologijų?
• Ar kas nors patikrino apskaičiuotą pasiekiamą pavadinimą naršyklės kūrėjo įrankiuose?
• Ar bent vieną kartą kritinis srautas buvo patikrintas su tikru ekrano skaitytuvu?

Šis kontrolinis sąrašas pagauna daugumą etikečių problemų dar prieš joms tampant naudotojų problemomis.

Tylioji gero ARIA disciplina

Geras ARIA darbas retai būna dramatiškas. Dažniausiai tai susilaikymas.

Naudokite tikrus mygtukus. Naudokite tikras etiketes. Laikykite matomus ir pasiekiamus pavadinimus suderintus. Pridėkite aria-label tik tada, kai nėra geresnio matomo šaltinio. Naudokite aria-labelledby, kai puslapyje jau yra tinkamas tekstas. Naudokite aria-describedby papildomoms instrukcijoms ir klaidoms.

Žiniatinklio platforma kūrėjams daug ką suteikia nemokamai, kai ją naudojame tiesiogiai. ARIA skirta spragoms. Įgūdis yra žinoti, kada spraga iš tikrųjų egzistuoja.