Toki, jos voisin opas saavutettavuuteen

WCAG-vinkkejä: Hallittava

Verkon saavutettavuusohjeiden toinen periaate on Hallittava. Käyttöliittymän osien ja navigoinnin on oltava toimivia. Varmista, että kaikki toiminnot ovat käytettävissä näppäimistöliittymän kautta. Anna käyttäjille riittävästi aikaa lukea ja käyttää sisältöä. Vältä sisältöä, joka voi aiheuttaa kouristuksia tai fyysisiä reaktioita. Suunnittele navigoitavat ja ennakoitavat ulkoasut.

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

Ohje 2.1 - Käytettävissä näppäimistöllä

Näppäimistökäytön kriteerit on tiivistettävissä seuraaviin aiheisiin:

  • Varmista, että näppäimistöllä pääsee kaikkiin sivuston elementteihin ja sisältöihin
  • Varmista, että elementeistä, joihin pääsee näppäimistöllä, pääsee myös pois näppäimistöllä (esimerkiksi modaalit)
  • Jos on käytössä yhden merkin pikanäppäin, ne pitäisi joko saada pois päältä tai määriteltyä uudelleen.

Ohje 2.2 - Tarpeeksi aikaa

Käyttäjät tarvitsevat riittävästi aikaa sisällön käyttämiseen ja lukemiseen. Mikäli toteutuksessasi on aikarajoituksia, tarkasta kriteerit tämän ohjeen alla.

Ohje 2.3 - Sairaskohtaukset

Älä käytä sisältöä, jonka tiedetään aiheuttavan sairaskohtauksia tai fyysisiä reaktioita.

2.3.1 Kolme välähdystä tai alle raja-arvon (taso A) ja 2.3.2 Kolme välähdystä (taso AAA)

Verkkosivut eivät sisällä mitään, joka milloinkaan välähtäisi useammin kuin kolme kertaa sekunnissa, tai välähdys on alle yleisen välähdyksen ja punaisen välähdyksen raja-arvojen.

AAA-tason kriteeri tuo sääntöön lisäksi määrityksen, että verkkosivut eivät sisällä mitään, mikä välähtäisi useammin kuin kolme kertaa sekunnissa.

Usein välähdykset eivät ole tarkoituksellisia, vaan saattavat aiheutua animaatioista ja hover-efekteistä, jotka eivät renderöidy oikein.

2.3.3 Animaatio vuorovaikutuksen yhteydessä (taso AAA)

Käyttäjän vuorovaikutuksesta käynnistyvät liikeanimaatiot voidaan ottaa pois päältä, paitsi tilanteissa, joissa animaatio on olennainen käytön tai välitettävän informaation kannalta.

Eräs tämän onnistumiskriteerin kohdalla riittäväksi tekniikaksi määritetty toimenpide on reduce-motion CSS-määrityksen käyttö. Suosittelen aina määrittämään reduce-motion -toiminnallisuudet. Ne on vaivattomasti toteutettavissa ja niiden vaikutus osalle kävijöistä on valtava.

Ohje 2.4 - Navigoitava

Varmista, että käyttäjät löytävät sisällöt, tietävät missä ovat ja pystyvät navigoimaan sisällössä.

2.4.3 Kohdistusjärjestys (taso A)

Jos verkkosivu voidaan navigoida järjestyksessä ja navigointijärjestys vaikuttaa merkitykseen tai toimintoon, kohdistettaessa olevat komponentit saavat kohdistuksen järjestyksessä, joka säilyttää merkityksen ja toimivuuden.

Kohdistusjärjestyksen ei välttämättä tarvitse olla identtinen ohjelmallisesti selvitetyn lukujärjestyksen kanssa (katso onnistumiskriteeri 1.3.2), kunhan käyttäjä ymmärtää ja voi käyttää verkkosivua. Sisällölle voi olla useampi looginen lukujärjestys, kohdistusjärjestys voi noudattaa mitä tahansa niistä. Jos kohdistusjärjestys poikkeaa huomattavasti ohjelmallisesti selvitetystä lukujärjestyksestä, käyttäjillä voi olla hankaluuksia käyttää ja ymmärtää verkkosivua. Tämä on hyvä pitää mielessä verkkosivuja suunnitellessa.

Ohje 2.5 Syötetavat

Helpota käyttäjiä käyttämään toimintoja muillakin syötteillä kuin näppäimistöllä.

2.5.3 Nimilappu nimessä (taso A)

Tapauksissa, joissa käyttöliittymäkomponentin nimilapussa on tekstiä tai tekstiä esittävä kuva, komponentin nimi sisältää sen tekstin, joka on visuaalisesti näkyvissä.

Hyvä käytäntö on sijoittaa nimilappu tekstin alkuun, mutta kriteeri täyttyy, mikäli visuaalisesti näkyvä teksti on sellaisenaan jossain kohdin nimeä.

Useimmissa tapauksissa komponentin nimi ja visuaalisesti näkyvä teksti, eli nimilappu, ovat samat. Komponentin nimi voi kuitenkin olla piilossa ja esitetty vain avustavalle teknologialle, mikäli esimerkiksi avustavaa teknologiaa käyttäville halutaan tarjota lisätietoa komponentin nimessä.

Mikäli avustavaa teknologiaa käyttävälle annetaan lisätietoa aria-labelilla, varmista, että se tehdään oikein. Tämän onnistumiskriteerin kohdalla on kaksi selvää tilannetta, joissa kriteeri ei täyty:

  • Komponentin saavutettava nimi sisältää visuaalisesti näkyvän tekstin, mutta visuaalisesti näkyvän tekstin sanat eivät ole samassa järjestyksessä kuin visuaalisesti näkyvässä tekstissä.
  • Komponentin saavutettava nimi sisältää visuaalisesti näkyvän tekstin, mutta yksi tai useampi sana on visuaalisesti näkyvän tekstin välissä.

Eli mikäli näkyvä teksti on "Tämä on hieno linkki", komponentin nimessä ei aria-labelissa voi olla "Tämä on linkki", tai hieman hassusti ilmaistuna ei myöskään voisi olla "Linkki tämä on". Komponentin nimen pitää tässä tapauksessa sisältää jossakin kohdassa "Tämä on hieno linkki" juuri tässä muodossa.

Tämän onnistumiskriteerin osalta on usein paljon virheitä. Tämän kohdalla on hyvä muistaa, että ARIA:a ei kannata käyttää, ellei sille ole oikeasti tarvetta. Mikäli tekstisisältö on riittävän selkeää, ARIA:n lisäämiselle ei ole tarvetta.

Komponentin saavutettava nimi ei välttämättä ole aina aivan yksinkertainen hahmottaa. Mikäli komponentilla on useampi nimimääritys, varmista aina mikä näistä on komponentin virallinen saavutettava nimi, jotta voit varmistaa, että nimi on oikein.

Lähdemateriaali

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