Saavutettavuusopas (työversio)

Liite 2. Esimerkki saavutettavuuden huomioimisesta

Saavutettavuuden huomioiminen: osaaminen ja suunnitelma

Mittari

Painoarvo

Minimiarvo

Maksimipistemäärä

Osa A. Toimittajan saavutettavuusosaaminen

20%

3

5

Osa B. Toimittajan saavutettavuusreferenssit

50%

3

5

Osa C. Suunnitelma saavutettavuuden huomioimiseksi

30%

1

5

Painotettu keskiarvo

 

 

5

 

Osa A: Toimittajan saavutettavuusosaaminen

Toimittajan arvio omasta saavutettavuuskapasiteetista

Lyhyt kommentti tukemaan arviota

1) Tarjoaja ei ole ollut tekemisissä saavutettavuusasioiden kanssa. Tarjoajalla ei ole erityistä tietämystä saavutettavuusasioista.

 

2) Tarjoaja on tietoinen tarpeesta saavutettavuuteen, mutta saavutettavuus ei ole ollut etusijalla yhtiön toiminnassa.  Toimittaja ei ole kohdannut riittävää asiakastarvetta, jotta olisi hankkinut perusosaamisen. Jos toimittaja kohtaa saavutettavuusongelman, siihen etsitään alusta pitäen tilanteeseen sopiva ratkaisu.

 

3) Tarjoaja on tietoinen saavutettavuudesta ja on jollain tasolla varautunut siihen liittyviin toimenpiteisiin. Toimenpiteet tehdään kuitenkin ad hoc tilanteeseen sopien. Toimittaja saattaa tietää saavutettavuusohjeistuksen ja toimittajalla on yhteys saavutettavuusasiantuntijaan yrityksen ulkopuolella tai yrityksen muissa organisaatioissa.

 

4) Tarjoajalla on kompetenssia ja resursseja käytössään yrityksen sisällä tai ulkopuolella. Yrityksen ylin johto on sitoutunut edistämään saavutettavuutta. Käytettävyysosaamista sovelletaan yrityksen toimissa. Yhden tai useamman yrityksen henkilökuntaan kuuluvan työnkuvaan kuuluu saavutettavuuskentän monitorointi. Yhdellä tai useammalla yrityksen henkilökuntaan kuuluvalla on perusosaaminen saavutettavuusalueelta. Syvempää saavutettavuusasiantuntijuutta on käytettävissä muualla yrityksen organisaatioissa tai yrityksellä on alihankintasopimus ulkoisen saavutettavuusasiantuntijan kanssa.

 

5) Saavutettavuus on yksi tarjoajan toimialoista. Yrityksellä on dokumentoitu menettelytapa saavutettavuuteen. Menettelytapaa seurataan ja työntekijät tuntevat sen hyvin. Yrityksen sisällä on saavutettavuusyksikkö. Saavutettavuusohjeistukset tunnetaan hyvin ja niitä seurataan hankkeissa.

 

Toimittajan arvio omasta saavutettavuuskapasiteetista

(1-5 –  valitse yksi arvo)

Saavutettavuuskapasiteetin osoittamiseksi on esitettävä osallistuvien kehittäjien koulutus ja työkokemus saavutettavuuden alueella sekä esitettävä mahdollisia muita todisteita esitetystä tasosta, esimerkiksi mahdolliset sertifikaatit.

Osa B: Toimittajan saavutettavuusreferenssit               

Esitä vähintään kolme ja enintään viisi referenssiä, jossa on suunniteltu saavutettavia verkkopalveluita. Referensseistä tulee käydä selkeästi esille, mitä vaatimuksia vastaan saavutettavuus toteutettiin ja miten toteutuksen onnistuminen testattiin:

  • millä menetelmällä referenssiprojektissa saavutettavuus varmistettiin?
  • auditoitiinko saavutettavuus ulkopuolisen auditoijan toimesta (raportti)?
  • miten toimimisesteiset ja ikäihmiset osallistuivat käyttäjätestaukseen?

Osa C: Suunnitelma saavutettavuuden huomioimiseksi verkkosivun suunnittelussa   .

Ohessa on tarkistuslista WCAG2.0 AA-tason saavutettavuusohjeisiin perustuvista vaatimuksista. Huomioi nämä vaatimukset verkkopalvelun suunnittelussa ja esitä suunnitelma, josta tulee käydä ilmi seuraavat asiat:

  • millä menetelmällä saavutettavuus varmistetaan projektissa?
  • miten saavutettavuus testataan?
  • käytetäänkö ulkopuolista saavutettavuuskonsulttia, joka osallistuu projektiin?
  • miten toimimisesteiset ja ikäihmiset osallistuvat käyttäjätestaukseen?

Tarkistuslista verkkopalveluiden saavutettavuudelle

Verkkosivujen visuaalisen ilmeen saavutettavuusvaatimukset

  • Tekstin väriyhdistelmillä on oltava riittävä kontrastisuhde. Minimissään 4.5 : 1
  • Ei tekstiä suoraan kuvan päällä
  • Näppäimistön fokuksella on erottuva visuaalinen ilme kaikkialla
  • Vältä keskitettyä tai oikealle tasattua tekstiä, kursivoitua tai lukuisia fontteja samalla sivulla
  • Ei kuvia tekstin sijaan
  • Linkkien tyylin on erotuttava selkeästi: eri, yhdenmukainen väri. Hoveroitaessa alleviivaus
  • Mikään sivujen animaatiossa tai videoissa ei välähdä nopeammin kuin 3x/sekunti

Verkkopalvelun rakenteen saavutettavuusvaatimukset

  • Verkkosivun tarkoitus ja sijainti helppo ymmärtää
  • Päänavigaation ja asiasanahaun sekä muiden navigaatioelementtien ja toistuvien elementtien sijainti ja järjestys on oltava yhdenmukainen eri sivuilla.
  • Sivulta löytyy haku asiasanalla, sivukartta ja murupolku.
  • Näppäimistökäyttäjille jokaisella sivulla ensimmäisenä linkki suoraan pääsisältöön
  • Ulkoasu on selkeä ja vastaa käyttäjän odotuksia. Aloitussivu erottuu muista sivuista ja käyttäjä tietää olevansa aloitussivulla.
  • Vältettävä omia ikoneita ilman selittävää tekstiä. Tunnettuja ikoneita on käytettävä johdonmukaisesti.
  • Loogisen ja intuitiivisen lukujärjestyksen ja navigoimisen tulee toteutua myös näppäimistökäyttäjille ja ruudunlukijakäyttäjille.
  • Lomakekentän otsikointi välittömästi lomakekentän päälle. Lomakekentän sisään laitettavaa otsikkoa ei tule käyttää yksin. Lomakekenttä ja sen otsikko on ohjelmallisesti yhdistetty toisiinsa.
  • Lomakkeissa vältettävä: useiden sarakkeiden käyttöä sekä toiminnallisuuksia, joissa hypitään hiiren ja näppäimistön välillä.
  • Lomakkeiden täytössä tapahtuvat virheilmoitukset ja ohjeet on kohdistettava puutteelliseen lomakekenttään ja virheilmoituksen on oltava tekstimuotoinen. Virheilmoituksen on oltava ohjelmallisesti yhdistetty puutteelliseen lomakekenttään
  • Oikea syötettävien tietojen formaatti on näytettävä lomakekentän otsikossa
  • Toiminnallisesti kaikista lomakkeista tulee löytyä mahdollisuus 1. tarkistaa tiedot, 2. muokata tietoja ennen lähetystä, sekä 3. saada vahvistus, kun tiedot on lähetetty.

Verkkosivujen teknisen toteutuksen saavutettavuusvaatimukset

  • Verkkosivuilla on oltava otsikko (title) ja sivujen kieli on merkattava
  • Verkkosivujen semanttinen rakenne on oltava selvitettävissä ohjelmallisesti
  • Sivulta löytyy haku asiasanalla, sivukartta ja murupolku.
  • HTML-merkintöjä käytettävä oikeaoppisesti ilmaisemaan sivun semanttista rakennetta
  • Otsikot on merkittävä otsikoiksi ja otsikoiden hierarkian (h1, h2 jne) on kuvattava otsikoiden järjestystä ja hierarkiaa.
  • Taulukoiden solut on kytketty ohjelmallisesti oikeaan otsikkoon 
  • Kaikki verkkosivun sisältö on saavutettavissa näppäimistöllä.
  • Kun verkkosivun elementti saa näppäimistön fokuksen, mitään ei saa tapahtua ennen kuin käyttäjä tietoisesti valitsee elementin.
  • Verkkosivun sisällön­, tekstin, kuvien, ja muiden elementtien, on oltava näkyvissä ja kontrolloitavissa oikein, kun sivua suurennetaan selaimesta 200%:iin normaalista sekä eri kokoisilla näytöillä matkapuhelimesta pöytäkoneeseen.
  • Jos sivun toiminnoissa on aikarajoituksia, niin on voitava joko kytkeä aikarajoitus pois päältä tai säätää aikarajoitusta vähintään kymmenkertaiseksi
  • Jos jokin ääni verkkosivulla soi automaattisesti kauemmin kuin kolme sekuntia, käytettävissä on oltava 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.
  • Kaikelle liikkuvalle ja automaattisesti latautuvalle sisällölle, esimerkiksi nykyään paljon käytetyille kuvakaruselleille, on oltava mahdollista: ”Pause”: pysäyttää sisältö väliaikaisesti, ”Stop”: pysäyttää sisältö kokonaan, ”Hide”: piilottaa sisältö
  • Kaikki käyttöliittymäkomponentit on toteutettu niin, että niitä voidaan käyttää ohjelmallisesti. Tämä sisältää niiden nimen ja tilan ymmärtämisen sekä tiedon tilan muutoksista (tarvittaessa käytettävä ARIAa).
  • On käytettävä määritelmän mukaista HTML-koodia. Tällöin mm. elementtien tunnisteet (id) ovat yksilöllisiä, aloitus- ja lopetusmerkintöjä on käytetty oikein ja elementit on järjestetty sisäkkäin oikein.

Verkkosivujen sisällön saavutettavuusvaatimukset

  • Käytettävä selkeää kieltä
  • Sisältö jäsennettävä kuvaavilla otsikoilla. Sivun otsikko vastaa sivun sisältöä
  • Jokaisen kuvan kohdalla on päätettävä, onko kuva informatiivinen (=sisältää tietoa) vai dekoratiivinen (=vain koristeena). Kuvien sisältämä tieto on sisällytettävä tekstivastineena -text). Dekoratiivisille kuville annetaan tekstivastine alt=””, jolloin ruudunlukija ei huomio kuvaa lainkaan.
  • Linkeille kuvaavat nimet, jotka toimivat irrallaan asiayhteydestä. Samalle sivulle johtavilla linkeillä olisi syytä käyttää samaa nimeä.
  • Jos kuvia käytetään linkkeinä, on tekstivastineena käytettävä linkin kohdetta, ei itse kuvaa.
  • Videoiden on oltava tekstitettyjä huonokuuloisille: koko ääniraidan sisältö (=closed captioning) eli myös kaikki muut äänet, esimerkiksi ”naurua”, ”räjähdys”.
  • Sivuilta on löydyttävä linkki videon tekstimuotoiseen sisältöön tai tekstivastine.
  • Äänitallenteille sivuilta on löydyttävä linkki tekstimuotoiseen sisältöön tai tekstivastine.
  • Vältettävä yhteen aistihavaintoon liittyviä ilmauksia, kuten ”Paina nappia sivun oikeassa alakulmassa”, ”Paina pyöreää nappia”, “Lisää ohjeita oikeassa alakulmassa”, "jatka kuultuasi äänimerkin"
  • Graafien viivat eroteltava myös muuten kuin vain eri värein