A11ying with Sanna - Toki, jos voisin opas saavutettavuuteen

WCAG-vinkkejä: Toimintavarma

Verkon saavutettavuusohjeiden neljäs periaate on Toimintavarma. Käyttäjäagenttien, kuten apuvälineiden, on kyettävä tulkitsemaan sisältöä luotettavasti. Käytä validia ja semanttista HTML:ää. Varmista, että toteutus on yhteensopiva eri selainten ja laitteiden kanssa.

En erittele tällä sivustolla kaikkia kriteerejä. Jos haluat lukea WCAG:n sisällöstä syvemmin, käy tutustumassa WCAG-sivustooni!

Ohje 4.1 - Yhteensopiva

Yhteensopivuuden kriteereillä tavoitellaan toimintavarmuutta myös tulevaisuuden tekniikoilla ja teknologioilla.

4.1.1 Jäsentäminen

Tämä kriteeri on nykyään vanhentunut. Kriteerin vanhentuminen ei kuitenkaan vähennä toiminnallisten ID-attribuuttien uniikkiuden tärkeyttä eikä myöskään oikein käytetyn ja validin HTML:n tärkeyttä.

4.1.2 Nimi, rooli, arvo (taso AA)

Kaikkien käyttöliittymäkomponenttien (mm. lomake-elementit, linkit ja skriptien luomat komponentit) nimi ja rooli voidaan selvittää ohjelmallisesti tilat, ominaisuudet ja arvot, jotka käyttäjä voi asettaa, voidaan asettaa myös ohjelmallisesti ja tieto näiden muutoksista on käyttäjäagenttien, mukaan lukien avustavien teknologioiden, saatavissa.

Tämän kriteerin kohdalla olet saattanut törmätä varoituksiin, joissa sanotaan, ettei elementillä (yleensä <select>) ole saavutettavaa nimeä tai arvoa. Nämä tarkoittavat seuraavaa:

  • Nimi: Mikä tämä kenttä on nimeltään, esimerkiksi mitä tietoa käyttäjän on tarkoitus syöttää.
    • Mikäli käyttää vain aria-label attribuuttia, kerrotaan tietoa ainoastaan avustavaa teknologiaa käyttäville. Mikäli käytetään näkyvää label-elementtiä, kerrotaan tietoa jokaiselle käyttäjälle.
  • Arvo: ARvo tarkoittaa tämänhetkistä arvoa kentässä, jotta käyttäjät ymmärtävät mitä ovat valinneet.
    • HTML-elementille <select>, tämä tarkoittaa selected-attribuutin lisäämistä <option> elementtiin. Mikäli käytetään "kaikki"-vaihtoehtoa, tämä voidaan merkitä valituksi, kun käyttäjä saapuu sivulle.

Suurin osa näihin liittyvistä virheistä, jotka näkyvät sekä kriteereissä 1.3.1 että 4.1.2, voidaan yleensä korjata käyttämällä oikein toteutettuja visuaalisia nimiä (<label>).

Lähdemateriaali

Verkkosisällön saavutettavuusohjeet - WCAG-ohjeistuksen virallinen suomenkielinen käännös