Liite 2. Esimerkki saavutettavuuden huomioimisesta

Saavutettavuuden huomioiminen: osaaminen ja suunnitelma

Osa A: Toimittajan saavutettavuusosaaminen

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