ARIA-roolit ja ominaisuudet: Parhaat valinnat verrattuna
ARIA-rooleja ja -attribuutteja W3C:n WAI-ARIA 1.2 -spesifikaatiossa on yli sata, vaikka kourallinen niistä ratkaisee useimmat XHTML- ja CSS-widgetien saavutettavuusongelmat. Rooli määrittelee, mikä elementti on, ja attribuutti sen tilan tai suhteiden, mutta ARIA ei muuta selaimen toimintaa: jokainen lisätty rooli edellyttää vuorovaikutuksen toteuttamista JavaScriptillä.
Accessible Rich Internet Applications (ARIA) on W3C-spesifikaatio, joka lisää semantiikan HTML-elementteihin, joissa niitä ei ole alkuperäisessä muodossa. Rooli kuvaa, mikä on elementti (“painike”, “sarkain”, “dialogi”), kun taas attribuutti kuvaa sen tilaa tai suhteita (“aria-expanded”, “aria-controls”, “aria-labelledby”). Ensimmäinen ARIA-sääntö, jonka W3C on julkaissut julkaisussa Using ARIA, on tylsä: jos on natiivi HTML-elementti, joka jo suorittaa tehtävän, käytä sitä äläkä lisää ARIAa.
Syynä on se, että ARIA ei muuta selaimen toimintaa. <div role="button"> ei saa kohdistusta sarkaimella, se ei vastaa Enter-näppäimeen tai välilyöntiin, eikä sitä lähetetä lomakkeella. Se muuttaa vain sen, mitä avustava tekniikka ilmoittaa.
Kaikki vuorovaikutus on toteutettava JavaScriptillä ja sitä on hallittava huolellisesti. XHTML/CSS-projekteissa, joissa HTML on staattinen ja JS minimaalinen, tämä tarkoittaa, että jokainen lisättävä aria-rooli ja -attribuutti on lupaus, joka koodisi on täytettävä.
ARIA:n toinen sääntö kehottaa olemaan muuttamatta alkuperäistä semantiikkaa, ellei se ole välttämätöntä. <h2 role="tab"> rikkoo otsikoiden rakenteen ja hämmentää näytönlukuohjelmia, jotka liikkuvat alueiden mukaan. Kolmas sääntö edellyttää, että kaikkia ARIA-säätimiä voidaan käyttää näppäimistöllä. Neljäs kehottaa olemaan käyttämättä aria-hidden="true" elementtejä, jotka saavat kohdistuksen. Viides ja unohdetuin muistuttaa meitä siitä, että mikä tahansa interaktiivinen elementti vaatii saavutettavan nimen: rooli ilman tunnistetta on mykkä painike.
Kuinka valita: kriteerit ennen luetteloa
Roolin tai ominaisuuden valinta ei ole makuasia. Nämä järjestyksessä sovelletut kriteerit välttävät useimmat ariarooleja ja -attribuutteja koskevat virheet:
Aiheeseen liittyvä: — Superposición de IA que promete cumplimiento WCAG en 48 horas.
- Onko olemassa natiivi HTML-elementti? Jos on, käytä sitä.
<button>,<details>,<dialog>,<input type="checkbox">kattavat enemmän tapauksia kuin ihmiset luulevat. - Tarvitseeko widget dynaamisia tiloja? Jos se vaihtuu välillä auki/suljettu, valittu/ei valittu tai laajennettu/tiivistetty, tarvitset tilaattribuutteja (“aria-expanded”, “aria-selected”, “aria-pressed”).
- Tarvitseeko se suhteita elementtien välillä? Relaatioattribuutit (“aria-controls”, “aria-labelledby”, “aria-describedby”, “aria-owns”) yhdistävät osia, joita saavutettavuuspuu ei voi päätellä DOM:sta.
- Tarvitseeko se live-ilmoituksia? Live-alueet (
aria-live,role="status",role="alert") ratkaisevat päivitykset siirtämättä kohdistusta. - Voinko ylläpitää sitä? Monimutkainen ARIA-kuvio ilman näppäimistön tai näytönlukuohjelman testejä on pahempaa kuin ilman mitään.
Ylläpitokustannukset ovat eniten huomiotta jätetty kriteeri. Hyvin tehty “role=“tablist” vaatii nuolinäppäimien hallinnan, pyörivän “tabindexin”, “aria-selected”- ja “aria-controls” synkronoinnin sekä ei-aktiivisten paneelien oikean piilotuksen. Jos tiimi ei pysty käsittelemään sitä, ankkureilla varustettu linkkijoukko on helpommin saatavilla ja halvempi.
Vertailu hyödyllisimmistä ARIA-rooleista
Seuraava taulukko tiivistää roolit, jotka toistuvat todellisissa auditoinneissa, niiden natiivivastineet (jos sellaisia on) ja yleisimmät sudenkuopat.
| Rooli | Käyttötarkoitus | Natiivivaihtoehto | Yleinen sudenkuoppa |
|---|---|---|---|
button | Toimintoa suorittava ohjain | <button> | Enter/Välilyönti-hallinnan tai tabindex="0" puuttuminen |
link | Navigointi toiseen URL-osoitteeseen | <a href> | Käyttö toimintoihin, jotka eivät navigoi |
dialog | Modaalinen tai ei-modaalinen ikkuna | <dialog> | Kohdistuksen (focus) loukkauksen tai palautuksen puute |
tablist / tab / tabpanel | Välilehtikäyttöliittymä | Ei suoraa | aria-selected-tilan synkronoinnin puute näkyvän paneelin kanssa |
menu / menuitem | Sovellusvalikko | <select> tai linkkilista | Käyttö verkkosivuston navigointivalikkoihin |
alert | Kiireellinen ja välitön viesti | role="status" ei-kiireellisille | Liiallinen käyttö, joka kuormittaa näytönlukuohjelmaa |
status | Informatiivinen päivitys | <output> | Lisääminen DOM:iin vasta päivityshetkellä |
progressbar | Tehtävän edistyminen | <progress> | aria-valuenow-arvon päivittämättä jättäminen |
tooltip | Ponnahduskuvaus | title (rajoitettu) | Yhdistämättä aria-describedby-attribuuttiin |
combobox | Kenttä ehdotuslistalla | <datalist> (rajoitettu) | Tulosten määrän ilmoittamatta jättäminen |
Valinta role="alert" ja role="status" välillä on hyvä esimerkki päätöksestä, jossa on vivahteita koskien aariarooleja ja -attribuutteja. “hälytys” keskeyttää nykyisen näytönlukijan lukemisen; “tila” odottaa, että käyttäjä lopettaa. Lomakkeen vahvistusvirheen tapauksessa “hälytys” on sopiva. Jos “3 tulosta löydetty”, kun käyttäjä kirjoittaa, “tila” on oikea ja “varoitus” johtaa tunkeutumiseen.
Katsomisen arvoinen: — Accesibilidad gestionada: automatización combinada con revisión humana.
Välttämättömät ARIA-attribuutit ja niiden yhdistely
Attribuutit liittyvät neljään perheeseen, ja jokainen ratkaisee erillisen ongelman.
Nimeäminen. “aria-label” antaa nimen, kun tekstiä ei ole näkyvissä. “aria-labelledby” viittaa toisen elementin “id”:een ja on parempi, kun teksti on jo näytöllä, koska se säilyttää yhden totuuden lähteen. “aria-describedby” lisää pidemmän kuvauksen, kuten kentän ohjetekstin. Erolla on väliä: nimi on se, jonka käyttäjä kuulee tarkentaessaan; kuvaus on lisäkonteksti, joka voidaan keskeyttää.
Tilat. “aria-expanded” (tosi/epätosi) haitariille ja avattaville valikoille. “aria-selected” välilehtiä ja vaihtoehtoja varten. “aria-checked” mukautetuille valintaruuduille ja arvo “mixed” kolmitilatiloille. “aria-pressed” vaihtopainikkeille. “aria-disabled”, kun elementti on edelleen tarkennettavissa, mutta ei toiminnassa, toisin kuin alkuperäinen attribuutti “disabled”, joka poistaa sen sarkainjärjestyksestä.
Suhteet. “aria-controls” osoittaa, mitä elementtiä painike ohjaa. “aria-owns” järjestää esteettömyyspuun uudelleen, kun DOM ei heijasta visuaalista suhdetta. “aria-activedescendant” antaa sinun keskittyä säilöön, kun se ilmoittaa aktiivisen elementin, joka on yleinen kuvio yhdistelmälaatikoissa.
Elävät alueet. aria-live="kohtelias" tai "itsekäs" määrittelevät kiireellisyyden. aria-atomic="true" saa aikaan koko lohkon ilmoittamisen pelkän muokatun osan sijaan. “aria-relevant” -suodattimet, joiden muutoksista ilmoitetaan.
Yksityiskohta, joka jää usein huomiotta: ARIA-attribuutit toimivat vain elementeissä, joilla on kelvollinen rooli. “aria-expanded” -elementissä "
Aiheeseen liittyvä: — La Certificación profesional que acredita tu experiencia en accesibilidad.
"true", "false"), eivät JavaScript-loogisia arvoja; aria-expanded="false" kirjoittaminen loogiseksi ominaisuudeksi tuottaa epäjohdonmukaisia tuloksia.
Virheet, jotka pilaavat widgetin saavutettavuuden
Kallein virhe on ARIA:n käyttö huonosti rakennetun HTML:n korjaamiseen. role="navigation"-roolin lisääminen <div>-elementtiin, kun <nav> on jo käytettävissä, tuplaa alueet ja hämmentää maamerkkien (landmarks) avulla navigoivia.
Toinen virhe on keskittyminen. Modaalinen widget, joka ei liikuta tarkennusta avattaessa, ei jää kiinni sen ollessa auki eikä palauta sitä liipaisuun sulkemisen jälkeen, jättää näppäimistön käyttäjän selaamaan näkymätöntä sisältöä. Alkuperäinen <dialog>-elementti ratkaisee osan tästä, mutta ei kaikkea: painopisteen palauttaminen on edelleen kehittäjän vastuulla.
Kolmas virhe on elementtien piilottaminen aria-hidden-attribuutilla, vaikka ne ovat edelleen tarkennettavissa. Suljettu valikko, jossa on aria-hidden="true", mutta ei display: none tai visibility: hidden, pitää linkit sarkainjärjestyksessä, jolloin käyttäjä kohdistuu elementteihin, joita hän ei näe. Oikea tapa on piilottaa elementti sekä visuaalisesti että saavutettavuuspuusta samanaikaisesti.
Neljäs virhe on puuttuva nimi. "
Añade accesibilidad en 5 minuuttia
Widget de accesibilidad con plan gratuito para empezar hoy mismo