Vodič za developere kroz ARIA oznake koje zaista pomažu

ARIA oznake služe za nazive, ne za isprike

ARIA je korisna, ali se često koristi kao zakrpa za nejasan HTML. Tu timovi upadaju u probleme.

Najčešći je primjer aria-label. Djeluje bezopasno: dodajte tekst, zadovoljite linter i nastavite dalje. No pristupačni naziv nije ukras. To je naziv koji mnoge pomoćne tehnologije izlažu korisnicima dok se kreću po gumbima, poveznicama, poljima obrazaca, naslovima, orijentirima i kontrolama.

Ako je taj naziv neodređen, dupliciran, zastario ili različit od vidljive oznake, sučelje postaje teže za korištenje. Ponekad i gore: aria-label može nadjačati bolji tekst koji je već bio prisutan u DOM-u.

Cilj nije dodati više ARIA-e. Cilj je učiniti naziv, ulogu, stanje i svrhu svakog elementa sučelja jasnima.

Pristupačni naziv, jednostavnim riječima

Većina interaktivnih elemenata ima pristupačni naziv. Čitači zaslona koriste taj naziv kako bi najavili što element jest.

Na primjer:

<button>Save changes</button>

Čitač zaslona može najaviti nešto poput: “Save changes, button.” Uloga dolazi iz nativnog elementa button. Naziv dolazi iz teksta unutar njega.

To je idealan slučaj: vidljivi tekst i pristupačni naziv se podudaraju.

ARIA atributi za označavanje postaju korisni kada vidljivo sučelje ne pruža potpun naziv ili kada naziv mora doći iz drugog elementa. Glavni atributi su:

• aria-label: pruža tekstualni niz izravno na elementu.
• aria-labelledby: upućuje na jedan ili više elemenata čiji tekst postaje naziv.
• aria-describedby: upućuje na pomoćni opisni tekst, a ne na glavni naziv.

Ta su tri atributa povezana, ali nisu međusobno zamjenjiva.

Prvo pravilo: dajte prednost nativnom HTML-u i vidljivim oznakama

Ako možete staviti vidljiv tekst na kontrolu, najprije učinite to.

Ovo je bolje:

<button>Delete invoice</button>

Od ovoga:

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

Drugi je obrazac valjan za gumb koji sadrži samo ikonu. No ako dizajn može podnijeti vidljiv tekst, vidljiv tekst pomaže svima: korisnicima čitača zaslona, korisnicima prepoznavanja govora, osobama pod kognitivnim opterećenjem, osobama koje brzo skeniraju sadržaj i osobama koje koriste alate za prevođenje.

To je stalna tema u radu na pristupačnosti. Nativni HTML i vidljivi pokazatelji mogućnosti rješavaju više problema od skrivenih metapodataka. Isto načelo vrijedi i za semantiku gumba općenitije; ako vaš tim provodi reviziju UI kontrola, naš popis za provjeru pristupačnih web gumba dobar je dodatak ovom vodiču.

Kada je aria-label pravi alat

Koristite aria-label kada element treba pristupačni naziv, a ne postoji prikladan vidljiv tekst na koji se može referencirati.

Klasičan je slučaj gumb koji sadrži samo ikonu:

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

To je razumno. Vidljiva ikona sugerira pretraživanje, ali sam SVG path ne pruža pouzdan naziv. aria-label ga osigurava.

Drugi dobri slučajevi uključuju:

• Gumb za zatvaranje prikazan samo kao “X”.
• Navigacijski orijentir kojem treba specifičniji naziv, kao što je aria-label="Product".
• Ponavljajuća kontrola kod koje vidljivi kontekst nije dio teksta gumba.

Na primjer:

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

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

Oba su navigacijski orijentiri, ali njihove oznake pomažu korisnicima da ih razlikuju kada se kreću po orijentirima.

Kada je aria-label pogrešan alat

Nemojte dodavati aria-label samo zato što test kaže da element treba oznaku. Najprije popravite markup.

Loše:

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

Bolje:

<button>Submit</button>

Prvi primjer stvara nepotreban posao. Sada morate ponovno stvoriti ponašanje tipkovnice, onemogućena stanja, ponašanje obrazaca i očekivanja koja nativni gumbi već pružaju.

Također izbjegavajte koristiti aria-label za preimenovanje vidljivog teksta na način koji mijenja značenje.

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

To izgleda sitno, ali može zbuniti korisnike koji se oslanjaju na govorni unos. Ako vidljivi gumb kaže “Remove”, ali je njegov pristupačni naziv “Delete invoice”, korisnik koji pokušava reći “click Remove” možda neće dobiti očekivani rezultat. WCAG-ov zahtjev “label in name” postoji upravo zbog toga: vidljivi tekst općenito bi trebao biti sadržan u pristupačnom nazivu.

Bolja verzija:

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

Često još bolje:

<button>Remove invoice</button>

Posegnite za aria-labelledby kada vidljivi tekst već postoji

Ako je tekst oznake već na stranici, aria-labelledby je obično bolji od aria-label.

Primjer:

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

Pristupačni naziv sekcije sada dolazi iz vidljivog naslova. Izbjegavate dupliciranje nizova, što smanjuje pogreške u prijevodu i zastarjele oznake.

To je osobito korisno za grupe obrazaca:

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

U mnogim slučajevima nativni legend dovoljan je bez ARIA-e. Poanta je da vidljive oznake trebaju voditi. ARIA treba povezati postojeće značenje, a ne stvarati njegovu drugu, privatnu verziju.

Koristite aria-describedby za pomoćni tekst, ne za naziv

Opis nije oznaka.

Razmotrite ovo polje:

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

Pristupačni naziv je “Password”. Opis je “Use at least 12 characters.” Čitač zaslona može najaviti oboje, ali služe različitim svrhama.

Nemojte činiti ovo:

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

Time se polje naziva prema uputi, a ne prema pojmu. Korisnik koji se kreće kroz obrazac najprije želi znati što je polje, a zatim koja ograničenja vrijede.

Ta je razlika važna i u stanjima pogreške:

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

Oznaka ostaje stabilna. Poruka o pogrešci postaje pomoćni kontekst.

Ponavljajuće kontrole trebaju jedinstvene nazive

Popisi i kartice mjesta su na kojima ARIA oznake često postaju potrebne.

Loše:

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

Korisnik čitača zaslona koji se kreće po gumbima može čuti “Delete, button” tri puta bez konteksta.

Dobro:

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

Ovo je legitimna upotreba aria-label: vidljivi tekst ostaje sažet, dok pristupačni naziv uključuje objekt.

No koristite ovaj obrazac pažljivo. Ako je naziv objekta vidljiv u blizini, aria-labelledby može biti lakši za održavanje:

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

Pristupačni naziv postaje “Delete Q4 revenue.” Time se izbjegava dupliciranje naslova izvještaja u atributu.

Nemojte označavati sve

Ne treba svaki element ARIA oznaku.

Statični tekst obično je ne treba. Dekorativne ikone je ne trebaju. Spremnici je ne trebaju, osim ako imaju smisleni orijentir ili ulogu widgeta. Pretjerano označavanje može stranicu učiniti bučnom i težom za navigaciju.

Za slike koristite model specifičan za slike: smislene slike trebaju koristan alt; dekorativne slike trebaju prazan alt="". Nemojte koristiti ARIA oznake kao zamjenu za dobar tekst slike. Ako vaš tim miješa te pojmove, ponovno pogledajte pragmatičan tekst alt za slike i odvojite alternative za slike od naziva kontrola.

Česta je pogreška dodijeliti svakom SVG-u aria-label. Ako je SVG unutar gumba, a gumb već ima naziv, ikona bi obično trebala biti skrivena od pomoćnih tehnologija:

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

Inače korisnik može čuti suvišne ili neobične najave, ovisno o kombinaciji preglednika i pomoćne tehnologije.

Provjerite izračunati naziv, ne samo kod

Greške u pristupačnosti često prežive pregled koda jer markup izgleda uvjerljivo.

Moderni alati za developere u preglednicima mogu prikazati izračunato stablo pristupačnosti. U Chromeu, Edgeu, Firefoxu i Safariju pregledajte element i potražite informacije o pristupačnosti kao što su uloga, naziv i opis. Provjeravate tri stvari:

1. Je li uloga ono što očekujete?
2. Je li pristupačni naziv jasan i specifičan?
3. Je li opis koristan bez zamjene naziva?

Zatim testirajte nekoliko tokova sa stvarnim čitačem zaslona. Ne morate postati stalni stručnjak za pomoćne tehnologije da biste uhvatili osnove. Na macOS-u je VoiceOver ugrađen. Na Windowsu se NVDA široko koristi i besplatan je. Na mobilnim uređajima, gdje je relevantno, testirajte s VoiceOverom na iOS-u i TalkBackom na Androidu.

Automatizirani alati su korisni, ali ne mogu pouzdano reći jesu li “Open”, “Read more” ili “Delete” dovoljno kontekstualni. Tretirajte automatizaciju kao mrežu, a ne kao suca. To je slično reviziji performansi: izvještaj vas može uputiti na sumnjiva područja, ali i dalje morate protumačiti utjecaj. Isti smiren pristup koji preporučujemo za čitanje Lighthouse izvještaja bez panike vrijedi i ovdje.

Praktičan popis za provjeru

Prije isporuke ARIA oznaka, pitajte:

• Može li ovo umjesto toga biti nativni HTML?
• Postoji li vidljiv tekst koji bi se trebao koristiti kao oznaka?
• Ako vidljiv tekst postoji, uključuje li ga pristupačni naziv?
• Jesu li ponavljajuće kontrole jedinstvene kada se njima navigira izvan vizualnog konteksta?
• Je li pomoćni tekst povezan s aria-describedby, a ne uguran u oznaku?
• Jesu li dekorativne ikone skrivene od pomoćnih tehnologija?
• Je li netko provjerio izračunati pristupačni naziv u alatima za developere u pregledniku?
• Je li barem jedan prolaz stvarnim čitačem zaslona napravljen za kritični tok?

Ovaj popis za provjeru hvata većinu problema s oznakama prije nego što postanu problemi korisnika.

Tiha disciplina dobre ARIA-e

Dobar rad s ARIA-om rijetko je dramatičan. Uglavnom je riječ o suzdržanosti.

Koristite prave gumbe. Koristite prave oznake. Držite vidljive i pristupačne nazive usklađenima. Dodajte aria-label samo kada nema boljeg vidljivog izvora. Koristite aria-labelledby kada stranica već sadrži pravi tekst. Koristite aria-describedby za pomoćne upute i pogreške.

Web platforma developerima daje mnogo toga besplatno kada je koristimo izravno. ARIA postoji za praznine. Vještina je znati kada praznina zaista postoji.