Tar­kis­tus­lis­ta verk­ko­si­vu­jen te­ki­jöil­le

1 Tekstivastineet

Kaikilla sivuston kuvilla ja graafisilla elementeillä tulee olla tekstimuotoinen vastine, joka välittää sokeiden ja vaikeasti heikkonäköisten käyttämille ruudunlukuohjelmille näytöllä esitetyn sisällön.

WCAG 1.1.1 Ei-tekstuaalinen sisältö: Kaikki käyttäjälle esitettävä ei-tekstuaalinen sisältö on varustettu saman tarpeen täyttävällä tekstivastineella.

2 Lomakkeet

Kaikilla sivuston lomakkeiden elementeillä pitää olla tekstimuotoinen kuvaus, joka kertoo ruudunlukuohjelman käyttäjälle, millainen kenttä, painike tai muu elementti on kyseessä.

WCAG 2.4.6 Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen.

3 Otsikot

Looginen ja hierarkkisesti johdonmukainen otsikointi auttaa sivujen rakenteen hahmottamisessa ja jäsentämisessä. Otsikoiden avulla ruudunlukuohjelmaa käyttävät näkövammaiset voivat myös siirtyä helposti sivun osioista toiseen. Selkeä otsikointi auttaa myös sisällön hahmottamisessa ja jäsentämisessä erityisesti käyttäjiä, joilla on kognitiivisia ongelmia.

WCAG 1.3.1 Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä.

4 Selailujärjestys ja saavutettavuus näppäimistöllä

Sivun rakenteen ja toimintojen pitäisi olla hahmotettavissa myös ilman visuaalista käyttöliittymää. Sivuston koko sisällön tulee olla saavutettavissa ja kaikkien toiminnallisuuksien toteutettavissa näppäimistöllä.

Suurin osa näkövammaisista selaa verkkosivuja tietokoneella näppäimistön ja mobiililaitteissa pyyhkäisyeleiden avulla. Sarkaimen painallus tai sivuttainen pyyhkäisyele pitäisi siirtää aktiivista kohtaa järjestelmällisesti elementistä toiseen, esimerkiksi linkistä seuraavaan linkkiin.

Valintalistoja pitää pystyä selaamaan nuoli ylös/alas -näppäimillä. Valinnat pitää voida tehdä Enterillä. Pyyhkäisyeleet ovat mobiililaitteissa käytettävissä vasta, kun laitteen ruudunlukuohjelma on otettu käyttöön. Ohjauseleet ovat silloin tyypillisesti yhden sormen vaakasuoria tai pystysuoria pyyhkäisyjä. Valinta tehdään tuplanapautuksella ruudunlukijan ollessa käynnissä.

WCAG 2.4.3 Fokusjärjestys: Jos verkkosivu voidaan navigoida järjestyksessä ja navigointijärjestykset vaikuttavat merkitykseen tai toimintoon, fokusoitavissa olevat komponentit vastaanottavat fokuksen merkityksen ja toimivuuden säilyttävässä järjestyksessä. (Taso A).

WCAG 2.1.1 Näppäimistö: Kaikki sisällön toiminnallisuus on hallittavissa näppäimistörajapinnan välityksellä ilman vaatimusta yksittäisten näppäinpainallusten erityisestä ajoittamisesta, paitsi kun alla oleva toiminnallisuus vaatii syötettä, joka riippuu käyttäjän liikkeiden polusta eikä vain päätepisteistä.

5 Korostuskeinot ja visuaalinen ohjeistus

Sokeat ja vaikeasti heikkonäköiset eivät tarkastele verkkopalveluja visuaalisesti, joten merkityksiä ei saa välittää esimerkiksi vain värin tai tekstityylien avulla. Samoin esimerkiksi käyttäjälle annettavat toimintaohjeet eivät saa perustua ruudulta näkemiseen , kuten ”valitse haluamasi vaihtoehto oikealta”.

WCAG 1.3.3 Aistinvaraiset ominaispiirteet: Ohjeet sisällön ymmärtämiseksi ja hallitsemiseksi eivät riipu yksinomaan komponenttien aistinvaraisista ominaispiirteistä kuten muoto, koko, visuaalinen sijainti, suunta tai ääni.

6 Automaattisesti käynnistyvä media ja näppäimistön ansa

Sivuilla automaattisesti käynnistyvät äänitiedostot ja itsestään päivittyvät sisällöt voivat aiheuttaa vakavia ongelmia ruudunlukuohjelmien ja motoristen apuvälineiden käyttäjille. Ne ovat hankalia myös käyttäjille, joilla on kognitiivisia ongelmia kuten keskittymisvaikeuksia.

Sivuston käyttäjällä pitää olla mahdollisuus pysäyttää kuvakarusellit, sivulla automaattisesti toistettavat animaatiot ja videoleikkeet.

Sivustolla ei saa olla elementtejä, joissa selaimen kohdistus jää jumiin eikä pelkästään perusnäppäimiä käyttämällä voi siirtyä elementistä pois.

WCAG 1.4.2 Audion kontrollointi: Jos jokin ääni verkkosivulla soi automaattisesti kauemmin kuin kolme sekuntia, käytettävissä on joko mekanismi äänen keskeyttämiseen tai pysäyttämiseen tai mekanismi äänen voimakkuuden säätämiseen koko järjestelmän äänenvoimakkuuden säädöstä riippumatta.

WCAG 2.1.2 Ei näppäimistöä -ansa: Jos näppäimistön fokus voidaan siirtää sivun komponentille näppäimistörajapintaa käyttämällä, niin fokus voidaan siirtää myös pois kyseiseltä komponentilta pelkästään näppäimistörajapintaa käyttämällä. Mikäli tämä vaatii enemmän kuin muuttumattomia nuoli- tai tab-näppäimiä tai muita standardinmukaisia poistumismenetelmiä, käyttäjälle neuvotaan menetelmä fokuksen poissiirtämiseksi.

WCAG 2.2.2 Keskeytä, pysäytä, piilota: Kaikki seuraavat pitävät paikkansa liikkuvalle, vilkkuvalle, vierivälle tai automaattisesti päivittyvälle informaatiolle.

7 Kontrastit

Riittävän suuri tekstin ja sen taustavärin välinen kontrasti takaa helpon luettavuuden erityisesti heikkonäköisille käyttäjille.

Sivun taustaväriksi on hyvä valita neutraali väri, joka muodostaa selkeän kontrastin tekstin värin kanssa. Taustakuvaksi kannattaa asettaa värimaailmaltaan ja kuvioinniltaan maltillinen vaihtoehto. Vältä vihreän ja punaisen käyttämistä lähekkäin. Puna-vihreiden sävyjen tulee muodostaa riittävä kontrasti keskenään.

Kontrastisuhteen riittävyyden voi tarkistaa jollakin verkkotyökalulla. Tutustu kontrastityökaluihin.

WCAG 1.4.3 Kontrasti (minimi): Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1.

8 Tekstin koko

Selaimen asetuksista voi ottaa käyttöön suuremman tekstin. Tämä asetus helpottaa heikkonäköisiä ja ikänäön ongelmista kärsiviä henkilöitä. Asetuksen hyödyntäminen ei ole mahdollista, jos tekstin koko on määritetty kiinteäksi sivustolla. Kaikki tekstiin liittyvät tyylimäärittelyt pitäisi olla tyylitiedostoissa.

WCAG 1.4.4 Tekstin koon muuttaminen: 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ä.

9 Välkkyvä sisältö

Verkkosivuilla ei saa olla välkkyvää sisältöä, joka tunnetusti voi aiheuttaa sairaskohtauksia.

WCAG 2.3.1 Kolme välähdystä tai alle -raja-arvo: 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.

10 Siirtymälinkki pääsisältöön

Jos ruudunlukuohjelman ja puhesyntetisaattorin käyttäjälle ei tarjota mahdollisuutta siirtyä suoraan pääsisältöön, jokaisen uuden sivun avaamisen jälkeen joutuu selaamaan sivujen yläosassa olevien toistuvien navigointielementtien läpi. Se on varsin työlästä ja heikentää sivuston käytettävyyttä merkittävästi. Jokaisen sivun alussa tulee olla ns. siirtymälinkki, joka osoittaa suoraan saman sivun pääasialliseen sisältöön.

WCAG 2.4.1 Ohita lohkot: Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla.

11 Sivun nimi, title-elementti

Sivun yksilöllinen ja kuvaava nimi on erityisen tärkeä ruudunlukuohjelman käyttäjille, sillä tämä informaatio on ensimmäinen, jonka puhesyntetisaattori lukee sivua avatessa. Näin käyttäjä saa heti tiedon siitä, että on avannut oikean sivun, mikä muutoin sisältöä visuaalisesti tarkastelematta voi olla vaikea selvittää.

Sivun title-elementin pitäisi olla yhdenmukainen pääotsikon kanssa.

WCAG 2.4.2 Sivuotsikot: Verkkosivuilla on otsikot, jotka kuvailevat aiheen tai merkityksen.

12 Selkeät linkkitekstit

Selkeät ja yksilölliset linkkitekstit ovat erityisen tärkeitä ruudunlukuohjelman käyttäjille, jotka usein navigoivat sivulla liikkumalla linkistä toiseen. Jokaisen linkin tarkoitus tulee ilmetä itse linkin tekstistä.

Navigaatiolinkkitekstien pitää vastata kohdesivujen sisällön pääotsikoita.

Ruudunlukuohjelmien käyttäjien ja kognitiivisista ongelmista kärsivien kannalta on tärkeää, että avautuvan sivun otsikko vastaa linkkiä, josta sivu avattiin.

WCAG 2.4.4 Linkin tarkoitus (kontekstissa): Jokaisen linkin tarkoitus voidaan selvittää yksin linkkitekstistä tai linkkitekstistä yhdessä ohjelmallisesti selvitettävissä olevan linkkikontekstin avulla, paitsi tilanteissa, joissa linkki olisi yleisesti ottaen epäselvä käyttäjille.

13 Näkyvä kohdistus

Sivulla kulloinkin kohdistettuna oleva elementti pitää olla visuaalisesti merkitty esimerkiksi tummemmalla reunuksella. Tämä auttaa sekä heikkonäköisiä että kognitiivisista ongelmista kärsiviä havaitsemaan, mikä käyttöliittymän osa tai linkki on aktiivisena.

WCAG 2.4.7 Näkyvä fokus: Kaikilla näppäimistöltä käytettävillä käyttöliittymillä on käyttömoodi, jossa näppäimistön fokusindikaattori on näkyvissä.

14 Kielimääritys

Jos sivulle ei ole tehty lainkaan kielimääritystä tai se on virheellisesti määritetty, suomenkielinen ruudunlukija lukee sivun puhesyntetisaattorin oletuskielellä, joka on usein englanti. Näkövammainen kuulee silloin suomen kieltä englannin lausuntasäännöillä. Tämä tekee sivun sisällön ja käyttöliittymän ymmärtämisen käytännössä mahdottomaksi ruudunlukijan käyttäjälle.  Puhesyntetisaattorin kieliasetusten muuttaminen vaatii edistyneempiä it-taitoja.

WCAG 3.1.1 Sivun kieli: Jokaisen verkkosivun oletusarvoinen luonnollinen kieli voidaan selvittää ohjelmallisesti.

15 Informaation määrä

Jos yksittäisellä sivulla on runsaasti informaatiota tai sisältö on hyvin monimuotoista, erityisryhmiin kuuluville käyttäjille aiheutuu erilaisia hahmotusongelmia. Kognitiivisesti tällainen sivu on vaikeasti hallittava ja erilaisten sisältöjen suhteiden ymmärtäminen voi olla liian vaativaa.

Myös suurennusohjelmaa käyttävien heikkonäköisten on vaikea toimia runsaasti sisältöä ja toiminnallisuuksia sisältävällä sivulla. Samoin ruudunlukuohjelman kautta sivun rakenteen ymmärtäminen on haastavaa, jos sisältöä on runsaasti.

16 Rakenteet ja toimintatavat

Näkövammaisten ruudunlukuohjelmalla voi olla vaikea hahmottaa sivun rakennetta. Ikäihmisten ja erityisesti oppimisvaikeuksista tai muistihäiriöistä kärsivien on vaikea opetella uudenlaisia käyttöliittymiä ja toimintatapoja. Siksi verkkopalveluissa kannattaa käyttää mahdollisimman perinteisiä ratkaisuja esimerkiksi navigoinnissa sekä erilaisissa vuorovaikutteisissa toiminnoissa.

Sivujen eri osioiden ja mahdollisten painikkeiden pitää olla riittävästi toisista elementeistä erottuvia. Visuaalinen ero auttaa monia käyttäjiä hahmottamaan esimerkiksi pääsisällön helpommin. Myös navigointiosion erilaisesta taustaväristä on apua heikkonäköisten ohella kognitiivisista ongelmista kärsiville.

Sivun olennainen sisältö pitäisi sijoittaa sivun yläosaan. Jatkuva pystysuuntainen sivun vierittäminen on työlästä näkövammaisten apuvälineillä ja hankalaa motorisista ongelmista kärsiville henkilöille.

17 Suurikontrastinen tila

Useat heikkonäköiset asettavat joko koko käyttöjärjestelmään tai vain internet-selaimeen ns. suurikontrastisen näyttötilan helpottamaan tietokoneen tai verkkopalvelujen käyttöä. Tässä näyttötilassa kaikki sisältö esitetään valkoisena tekstinä mustalla pohjalla maksimaalisen kontrastin saamiseksi ja valkean taustan häikäisyn vähentämiseksi.

Verkkosivun ulkoasun ymmärrettävyys tulee varmistaa myös suurikontrastisessa tilassa, jotta esimerkiksi kaikki käyttöliittymäelementit ja lomakkeiden painikkeet ovat näkyvissä.

Lue lisää