Digitaalisten palveluiden saavutettavuus.
Tavoitteenamme on tarjota digitaalisia palveluita, joita kaikki asiakkaamme voivat käyttää. Työskentelemme jatkuvasti alustamme saavutettavuuden parantamiseksi. Alta löydät tietoa kunkin tarjoamamme digitaalisen palvelun saavutettavuudesta.
CMS WCAG 2.1
Kunkin osion kuvaukset ja esimerkit ovat vain katkelmia, joiden tarkoituksena on selittää, miten vaatimus täytetään. Luettelo vaatimuksista ja kattavat ohjeet tason vaatimusten täyttämiseen löytyvät varsinaisista ohjeista:
Verkkosisällön saavutettavuusohjeet (WCAG) 2.1
Suomessa asetettujen vaatimusten täyttämiseksi meidän on täytettävä sekä A- että AA-tason kriteerit.
1. Havaittava (CMS)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Kaikelle ei-tekstuaaliselle sisällölle on oltava saatavilla tekstivastine
Osittain
Taso A
”Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.”
Sisällön tarkoituksen on aina oltava ymmärrettävissä tekstikuvauksen perusteella.
Esimerkki: Virhe on kuvattava sanallisesti sen sijaan, että syöte merkittäisiin vain punaisella värillä.
Ei
Taso A
Sisällön järjestys on esitettävä mielekkäällä tavalla tai tavalla, joka ei voi aiheuttaa epäselvyyttä.
Esimerkki: Esitetäänkö sisältö järkevässä järjestyksessä, kun navigointiin käytetään tab-näppäintä?
Kyllä
Taso A
Kokoa ja väriä ei voi käyttää esimerkiksi tekstin prioriteetin määrittämiseen. Otsikon merkitsemiseen ei pidä käyttää pelkästään tunnistetta <span>, vaan sen kanssa tulee käyttää otsikkoelementtiä kuten esimerkiksi <h2>.
Elementtien kanssa on noudatettava puurakennetta, jossa esimerkiksi <h3>:n tulisi olla elementin <h2> alielementti jne.
Toinen esimerkki voisi olla teksti, jossa kuvataan vuorovaikutteista painiketta esimerkiksi näin: ”napsauta alla olevaa painiketta jatkaaksesi”, jolloin painikkeen itsensä on oltava seuraava semanttinen kohde, johon käyttäjä luonnollisesti siirtyy, jotta painike ei katoa navigoinnin aikana.
Osittain
Taso AA
Suunnittelussa on tuettava sisällön sekä pysty- että vaakasuuntaista katselua.
Kyllä
Taso AA
Syötteen, jossa käyttäjän tulee antaa sähköpostiosoite, tyypiksi tulisi olla merkitty type="email"
Syötteellä tulee olla aina nimilappu, jotta sen asiayhteys on selkeä.
Jos syötteen tyypiksi on merkitty type="number", sen antamiseen käytetään mobiililaitteen numerosyöttöä koko näppäimistön sijasta.
Osittain
Taso A
Väriä ei saa käyttää sisällön tarkoituksen osoittamiseen.
Esimerkki: Kaaviota tulisi olla mahdollista tulkita ilman, että sitä tarvitsee nähdä, joten mahdollinen piilotettu taulukkovariantti tulisi tehdä siinä tapauksessa, että kaavion jaksotukset on kuvattu pelkkänä tekstinä.
Kyllä
Taso A
Jos jokin ääni verkkosivulla soi kauemmin kuin kolme sekuntia, se on voitava keskeyttää.
Kyllä
Tekstin ja sen taustan välinen kontrasti.
1.4.3 - Taso AA
kontrastisuhde vähintään 4,5: 1
1.4.6 - Taso AAA
kontrastisuhde vähintään 7:1
4,5:1Osittain
Taso AA
”Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia, tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä.”
Kyllä
Taso AA
Vältä aina tekstiä esittäviä kuvia, tekstin on oltava luettavissa ruudunlukijalla
Osittain
Taso AA
Varmista aina, että sisältöä voi vierittää vain yhteen suuntaan, vaikka se olisi zoomattu 400 % kokoiseksi.
PAITSI silloin, kun navigointi kahdessa ulottuvuudessa on tarpeen, kuten esimerkiksi kartalla.
Osittain
Taso AA
Esimerkki: Kun komponentti näytetään tietyssä tilassa, siinä ei saa olla mitään epäselvyyttä, joten valitun valintanapin tulee näyttää selvästi valitulta.
Kyllä
Taso AA
Typografia-komponentin on täytettävä nämä kaksi vaatimusta:
• Rivin korkeus (riviväli) on vähintään 1,5 kertaa kirjasinkoko.
• Kappaleen jälkeisen tyhjän tilan koko on vähintään 2 kertaa kirjasinkoko.
Osittain
Taso AA
Työkaluvihjeemme tarvitsee seuraavat ominaisuudet (joita sillä ei tällä hetkellä ole):
• sen voi sulkea painamalla Esc-näppäintä
• käyttäjä voi viedä hiiren työkaluvihjeen päälle ilman, että sisältö katoaa
Osoitettavissa oleva sisältö ei saa menettää kohdistettua tilaa, ennen kuin käyttäjä siirtyy aktiivisesti pois sisällöstä.
Kyllä
2. Hallittava (CMS)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koko sivun on oltava käytettävissä silloin, kun navigoidaan vain näppäimistön avulla.
Taso AAA
Sama kuin edellä, mutta poikkeuksetta.
Osittain
Taso A
Jos komponentille voi SIIRTYÄ tab-näppäimen avulla, sieltä on aina voitava myös POISTUA tab-näppäimen avulla.
Kyllä
Taso A
Jos komponentti sallii erityisiä vuorovaikutuksia esimerkiksi napsauttamalla tiettyä näppäintä, se on voitava ottaa pois käytöstä, määritellä uudelleen tai ottaa käyttöön vain kyseisessä komponentissa.
Esim.: Sen ei pitäisi olla ristiriidassa ruudunlukijalle määriteltyjen näppäinten kanssa.
Kyllä
Taso AA
joittain hahmonnettavan sisällön ajoituksen on oltava hallittavissa.
Esimerkkejä:
• Jos kohdeluettelo on animoitu tietyssä järjestyksessä, kuten esimerkiksi kohteet osoitteessa
https://www.nordnet.fi/onboarding
, animaatio on voitava pysäyttää ja/tai ruudunlukijan käytettävissä on oltava variantti, jossa kaikki kohteet on hahmonnettu samaan aikaan.
• Aikakatkaisu, jossa käyttäjä kirjataan ulos, kun hän on ollut tietyn ajan inaktiivinen.Kyllä
Taso A
Kaikki liikkuva, vilkkuva, vierivä tai automaattisesti päivittyvä sisältö on hallittavissa (sen voi keskeyttää, pysäyttää tai piilottaa).
Kyllä
Taso A
Mikään ei saa välähtää useammin kuin kolme kertaa sekunnissa, paitsi silloin, kun välähdys on
yleisen välähdyksen ja punaisen välähdyksen raja-arvojen alapuolella
.
• Meillä vihreiden ostotekstien ja punaisten myyntitekstien vilkkuminen saattaa kuulua tähän luokkaan.
Taso AAA
Ei poikkeuksia yllä olevasta säännöstä.Kyllä
Taso A
Useilla sivuilla toistuvat sisällön lohkot tulee voida ohittaa.
Esimerkkejä:
• Tab-näppäimellä navigoitava kohde ”Siirry pääsisältöön” selaimessa heti URL -osoitteen syöttämisen jälkeen täyttää OSAN tästä.
• Hakujamme tai taulukoidemme suodattimia ei pitäisi olla tarpeen selata läpi tab-näppäimellä ennen siirtymistä tuloksiin tai taulukon sisältöön.
Kyllä
Taso A
Sivun selaamisen tab-näppäimellä pitäisi tapahtua järkevässä järjestyksessä.
Kyllä
Taso A
Kaikkien linkkien kohdalla pitäisi olla selvää, mitä tapahtuu, kun niitä napsauttaa.
Taso AAA
Linkin tarkoitus tulee selvitä sen PELKÄN tekstin perusteella, linkin kontekstia ei lasketa mukaan.
Kyllä
Taso AA
Käytettävissä on oltava enemmän kuin yksi tapa päästä mille tahansa sivulle, joka ei kuulu työnkulkuun, kuten esimerkiksi haun kautta.
Kyllä
Taso AA
Kun navigointiin käytetään näppäimistöä, näppäimistön kohdistuksen ilmaisin on oltava aina näkyvissä.
Kyllä
Taso AAA
Sisällön organisoimiseen käytetään osioiden otsikoita. Sopii navigointiin ruudunlukijalla.
Kyllä
Taso A
Kaikki toiminnot, jotka vaativat tarkkaa vuorovaikutusta useilla sormilla (kuten zoomaus nipistämällä) tai reittiin perustuvia toimintoja (kuten käyrän piirtäminen sormella), tarvitsevat niitä vastaavan painikkeen.
Kyllä
Taso A
Painikkeen napsautukseen tulee käyttää ylös-tapahtumaa alas-tapahtuman sijasta, jotta käyttäjä voi ”peruuttaa” vuorovaikutuksensa
Kyllä
Taso A
Jos nimilappu kuuluu visuaalisesti johonkin, kuten esimerkiksi syötteeseen, sillä tulisi aina olla myös kyseisen syötteen ohjelmallinen nimilappu.
Jos syötteestä puuttuu nimilappu, se ei ole tämän ohjeen mukainen.
Ei
Taso AAA
Kaikkien interaktiivisten elementtien koon on oltava vähintään 44 x 44 pikseliä.
Ei
3. Ymmärrettävä (CMS)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Sivun kieli voidaan määrittää ohjelmallisesti html-elementin lang-attribuutin perusteella.
Kyllä
Taso AA
Älä sekoita kieliä PAITSI näissä tapauksissa:”erisnimet, tekniset termit, määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi”.
Taso AAA
On olemassa elementti <abbr />, jota voidaan käyttää silloin, kun käytetään lyhenteitä. Esim. AOT viittaa sanaan "arvo-osuustili" ja OST viittaa sanaan "osakesäästötili".
Ei sovelleta
Taso A
Kohdistuksen muuttaminen ei saa aiheuttaa muutoksia kontekstissa, kuten esimerkiksi valikon navigoiminen ei saisi johtaa sivun vaihtumiseen itsestään.
Kyllä
Taso A
Vuorovaikutus syötteen kanssa ei saa aiheuttaa kontekstin muutosta, ellei käyttäjälle ole ilmoitettu tällaisesta toiminnosta etukäteen.
Esimerkki: Jos perehdytyksessä käyttäjä vastaa ”kyllä” kysymykseen siitä, onko hän poliittisesti vaikutusvaltainen henkilö, se käynnistää moduulin, jossa käyttäjän on vahvistettava vastauksensa; tämä ei noudata ohjetta.
Kyllä
Taso AA
Navigoinnin, haun ja navigoinnin ohituksen hallinnan tulee olla samassa paikassa joka sivulla.
Kyllä
Taso AA
Elementtejä käytetään johdonmukaisesti, esimerkiksi niin, että valintamerkki tarkoittaa aina samaa asiaa kaikilla sivuilla tai kuvaketta käytetään kaikkialla samaan tarkoitukseen.
Kyllä
Taso AA
Älä käytä merkitsemiseen vain punaista väriä, käytä myös tekstiä.
Ei
Taso AA
Jos mahdollista, anna virheilmoituksissa korjausehdotuksia, PAITSI JOS se aiheuttaisi tietoturvaongelman.
Ei
Taso AA
YKSI alla olevan luettelon kohdista täyttyy
Taso AAA
KAIKKI alla olevan luettelon kohdista täyttyvät
Oikeudellisille lähetyksille tehdään virheentarkistus ennen pyynnön lähettämistä, mukaan lukien pyyntöjen vahvistus, ja niiden tulee aina olla peruutettavissa.
Ei sovelleta
4. Toimintavarma (CMS)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koodimme ei käytännössä käänny, jos tämä ehto ei täyty! Elementeillä tulee aina olla kokonaiset aloitus-/lopetustunnisteet jne. (Voidaan testata Lighthousen avulla)
Osittain
Taso A
”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 myös asettaa ohjelmallisesti
; ja tieto näiden muutoksista on käyttäjäagenttien
, mukaan lukien avustavien teknologioiden
saatavissa.”
• kaikkien syöttöelementtien nimi
• rooli siellä, missä sitä käytetään, kuten painikkeessaTaso A
Esimerkkejä:
• Jos pyyntö lähtee ja epäonnistuu napsautettaessa lähetä-painiketta, voidaan näyttää FeedbackBanner-palkki virheilmoituksena. Tämä olisi ilmoitettava ruudunlukijalle ja luettava käyttäjälle mahdollisimman pian.
• Haettaessa jotain, hahmonnetaan elementti, joka ilmoittaa hakutulosten määrän itse tulosten lisäksi, esimerkiksi:”Löytyi viisi tulosta”.
Kyllä
Tilin yleiskatsaus -sivu
Suomessa asetettujen vaatimusten täyttämiseksi meidän on täytettävä sekä A- että AA-tason kriteerit.
1. Havaittava (Tilin yleiskatsaus -sivu)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Kaikelle ei-tekstuaaliselle sisällölle on oltava saatavilla tekstivastine
Ei
1.2 Aikasidonnainen media
Ei sovelleta, koska se koskee vain audio- ja videosisältöä
Ei sovelleta
Taso A
”Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.”Sisällön tarkoituksen on aina oltava ymmärrettävissä tekstikuvauksen perusteella.
Esimerkki: Virhe on kuvattava sanallisesti sen sijaan, että syöte merkittäisiin vain punaisella värillä.
Ei
Taso A
Sisällön järjestys on esitettävä mielekkäällä tavalla tai tavalla, joka ei voi aiheuttaa epäselvyyttä.
Esimerkki: Esitetäänkö sisältö järkevässä järjestyksessä, kun navigointiin käytetään tab-näppäintä?
Ei
Taso A
Kokoa ja väriä ei voi käyttää esimerkiksi tekstin prioriteetin määrittämiseen. Otsikon merkitsemiseen ei pidä käyttää pelkästään tunnistetta <span>, vaan sen kanssa tulee käyttää otsikkoelementtiä kuten esimerkiksi <h2>.
Elementtien kanssa on noudatettava puurakennetta, jossa esimerkiksi <h3>:n tulisi olla elementin <h2> alielementti jne.
Toinen esimerkki voisi olla teksti, jossa kuvataan vuorovaikutteista painiketta esimerkiksi näin: ”napsauta alla olevaa painiketta jatkaaksesi”, jolloin painikkeen itsensä on oltava seuraava semanttinen kohde, johon käyttäjä luonnollisesti siirtyy, jotta painike ei katoa navigoinnin aikana.
Kyllä
Taso AA
Suunnittelussa on tuettava sisällön sekä pysty- että vaakasuuntaista katselua.
Kyllä
Taso AA
Syötteen, jossa käyttäjän tulee antaa sähköpostiosoite, tyypiksi tulisi olla merkitty **type="email"**Syötteellä tulee olla aina nimilappu, jotta sen asiayhteys on selkeä.
Jos syötteen tyypiksi on merkitty type="number", sen antamiseen käytetään mobiililaitteen numerosyöttöä koko näppäimistön sijasta.
Ei
Taso A
Väriä ei saa käyttää sisällön tarkoituksen osoittamiseen.
Esimerkki: Kaaviota tulisi olla mahdollista tulkita ilman, että sitä tarvitsee nähdä, joten mahdollinen piilotettu taulukkovariantti tulisi tehdä siinä tapauksessa, että kaavion jaksotukset on kuvattu pelkkänä tekstinä.
Kyllä
Taso A
Jos jokin ääni verkkosivulla soi kauemmin kuin kolme sekuntia, se on voitava keskeyttää.
Kyllä
Tekstin ja sen taustan välinen kontrasti.
1.4.3 - Taso AA
kontrastisuhde vähintään 4,5: 1
1.4.6 - Taso AAA
kontrastisuhde vähintään 7:1
4,5:1
Ei
Taso AA
”Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia, tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä.”
Kyllä
Taso AA
Vältä aina tekstiä esittäviä kuvia, tekstin on oltava luettavissa ruudunlukijalla
Kyllä
Taso AA
Varmista aina, että sisältöä voi vierittää vain yhteen suuntaan, vaikka se olisi zoomattu 400 % kokoiseksi.PAITSI silloin, kun navigointi kahdessa ulottuvuudessa on tarpeen, kuten esimerkiksi kartalla.
Ei
Taso AA
Esimerkki: Kun komponentti näytetään tietyssä tilassa, siinä ei saa olla mitään epäselvyyttä, joten valitun valintanapin tulee näyttää selvästi valitulta.
Ei
Taso AA
Työkaluvihjeemme tarvitsee seuraavat ominaisuudet (joita sillä ei tällä hetkellä ole):
• sen voi sulkea painamalla Esc-näppäintä
• käyttäjä voi viedä hiiren työkaluvihjeen päälle ilman, että sisältö katoaa
Osoitettavissa oleva sisältö ei saa menettää kohdistettua tilaa, ennen kuin käyttäjä siirtyy aktiivisesti pois sisällöstä.
Ei
2. Hallittava (Tilin yleiskatsaus -sivu)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koko sivun on oltava käytettävissä silloin, kun navigoidaan vain näppäimistön avulla.
Taso AAASama kuin edellä, mutta poikkeuksetta.
Ei
Taso A
Jos komponentille voi SIIRTYÄ tab-näppäimen avulla, sieltä on aina voitava myös POISTUA tab-näppäimen avulla.
Kyllä
Taso A
Jos komponentti sallii erityisiä vuorovaikutuksia esimerkiksi napsauttamalla tiettyä näppäintä, se on voitava ottaa pois käytöstä, määritellä uudelleen tai ottaa käyttöön vain kyseisessä komponentissa.
Esim.: Sen ei pitäisi olla ristiriidassa ruudunlukijalle määriteltyjen näppäinten kanssa.
Kyllä
Taso A
Ajoittain hahmonnettavan sisällön ajoituksen on oltava hallittavissa.
Esimerkkejä:
• Jos kohdeluettelo on animoitu tietyssä järjestyksessä, kuten esimerkiksi kohteet osoitteessa
https://www.nordnet.fi/onboarding
, animaatio on voitava pysäyttää ja/tai ruudunlukijan käytettävissä on oltava variantti, jossa kaikki kohteet on hahmonnettu samaan aikaan.
• Aikakatkaisu, jossa käyttäjä kirjataan ulos, kun hän on ollut tietyn ajan inaktiivinen.Ei
Taso A
Kaikki liikkuva, vilkkuva, vierivä tai automaattisesti päivittyvä sisältö on hallittavissa (sen voi keskeyttää, pysäyttää tai piilottaa).
Ei
Taso A
Mikään ei saa välähtää useammin kuin kolme kertaa sekunnissa, paitsi silloin, kun välähdys on
yleisen välähdyksen ja punaisen välähdyksen raja-arvojen alapuolella
.
• Meillä vihreiden ostotekstien ja punaisten myyntitekstien vilkkuminen saattaa kuulua tähän luokkaan.
Taso AAA
Ei poikkeuksia yllä olevasta säännöstä.Kyllä
Taso A
Useilla sivuilla toistuvat sisällön lohkot tulee voida ohittaa.
Esimerkkejä:
• Tab-näppäimellä navigoitava kohde ”Siirry pääsisältöön” selaimessa heti URL -osoitteen syöttämisen jälkeen täyttää OSAN tästä.
• Hakujamme tai taulukoidemme suodattimia ei pitäisi olla tarpeen selata läpi tab-näppäimellä ennen siirtymistä tuloksiin tai taulukon sisältöön.
Kyllä
Taso ASivun selaamisen tab-näppäimellä pitäisi tapahtua järkevässä järjestyksessä.
Ei
Taso A
Kaikkien linkkien kohdalla pitäisi olla selvää, mitä tapahtuu, kun niitä napsauttaa.
Taso AAA
Linkin tarkoitus tulee selvitä sen PELKÄN tekstin perusteella, linkin kontekstia ei lasketa mukaan.
Kyllä
Taso AA
Käytettävissä on oltava enemmän kuin yksi tapa päästä mille tahansa sivulle, joka ei kuulu työnkulkuun, kuten esimerkiksi haun kautta.
Kyllä
Taso AA
Kun navigointiin käytetään näppäimistöä, näppäimistön kohdistuksen ilmaisin on oltava aina näkyvissä.
Ei
Taso AAA
Sisällön organisoimiseen käytetään osioiden otsikoita. Sopii navigointiin ruudunlukijalla.
Taso A
Kaikki toiminnot, jotka vaativat tarkkaa vuorovaikutusta useilla sormilla (kuten zoomaus nipistämällä) tai reittiin perustuvia toimintoja (kuten käyrän piirtäminen sormella), tarvitsevat niitä vastaavan painikkeen.
Kyllä
Taso A
Painikkeen napsautukseen tulee käyttää ylös-tapahtumaa alas-tapahtuman sijasta, jotta käyttäjä voi ”peruuttaa” vuorovaikutuksensa
Kyllä
Taso A
Jos nimilappu kuuluu visuaalisesti johonkin, kuten esimerkiksi syötteeseen, sillä tulisi aina olla myös kyseisen syötteen ohjelmallinen nimilappu.
Jos syötteestäpuuttuunimilappu, se ei ole tämän ohjeen mukainen.
Ei
Taso AAA
Kaikkien interaktiivisten elementtien koon on oltava vähintään 44 x 44 pikseliä.
3. Ymmärrettävä (Tilin yleiskatsaus -sivu)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Sivun kieli voidaan määrittää ohjelmallisesti html-elementin lang-attribuutin perusteella.
Kyllä
Taso AA
Älä sekoita kieliä PAITSI näissä tapauksissa: ”erisnimet, tekniset termit, määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi”.
Osa URL-linkeistä sisältävät tekstiä englanniksi, suomenkielen sijaan.
Taso AAA
On olemassa elementti <abbr />, jota voidaan käyttää silloin, kun käytetään lyhenteitä. Esim. AOT viittaa sanaan "arvo-osuustili" ja OST viittaa sanaan "osakesäästötili".
Ei sovelleta
Taso A
Kohdistuksen muuttaminen ei saa aiheuttaa muutoksia kontekstissa, kuten esimerkiksi valikon navigoiminen ei saisi johtaa sivun vaihtumiseen itsestään.
Kyllä
Taso A
Vuorovaikutus syötteen kanssa ei saa aiheuttaa kontekstin muutosta, ellei käyttäjälle ole ilmoitettu tällaisesta toiminnosta etukäteen.
Esimerkki: Jos perehdytyksessä käyttäjä vastaa ”kyllä” kysymykseen siitä, onko hän poliittisesti vaikutusvaltainen henkilö, se käynnistää moduulin, jossa käyttäjän on vahvistettava vastauksensa; tämä ei noudata ohjetta.
Kyllä
Taso AA
Navigoinnin, haun ja navigoinnin ohituksen hallinnan tulee olla samassa paikassa joka sivulla.
Kyllä
Taso AA
Elementtejä käytetään johdonmukaisesti, esimerkiksi niin, että valintamerkki tarkoittaa aina samaa asiaa kaikilla sivuilla tai kuvaketta käytetään kaikkialla samaan tarkoitukseen.
Kyllä
Taso AA
Älä käytä merkitsemiseen vain punaista väriä, käytä myös tekstiä.
Kyllä
Taso AA
Jos mahdollista, anna virheilmoituksissa korjausehdotuksia, PAITSI JOS se aiheuttaisi tietoturvaongelman.
Ei
Taso AA
YKSI alla olevan luettelon kohdista täyttyyTaso AAAKAIKKI alla olevan luettelon kohdista täyttyvätOikeudellisille lähetyksille tehdään virheentarkistus ennen pyynnön lähettämistä, mukaan lukien pyyntöjen vahvistus, ja niiden tulee aina olla peruutettavissa.
Ei sovelleta
4. Toimintavarma (Tilin yleiskatsaus -sivu)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koodimme ei käytännössä käänny, jos tämä ehto ei täyty! Elementeillä tulee aina olla kokonaiset aloitus-/lopetustunnisteet jne. (Voidaan testata Lighthousen avulla)
Osittain
Taso A
”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 myös asettaa ohjelmallisesti
; ja tieto näiden muutoksista on käyttäjäagenttien
, mukaan lukien avustavien teknologioiden
saatavissa.”
• kaikkien syöttöelementtien nimi
• rooli siellä, missä sitä käytetään, kuten painikkeessaTaso A
Esimerkkejä:
• Jos pyyntö lähtee ja epäonnistuu napsautettaessa lähetä-painiketta, voidaan näyttää FeedbackBanner-palkki virheilmoituksena.
• Tämä olisi ilmoitettava ruudunlukijalle ja luettava käyttäjälle mahdollisimman pian.
• Haettaessa jotain, hahmonnetaan elementti, joka ilmoittaa hakutulosten määrän itse tulosten lisäksi, esimerkiksi: ”Löytyi viisi tulosta”.
Kyllä
Blogi WCAG 2.1
Suomessa asetettujen vaatimusten täyttämiseksi meidän on täytettävä sekä A- että AA-tason kriteerit.
1. Havaittava (blogi)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Kaikelle ei-tekstuaaliselle sisällölle on oltava saatavilla tekstivastine
Osittain
Taso A
”Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.”
Sisällön tarkoituksen on aina oltava ymmärrettävissä tekstikuvauksen perusteella.
Esimerkki: Virhe on kuvattava sanallisesti sen sijaan, että syöte merkittäisiin vain punaisella värillä.
Kyllä
Taso A
Sisällön järjestys on esitettävä mielekkäällä tavalla tai tavalla, joka ei voi aiheuttaa epäselvyyttä.
Esimerkki: Esitetäänkö sisältö järkevässä järjestyksessä, kun navigointiin käytetään tab-näppäintä?
Kyllä
Taso A
Kokoa ja väriä ei voi käyttää esimerkiksi tekstin prioriteetin määrittämiseen. Otsikon merkitsemiseen ei pidä käyttää pelkästään tunnistetta <span>, vaan sen kanssa tulee käyttää otsikkoelementtiä kuten esimerkiksi <h2>.
Elementtien kanssa on noudatettava puurakennetta, jossa esimerkiksi <h3>:n tulisi olla elementin <h2> alielementti jne.
Toinen esimerkki voisi olla teksti, jossa kuvataan vuorovaikutteista painiketta esimerkiksi näin: ”napsauta alla olevaa painiketta jatkaaksesi”, jolloin painikkeen itsensä on oltava seuraava semanttinen kohde, johon käyttäjä luonnollisesti siirtyy, jotta painike ei katoa navigoinnin aikana.
Osittain
Taso AA
Suunnittelussa on tuettava sisällön sekä pysty- että vaakasuuntaista katselua.
Kyllä
Taso AA
Syötteen, jossa käyttäjän tulee antaa sähköpostiosoite, tyypiksi tulisi olla merkitty type="email"
Syötteellä tulee olla aina nimilappu, jotta sen asiayhteys on selkeä.
Jos syötteen tyypiksi on merkitty type="number", sen antamiseen käytetään mobiililaitteen numerosyöttöä koko näppäimistön sijasta.
Kyllä
Taso A
Väriä ei saa käyttää sisällön tarkoituksen osoittamiseen.
Esimerkki: Kaaviota tulisi olla mahdollista tulkita ilman, että sitä tarvitsee nähdä, joten mahdollinen piilotettu taulukkovariantti tulisi tehdä siinä tapauksessa, että kaavion jaksotukset on kuvattu pelkkänä tekstinä.
Osittain
Taso A
Jos jokin ääni verkkosivulla soi kauemmin kuin kolme sekuntia, se on voitava keskeyttää.
Kyllä
Tekstin ja sen taustan välinen kontrasti.
1.4.3 - Taso AA
kontrastisuhde vähintään 4,5: 1
1.4.6 - Taso AAA
kontrastisuhde vähintään 7:1
4,5:1
Osittain
Taso AA
”Lukuun ottamatta tekstitystä ja tekstiä esittäviä kuvia, tekstin kokoa voidaan muuttaa ilman avustavaa teknologiaa aina 200 prosenttiin asti ilman sisällön tai toiminnallisuuden menettämistä.”
Kyllä
Taso AA
Vältä aina tekstiä esittäviä kuvia, tekstin on oltava luettavissa ruudunlukijalla
Ei
Taso AA
Varmista aina, että sisältöä voi vierittää vain yhteen suuntaan, vaikka se olisi zoomattu 400 % kokoiseksi.
PAITSI silloin, kun navigointi kahdessa ulottuvuudessa on tarpeen, kuten esimerkiksi kartalla.
Kyllä
Taso AA
Esimerkki: Kun komponentti näytetään tietyssä tilassa, siinä ei saa olla mitään epäselvyyttä, joten valitun valintanapin tulee näyttää selvästi valitulta.
Kyllä
Taso AA
Typografia-komponentin on täytettävä nämä kaksi vaatimusta:
• Rivin korkeus (riviväli) on vähintään 1,5 kertaa kirjasinkoko.
• Kappaleen jälkeisen tyhjän tilan koko on vähintään 2 kertaa kirjasinkoko.****
Osittain
Taso AA
Työkaluvihjeemme tarvitsee seuraavat ominaisuudet (joita sillä ei tällä hetkellä ole):
• sen voi sulkea painamalla Esc-näppäintä
• käyttäjä voi viedä hiiren työkaluvihjeen päälle ilman, että sisältö katoaa
Osoitettavissa oleva sisältö ei saa menettää kohdistettua tilaa, ennen kuin käyttäjä siirtyy aktiivisesti pois sisällöstä.
Kyllä
2. Hallittava (blogi)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koko sivun on oltava käytettävissä silloin, kun navigoidaan vain näppäimistön avulla.
Taso AAA
Sama kuin edellä, mutta poikkeuksetta.
Osittain
Taso A
Jos komponentille voi SIIRTYÄ tab-näppäimen avulla, sieltä on aina voitava myös POISTUA tab-näppäimen avulla.
Kyllä
Taso A
Jos komponentti sallii erityisiä vuorovaikutuksia esimerkiksi napsauttamalla tiettyä näppäintä, se on voitava ottaa pois käytöstä, määritellä uudelleen tai ottaa käyttöön vain kyseisessä komponentissa.
Esim.: Sen ei pitäisi olla ristiriidassa ruudunlukijalle määriteltyjen näppäinten kanssa.
Kyllä
Taso A
Ajoittain hahmonnettavan sisällön ajoituksen on oltava hallittavissa.
Esimerkkejä:
• Jos kohdeluettelo on animoitu tietyssä järjestyksessä, kuten esimerkiksi kohteet osoitteessa
https://www.nordnet.fi/onboarding
, animaatio on voitava pysäyttää ja/tai ruudunlukijan käytettävissä on oltava variantti, jossa kaikki kohteet on hahmonnettu samaan aikaan.
• Aikakatkaisu, jossa käyttäjä kirjataan ulos, kun hän on ollut tietyn ajan inaktiivinen.Kyllä
Taso A
Kaikki liikkuva, vilkkuva, vierivä tai automaattisesti päivittyvä sisältö on hallittavissa (sen voi keskeyttää, pysäyttää tai piilottaa).
Kyllä
Taso A
Mikään ei saa välähtää useammin kuin kolme kertaa sekunnissa, paitsi silloin, kun välähdys on
yleisen välähdyksen ja punaisen välähdyksen raja-arvojen alapuolella
.
• Meillä vihreiden ostotekstien ja punaisten myyntitekstien vilkkuminen saattaa kuulua tähän luokkaan.
Taso AAA
Ei poikkeuksia yllä olevasta säännöstä.Kyllä
Taso A
Useilla sivuilla toistuvat sisällön lohkot tulee voida ohittaa.
Esimerkkejä:
• Tab-näppäimellä navigoitava kohde ”Siirry pääsisältöön” selaimessa heti URL -osoitteen syöttämisen jälkeen täyttää OSAN tästä.
• Hakujamme tai taulukoidemme suodattimia ei pitäisi olla tarpeen selata läpi tab-näppäimellä ennen siirtymistä tuloksiin tai taulukon sisältöön.
Kyllä
Taso A
Sivun selaamisen tab-näppäimellä pitäisi tapahtua järkevässä järjestyksessä.
Kyllä
Taso A
Kaikkien linkkien kohdalla pitäisi olla selvää, mitä tapahtuu, kun niitä napsauttaa.
Taso AAA
Linkin tarkoitus tulee selvitä sen PELKÄN tekstin perusteella, linkin kontekstia ei lasketa mukaan.
Kyllä
Taso AA
Käytettävissä on oltava enemmän kuin yksi tapa päästä mille tahansa sivulle, joka ei kuulu työnkulkuun, kuten esimerkiksi haun kautta.
Kyllä
Taso AA
Kun navigointiin käytetään näppäimistöä, näppäimistön kohdistuksen ilmaisin on oltava aina näkyvissä.
Kyllä
Taso AAA
Sisällön organisoimiseen käytetään osioiden otsikoita. Sopii navigointiin ruudunlukijalla.
Kyllä
Taso A
Kaikki toiminnot, jotka vaativat tarkkaa vuorovaikutusta useilla sormilla (kuten zoomaus nipistämällä) tai reittiin perustuvia toimintoja (kuten käyrän piirtäminen sormella), tarvitsevat niitä vastaavan painikkeen.
Kyllä
Taso A
Painikkeen napsautukseen tulee käyttää ylös-tapahtumaa alas-tapahtuman sijasta, jotta käyttäjä voi ”peruuttaa” vuorovaikutuksensa
Kyllä
Taso A
Jos nimilappu kuuluu visuaalisesti johonkin, kuten esimerkiksi syötteeseen, sillä tulisi aina olla myös kyseisen syötteen ohjelmallinen nimilappu.
Jos syötteestäpuuttuunimilappu, se ei ole tämän ohjeen mukainen.
Kyllä
Taso AAA
Kaikkien interaktiivisten elementtien koon on oltava vähintään 44 x 44 pikseliä.
Ei
3. Ymmärrettävä (blogi)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Sivun kieli voidaan määrittää ohjelmallisesti html-elementin lang-attribuutin perusteella.
Kyllä
Taso AA
Älä sekoita kieliä PAITSI näissä tapauksissa:”erisnimet, tekniset termit, määrittämättömän kielen sanat sekä sanat tai ilmaisut, jotka ovat muuttuneet läheisen tekstiympäristön kielen murteelliseksi osaksi”.
Osa URL-linkeistä sisältävät tekstiä englanniksi, suomenkielen sijaan.
Taso AAA
On olemassa elementti <abbr />, jota voidaan käyttää silloin, kun käytetään lyhenteitä. Esim. AOT viittaa sanaan "arvo-osuustili" ja OST viittaa sanaan "osakesäästötili".
Ei sovelleta
Taso A
Kohdistuksen muuttaminen ei saa aiheuttaa muutoksia kontekstissa, kuten esimerkiksi valikon navigoiminen ei saisi johtaa sivun vaihtumiseen itsestään.
Kyllä
Taso A
Vuorovaikutus syötteen kanssa ei saa aiheuttaa kontekstin muutosta, ellei käyttäjälle ole ilmoitettu tällaisesta toiminnosta etukäteen.
Esimerkki: Jos perehdytyksessä käyttäjä vastaa ”kyllä” kysymykseen siitä, onko hän poliittisesti vaikutusvaltainen henkilö, se käynnistää moduulin, jossa käyttäjän on vahvistettava vastauksensa; tämä ei noudata ohjetta.
Kyllä
Taso AA
Navigoinnin, haun ja navigoinnin ohituksen hallinnan tulee olla samassa paikassa joka sivulla.
Kyllä
Taso AA
Elementtejä käytetään johdonmukaisesti, esimerkiksi niin, että valintamerkki tarkoittaa aina samaa asiaa kaikilla sivuilla tai kuvaketta käytetään kaikkialla samaan tarkoitukseen.
Kyllä
Taso AA
Älä käytä merkitsemiseen vain punaista väriä, käytä myös tekstiä.
Kyllä
Taso AA
Jos mahdollista, anna virheilmoituksissa korjausehdotuksia, PAITSI JOS se aiheuttaisi tietoturvaongelman.
Ei
[3.3.4 Virheiden ennaltaehkäisy ](oikeudellinen, taloudellinen, data)(https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data)
Taso AA
YKSI alla olevan luettelon kohdista täyttyy
Taso AAA
KAIKKI alla olevan luettelon kohdista täyttyvätOikeudellisille lähetyksille tehdään virheentarkistus ennen pyynnön lähettämistä, mukaan lukien pyyntöjen vahvistus, ja niiden tulee aina olla peruutettavissa.
Ei sovelleta
4. Toimintavarma (blogi)
Luokka
Kuvaus ja esimerkkejä
Vaatimuksen mukainen
Taso A
Koodimme ei käytännössä käänny, jos tämä ehto ei täyty! Elementeillä tulee aina olla kokonaiset aloitus-/lopetustunnisteet jne. (Voidaan testata Lighthousen avulla)
Osittain
Taso A
”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 myös asettaa ohjelmallisesti
; ja tieto näiden muutoksista on käyttäjäagenttien
, mukaan lukien avustavien teknologioiden
saatavissa.”
• kaikkien syöttöelementtien nimi
• rooli siellä, missä sitä käytetään, kuten painikkeessaTaso A
Esimerkkejä:
• Jos pyyntö lähtee ja epäonnistuu napsautettaessa lähetä-painiketta, voidaan näyttää FeedbackBanner-palkki virheilmoituksena.
• Tämä olisi ilmoitettava ruudunlukijalle ja luettava käyttäjälle mahdollisimman pian.
• Haettaessa jotain, hahmonnetaan elementti, joka ilmoittaa hakutulosten määrän itse tulosten lisäksi, esimerkiksi: ”Löytyi viisi tulosta”.
Kyllä
Valvontaviranomainen.
Jos et ole tyytyväinen meiltä saamaasi vastaukseen tai et saa vastausta 14 vuorokauden kuluessa, voit olla yhteydessä valvovaan viranomaiseen eli Etelä-Suomen aluehallintovirastoon. Aluehallintoviraston verkkosivuilla on ohjeet huomautuksen tekemistä ja käsittelyä varten.
Valvontaviranomaisen yhteystiedot
Etelä-Suomen Aluehallintovirasto
Saavutettavuuden valvonnan yksikkö
saavutettavuus@avi.fi
puhelinnumero vaihde 0295 016 000