ARIA (Accessible Rich Internet Applications)

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

Meta-selostus

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

WordPressin typografiaopas

WordPressin typografiaopas

Tässä oppaassa käydään läpi, kuinka valita oikeat fontit, miten käyttää niitä WordPressissä tehokkaasti ja miten typografia voi tuk...

23.11.2025
WordPressin joustavuus

WordPressin joustavuus

WordPress on säilyttänyt asemansa maailman suosituimpana sisällönhallintajärjestelmänä jo yli 20 vuoden ajan. Yritykset eri toimialoilt...

20.11.2025
WordPressin kehityssuunta

WordPressin kehityssuunta

WordPress on ollut verkkokehityksen kulmakivi jo vuosikymmeniä, ja sen rooli on muuttunut dramaattisesti ajan myötä. Alun perin blogi...

20.11.2025
WordPressin ekosysteemi vuonna 2026

WordPressin ekosysteemi vuonna 2026

WordPress on laaja ja kehittyvä ekosysteemi, joka kattaa verkkosivujen, verkkokauppojen, sovellusten, integraatioiden ja tekoälypohjai...

20.11.2025
Verkkokauppa WordPressillä

Verkkokauppa WordPressillä

Tässä oppaassa käymme läpi vaiheet, työkalut ja parhaat käytännöt, jotta voit luoda toimivan ja optimoidun verkkokaupan.

20.11.2025