A11ying with Sanna - Toki, jos voisin opas saavutettavuuteen

WCAG 2.2 sisältö

WCAG (Web Content Guidelines) -ohjeistosta julkaistiin 5.10.2023 uusi versio, WCAG 2.2. Ihan vielä WCAG 2.2 ei ole lain vaatimuksissa, mutta kannattaa aloittaa siihen valmistautuminen jo nyt.

Jos haluat lukea WCAG:n sisällöstä syvemmin, käy tutustumassa WCAG-sivustooni!

Muutokset WCAG 2.1:stä WCAG 2.2:een

WCAG 2.2 muuttaa yhden kriteerin edellisestä 2.1-versiosta, onnistumiskriteeri 4.1.1 Jäsentäminen poistuu kokonaan. Tämä kriteeri on todettu vanhentuneeksi ja siitä on annettu jo pidemmän aikaa palautetta. Kriteeri on ollut haastava myös siitä, että sitä on tulkittu hyvin eri tavoin. Näistä syistä en yhtään ihmettele, että kriteeri poistuu. Tämä ei kuitenkaan tarkoita sitä, että laadukkaan validin koodin tuottamisella ei olisi jatkossa enää merkitystä. Eli panosta jatkossakin, että käytät HTML-attribuutteja ja -elementtejä oikein. Laadukas koodi parantaa jatkossakin käyttäjien käyttökokemusta.

Uudet lisäykset WCAG 2.2:ssa

WCAG 2.2 toi mukanaan yhdeksän uutta onnistumiskriteeriä. WCAG 2.2:lla ei ole vielä virallista suomenkielistä käännöstä, joten sivulla olevat kriteerien kuvaukset ovat omia käännöksiäni. Päivitän sivun heti, kun viralliset käännökset ovat saatavilla.

Ohje 2.4 Navigoitava

Tämän ohjeen alle tuli kolme uutta kriteeriä, joista yksi on AA-tasoinen ja kaksi AAA-tasoinen.

2.4.11 Focus Not Obscured (minimum) - taso AA

Tällä kriteerillä pyritään varmistamaan, että kohdistettu elementti on aina riittävästi näkyvissä. Joskus elementit, kuten pop-up ikkunat peittävät kohdistetun elementin osittain tai kokonaan.

Kun käyttöliittymäkomponentti saa näppäimistön kohdennuksen, komponentti ei ole täysin piilossa tekijän luoman sisällön vuoksi.

2.4.12 Focus Not Obscured (Enhanced) - taso AAA

Tämä taso tiukentaa AA-tason kriteeriä.

Kun käyttöliittymäkomponentti saa näppäimistön kohdennuksen, tekijän luoma sisältö ei piilota mitään osaa kohdennetusta elementistä.

2.4.14 Focus Appearance - taso AAA

Kriteeri pyrkii siihen, että kohdistustyyli olisi riittävän näkyvä ja selkeä.

Kun näppäimistön kohdistusindikaattori on näkyvissä, kohdistusindikaattorin alue täyttää kaikki seuraavat vaatimukset:

  • on vähintään yhtä suuri kuin 2 CSS pikselin paksuisen, kohdistamattoman elementin tai lapsielementin kehän pinta-ala, ja
  • kontrastisuhde on vähintään 3:1 samojen pikselien välillä kohdistettuna tai kohdistamattomana.

Poikkeukset:

  • Kohdistusindikaattorin määrittää käyttäjäagentti eikä tekijä voi säätää sitä, tai
  • tekijä ei ole muuttanut kohdistusindikaattoria ja sen taustaväriä

Ohje 2.5 Syötetavat

Tämän ohjeen alle tulee kaksi uutta AA-tason kriteeriä.

2.5.7 Dragging movements - taso AA

Tällä onnistumiskriteerillä pyritään varmistamaan, että raahaustoiminnolle on aina vaihtoehtoinen tapa, joka vaatii vain yhden osoittimen.

Kaikki toiminnot, joissa käytetään raahausliikettä, voidaan toteuttaa yhdellä osoittimella ilman raahaamista, ellei raahaaminen ole välttämätöntä tai ellei toiminnallisuus ole käyttäjäagentin määrittelemä eikä tekijä ole muuttanut sitä.

2.5.8 Target size (minimum) - taso AA

Tästä kriteeristä on WCAG 2.1:ssä AAA-tason kriteeri. Tämä tuo siitä lievennetyn version tasolle AA. Tämän kriteerin kanssa pyritään varmistamaan, että kohdistettavat elementit ovat riittävän suuria, jotta niihin on mahdollista osua.

Osoitinsyötteiden kohteen koko on vähintään 24 x 24 CSS-pikseliä, paitsi jos:

  • Välistys: Alimitoitetut kohteet (alle 24 x 24 CSS-pikseliä) sijoitetaan niin, että jos niiden sisällä keskitetään 24 CSS-pikseliä oleva ympyrä, ympyrät eivät risteä toisen kohteen tai toisen alimitoitetun kohteen ympyrän kanssa
  • Vastine: Toiminto voidaan toteuttaa samalla sivulla olevan toisen ohjaimen avulla, jonka pinta
  • ala on vähintään 24 x 24 CSS-pikseliä
  • Inline: Kohde on lauseessa tai tekstilohkossa
  • Käyttäjäagenttiohjaus: Kohteen koon määrittää käyttäjäagentti, eikä kirjoittaja muuta sitä
  • Välttämätön: Kohteen tietty esitystapa on välttämätön tai oikeudellisesti välttämätön välitettävän tiedon kannalta.

AAA-kriteerissä vaatimuksena oleva 44x44 CSS-pikselin koko on nykyisellään jo yleinen suositus käyttöliittymäsuunnitteluun, joten suosittelenkin tähtäämään AAA-tasolle, mikäli järkevästi mahdollista. Jos kaikkia ei voi laittaa jostain syystä näin suurina, niin jos laittaa edes osan, niin sekin on jo parannus. 

Ohje 3.2 Ennakoitava

Tämän ohjeen alle tulee vain yksi A-tason kriteeri.

3.2.6 Consistent Help - taso A

Tämä kriteeri pyrkii auttamaan käyttäjiä löytämään sivustolla olevat aputoiminnot helpommin. Kriteeri ei vaadi aputoimintojen tarjoamista, mutta vaatii niiden olevan loogisessa paikassa jos ne tarjotaan.

Jos verkkosivu sisältää jotakin seuraavista apumekanismeista ja nämä mekanismit toistuvat useilla verkkosivuilla verkkosivujen joukossa, ne esiintyvät samassa suhteellisessa järjestyksessä suhteessa muuhun sivun sisältöön, ellei käyttäjä aiheuta muutosta:

  • yhteystiedot
  • yhteydenottolomake
  • Itseapuvaihtoehto, kuten usein kysytyt kysymykset
  • Täysin automatisoitu yhteydenottomekanismi, kuten chattibotti

Ohje 3.3 Syötteen avustaminen

Tämän ohjeen alle tulee kolme uutta kriteeriä yksi jokaiselle tasolle.

3.3.7 Redundant entry - taso A

Tällä kriteerillä pyritään vähentämään jo kertaalleen syötettyjen tietojen uudelleen syöttämistä.

Käyttäjän aiemmin syöttämät tai käyttäjälle annetut tiedot, jotka on syötettävä uudelleen samassa prosessissa, ovat joko:

  • automaattisesti täytetyt, tai
  • käyttäjän valittavissa.

Paitsi silloin, kun:

  • tietojen syöttäminen uudelleen on välttämätöntä,
  • tietoja tarvitaan sisällön turvallisuuden varmistamiseksi, tai
  • aiemmin syötetyt tiedot eivät ole enää voimassa.

3.3.8  Accessible Authentication (Minimum) - taso AA

Tällä kriteerillä pyritään varmistamaan, että autentikaatio sujuu kaikilta käyttäjiltä.

Kognitiivisten toimintojen testiä (kuten salasanan muistamista tai palapelin ratkaisemista) ei vaadita minkään todentamisprosessin vaiheen osalta, ellei kyseinen vaihe tarjoa vähintään yhtä seuraavista:

  • Vaihtoehto: Toinen todentamismenetelmä, joka ei perustu kognitiivisten toimintojen testiin.
  • Mekanismi: Käytettävissä on mekanismi, joka auttaa käyttäjää kognitiivisten toimintojen testin suorittamisessa.
  • Objektien tunnistaminen: Kognitiivisten toimintojen testissä on tarkoitus tunnistaa esineitä.
  • Henkilökohtainen sisältö: Kognitiivisen toiminnon testin tarkoituksena on tunnistaa käyttäjän verkkosivustolle toimittama muu kuin tekstisisältö.

3.3.9 Accessible Authentication - taso AAA

AAA-tason kriteeri poistaa sallituista vaihtoehdoista objektien tunnistamisen ja henkilökohtaisen sisällön. Eli vain vaihtoehto ja mekanismi ovat sallitut.