ARIA (Accessible Rich Internet Applications)

27.9.2023 | Artikkeleita, Drupal, IT, Verkkokauppa, Verkkosivut, WordPress

ARIA (Accessible Rich Internet Applications)ARIA (Accessible Rich Internet Applications) on W3C:n kehittämä standardi

Joka tarjoaa menetelmiä verkkosisällön ja -sovellusten saavutettavuuden parantamiseksi erityisesti ruudunlukijoiden ja muiden apuvälineiden käyttäjille. ARIA ei muuta verkkosivun ulkoasua, vaan lisää semanttisia tietoja, joiden avulla apuvälineet voivat paremmin ymmärtää verkkosivun rakenteen ja sisällön. Tämä mahdollistaa saavutettavan kokemuksen myös silloin, kun verkkosovellus sisältää dynaamisia elementtejä, kuten pudotusvalikkoja ja interaktiivisia komponentteja.

Keskeiset termit suomeksi

Roolit (roles)

  • Roolit määrittelevät elementin tarkoituksen (esim. painike, valikko tai valinta).
    Esimerkkejä:

    • role="button": Määrittää elementin painikkeeksi.
    • role="alert": Määrittää elementin hälytykseksi.

Ominaisuudet (properties)

  • Ominaisuudet tarjoavat lisätietoa elementistä. Ne voivat esimerkiksi kertoa, onko valintaruutu valittu tai mikä tila lomakekentässä on.
    • aria-expanded="true/false": Kertoo, onko elementti laajennettu vai supistettu.
    • aria-disabled="true/false": Määrittää, onko elementti pois käytöstä.

Tilat (states)

  • Tiloilla ilmaistaan elementin nykyinen tila.
    • aria-checked="true/false/mixed": Käytetään esimerkiksi valintaruutujen tilan ilmoittamiseen.
    • aria-selected="true/false": Ilmaisee, onko tietty kohde valittu, esimerkiksi välilehdet tai luettelon kohteet.

Hyödyntämisen periaatteet

  1. Älä käytä ARIA-attribuutteja turhaan: Jos HTML5:n oletuselementti (esim. <button>, <nav>, <fieldset>) tarjoaa jo tarvittavan semanttisen tiedon, ei ARIA-attribuutteja yleensä tarvita.
  2. Käytä oikeita rooleja ja ominaisuuksia: Esimerkiksi dynaamisissa sovelluksissa on tärkeää ilmoittaa ruudunlukijalle, kun sisältö muuttuu.
  3. Huomioi navigointi: ARIA mahdollistaa mm. näppäimistökäyttäjille soveltuvan helpon liikkumisen verkkosivulla.

Esimerkki:

html
<button aria-expanded="false" aria-controls="menu1" onclick="toggleMenu()">Näytä valikko</button>
<ul id="menu1" role="menu" hidden>
<li role="menuitem">Valinta 1</li>
<li role="menuitem">Valinta 2</li>
<li role="menuitem">Valinta 3</li>
</ul>

Selitys:

  • aria-expanded: Kertoo käyttäjälle, onko valikko avattu vai ei.
  • role="menu" ja role="menuitem": Määrittävät valikkorakenteen ruudunlukijalle ymmärrettäväksi.

ARIA-standardin merkitys

  • Saavutettavuus: Parantaa verkkosivujen käytettävyyttä ja saavutettavuutta henkilöille, joilla on erilaisia fyysisiä tai kognitiivisia rajoitteita.
  • Lailliset velvoitteet: Suomessa saavutettavuusvaatimuksia säätelee EU:n saavutettavuusdirektiivi ja kansallinen saavutettavuuslaki (Laki digitaalisten palvelujen tarjoamisesta

Samankaltaisia artikkeleita: