Espoo.fi-sivuston Saavutettavuus huomioitu -leima, auditointiraportti 2017 1 Tarkastuskohta WCGprioriteetti Prioriteetti Testauskohde Lisätietoja Ongelmankuvaus Korjaus 2 WCG 2.0. (Erittäin tärkeä, tärkeä, kohtalainen, vähäinen) 3 Periaate 1: Havaittava Informaatio ja käyttöliittymäkomponentit pitää esittää tavoilla, jotka käyttäjä voi havaita. 4 Ohje 1.1 Tekstivastineet: Tarjoa tekstivastineet kaikelle ei-tekstuaaliselle sisällölle siten, että sisältö voidaan muuttaa muihin tarvittaviin muotoihin, kuten isokokoiseksi tekstiksi, pistekirjoitukseksi, puheeksi, symboliksi tai yksinkertaisemmaksi kieleksi. 5 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, pois lukien alla luetellut tapaukset (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). tärkeä kuvat Yksittäisistä kuvista puuttuu alttekstit tai ne on toteutettu tekniikalla, joka ei toimi kaikkien apuvälineiden kanssa 6 Ohje 1.2 ikasidonnainen media: Tarjoa vastine multimedia aikasidonnaiselle medialle. 7 1.2.1 Pelkkä audio tai pelkkä video (tallennettu): Seuraava pätee tallennetulle pelkälle audiomedialle ja tallennetulle pelkälle videomedialle, paitsi kun audio tai video on tekstin mediavastine ja selvästi merkitty sellaiseksi (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). Ei relevantti multimedia 8 1.2.2 Tekstitys (tallennettu): Kaikelle synkronoidussa mediassa olevalle tallennetulle audiosisällölle on tarjolla tekstityksiä, paitsi kun media on tekstin mediavastine ja selvästi merkitty sellaiseksi. Ei relevantti multimedia 9 1.2.3 Ääniselite tai mediavastine (tallennettu): Synkronoidulle medialle on tarjolla aikasidonnaisen median vastine tai ääniselite tallennetusta videosisällöstä, paitsi kun media on tekstin mediavastine ja selvästi merkitty sellaiseksi. Ei relevantti multimedia 10 Ohje 1.3 Mukautettava: Tuota sisältöä, joka voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) informaatiota tai rakennetta menettämättä. 11 1.3.1 Informaatio ja suhteet: Esitystavassa välittyvät informaatio, rakenne ja suhteet voidaan selvittää ohjelmallisesti tai ne ovat saatavilla tekstinä. ruudunlukija, tyylitiedosto, kuvat, visuaaliset elementit Joistakin toimituksellista sisältöä olevista kuvista puuttuu alt-tekstit. Osa ikonilla toteutetuista linkeistä ei tule "näkyviin" apuvälineillä. Sisällöntuotannossa kuvien alt-teksti pakolliseksi. Bloginoston kuvalle lisätty alt-teksti. Lisätty ylälaidan ikoneille title-tekstit.
12 1.3.2 Merkitykseen vaikuttava järjestys: Kun sisällön esitysjärjestys vaikuttaa sisällön merkitykseen, oikea lukemisjärjestys voidaan selvittää ohjelmallisesti. 13 1.3.3 istinvaraiset 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. 14 Ohje 1.4 Erottuva: Helpota käyttäjiä näkemään ja kuulemaan sisältö lisäämällä taustasta erottuva etuala. 15 1.4.1 Värien käyttö: Väriä ei käytetä ainoana visuaalisena keinona välittämään informaatiota, esittämään toimintoa, pyytämään vastausta tai korostamaan visuaalista elementtiä. 1.4.2 udion 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ä 16 17 1.4.3 Kontrasti (minimi): Tekstin visuaalisella esityksellä ja tekstiä esittävissä kuvissa kontrastisuhde on vähintään 4,5:1, paitsi seuraavissa tapauksissa (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). tärkeä ruudunlukija Ongelma päävalikon kolmannen tason linkeissä ohjeet visuaaliset elementit riippumatta. Ei relevantti multimedia kohtalainen kontrasti värikontrastit eivät ole riittäviä kaikissa kohdissa selitys jäljempänä Tekstin ja tekstin taustan välisen kontrastin tulisi olla vähintään 4,5:1 pienessä tekstissä ja suuressa tekstissä vähintään 3:1. Ongelmallisten kohteiden kuvat ovat ppt:ssä. Lisätty päävalikon kakkos- ja kolmostasoille paluu-linkit sekä oikolinkki Suosittelemme - linkkeihin ja paluulinkki sieltä. Lisätty linkkien title-tietoihin ohjeistusta linkkien käytöstä. Parannettu fokuksen näkymistä näppäimistöllä valikkoa selatessa. Parannettu kontrastit hyväksytyiksi. Muutettu teksti mustaksi seuraavissa kohdissa: - etusivun vaikuta-nostojen sekä Ehdota tapahtumaa -, Uutisia- ja tapahtumia-linkkilaatikot - sisällön kieliversioissa aktiivinen kieli - harmalla olleet syöttökenttien, päivämäärien ja ohjeiden tekstit - painikkeiden valkoiset tekstit Muutettu vaalean turkoosit korostusvärit tumman sinisiksi, jos teksti on valkoisella esimerkiksi haun väliotsikoissa. 18 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ä. tekstikoko Toimii ok 19 1.4.5 Tekstiä esittävät kuvat: Jos käytetty teknologia voi tuottaa visuaalisen esityksen, käytetään informaation välittämiseen ennemmin tekstiä kuin tekstiä esittäviä kuvia, paitsi seuraavissa tapauksissa (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). 20 Periaate 2: Hallittava Käyttöliittymäkomponenttien ja navigoinnin pitää olla hallittavia. kuvat
21 Ohje 2.1 Käytettävissä näppäimistöltä: Toteuta kaikki toiminnallisuus siten, että se on käytettävissä näppäimistöltä. 22 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ä. erittäin tärkeä näppäimistö Karusellin ohi ei pääse näppäimistöllä Selattaessa sivun linkkejä läpi sarkainpainikkeella kaikki sujuu hyvin karusellin Lue lisää -linkkiin asti, mutta tästä nappulasta ei pääse enää mitenkään pois Korjattu karusellin toimivuus sarkaimella. Käyttäjä voi selata karusellin uutisia, avata uutisen ja jatkaa karusellin ohi. 23 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. 24 Ohje 2.2 Tarpeeksi aikaa: nna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä. efektit 25 2.2.1 Säädettävä ajoitus: Jokaiselle sisällön asettamalle aikarajalle ainakin yksi seuraavista pitää paikkansa (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). Ei relevantti efektit 26 2.2.2 Keskeytä, pysäytä, piilota: Kaikki seuraavat pitävät paikkansa liikkuvalle, vilkkuvalle, vierivälle tai automaattisesti päivittyvälle informaatiolle (ks. tarkemmin http://www.w3.org/translations/wcg20-fi/). kohtalainen efektit Ohje 2.3 Sairauskohtaukset: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan 27 sairauskohtauksia. Ei relevantti efektit 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 rajaarvojen. 28 EI relevantti efektit 29 Ohje 2.4 Navigoitava: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa. 30 2.4.1 Ohita lohkot: Tarjolla on mekanismi sellaisten sisällön lohkojen ohittamiseen, jotka toistuvat useilla verkkosivuilla. 31 2.4.2 Sivuotsikot: Verkkosivuilla on otsikot, jotka kuvailevat aiheen tai merkityksen. 32 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ä. tärkeä näppäimistö ruudunlukija ei hallitse kaikkia päänavigaation linkkejä Karusellin kontrollointi epäselvää näppäimistöltä ruudunlukija Hyppää sisältöön linkki on olemassa Kohtalainen otsikot Yleistilanne hyvä, mutta h3- tasoisia Suositellemme-linkkejä on monta näppäimistö Ruudunlukija hyppää kolmostason linkkien lukemisen jälkeen suoraan seuraavan kakkostason osion alla olevien linkkien lukemiseen. Fokus katoaa selaimessa. Korjattu karusellin toimivuus sarkaimella. Käyttäjä selaa yhden tason alatasoja ja pääsee palaamaan päätasolle, ja halutessaan voi mennä seuraavaan alatasoon. Muutettu toiminta niin, ettei karuselli liiku, jos käyttäjä on juuri selaamassa sitä sarkaimella. Käyttäjä voi selailla sarkaimella myös eteen ja taakse nuolilla, joiden selitettä parannettu. Lisätty myös ohitusmahdollisuudet sivuilla käytetyille sosiaalisen media syötteille. Poistettu Suosittelemme-sisällöistä toistuvat h3- otsikot.
33 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. tärkeä linkit Puutteita joissakin käyttöliittymän vakiolinkeissä - Kielilinkit pitää avata kokonaisiksi sanoiksi, eli esim. pelkkä "SV" ei riitä. - Hakutulosten sivutuksen esittäminen epäselvä. Esim. seuraava ja viimeinen eivät ole yksiselitteisiä. - Tarkennetun avauspainikkeella ei ole minkäänlaista tekstivastinettta - Etusivun +-kuvakkeet eivät ole ymmärrettäviä linkkejä - Headerin some-linkit puutteellisia -> kaikki ruudunlukijat eivät lue linkkien title-attribuutteja Kielilinkkien lyhenteet vaihdettu selkokielisiin teksteihin. Poistettu Lue lisää -linkit ja tehty sisällön otsikoista linkit. Poistettu etusivun +-kuvakkeet ja tehty otsikoista linkit. Lisätty lisäselitteet seuraava-, viimeinen- ja avauspainikkeille. 34 2.4.5 Useita tapoja: Käytettävissä on enemmän kuin yksi tapa paikallistaa yksi verkkosivu verkkosivujen joukosta, paitsi silloin kun verkkosivu on prosessin lopputulos tai vaihe. navigaatio 35 2.4.6 Otsikot ja nimilaput: Otsikot ja nimilaput kuvailevat aiheen tai merkityksen. 36 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ä. kohtalainen otsikot, Hakukentässä ei ole labelia. Tehty siviuston title-tiedosta kuvaavampi. Lisätty hakukentälle label vähäinen näppäimistö Fokus aika hailakka päävalikon Korostusta voisi parantaa vahventamalla viivaa Parannettu fokuksen näkymistä näppäimistöllä ylimmällä tasolla ja tarkistamalla, että väri erottuu riittävästi. valikkoa selatessa. 37 Periaate 3: Ymmärrettävä - Informaation ja käyttöliittymän toiminnan pitää olla ymmärrettävää. 38 Ohje 3.1 Luettava: Tee tekstisisällöstä luettavaa ja ymmärrettävää. 39 3.1.1 Sivun kieli: Jokaisen verkkosivun oletusarvoinen luonnollinen kieli voidaan selvittää ohjelmallisesti. 40 3.1.2 Osien kieli: Sisällön jokaisen tekstikatkelman tai ilmaisun luonnollinen kieli voidaan selvittää ohjelmallisesti, paitsi seuraavien osalta: 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. 41 Ohje 3.2 Ennakoitava: Tee verkkosivuista sellaisia, että niiden ilmiasu ja toiminta ovat ennakoitavissa. 42 3.2.1 Fokusointi: Kun mikä tahansa komponentti vastaanottaa fokuksen, se ei aiheuta kontekstin muutosta. 43 3.2.2 Syöte: Minkään käyttöliittymäkomponentin asetuksen muuttaminen ei automaattisesti aiheuta kontekstin muutosta, ellei käyttäjää ole ohjeistettu tällaisesta toiminnosta ennen komponentin käyttöä. 44 3.2.3 Johdonmukainen navigointi: Verkkosivujen joukon useilla verkkosivuilla toistuvat navigointimekanismit esiintyvät aina samassa suhteellisessa järjestyksessä, ellei käyttäjä toisin valitse. html html näppäimistö toiminnot navigointi
45 3.2.4 Johdonmukainen tunnistaminen: Komponentit, joilla on sama toiminnallisuus verkkosivujen joukossa, tunnistetaan johdonmukaisesti. 46 Ohje 3.3 Syötteen avustaminen: uta käyttäjiä välttämään ja korjaamaan virheitä. 47 3.3.1 Virheen tunnistaminen: Jos syötevirhe havaitaan automaattisesti, virheellinen kohta tunnistetaan ja virhe kuvataan käyttäjälle tekstimuotoisena. 48 3.3.2 Nimilaput tai ohjeet: Kun sisältö edellyttää käyttäjän syötettä, tarjolla on nimilappuja tai ohjeita. 49 3.3.3 Virheen korjausehdotus: Jos syötevirhe havaitaan automaattisesti ja korjausehdotukset tunnetaan, ehdotukset esitetään käyttäjälle, paitsi jos tämä vaarantaisi tietoturvan tai sisällön merkityksen. 3.3.4 Virheiden ennaltaehkäisy (lakiin perustuva, taloudellinen, data): Verkkosivuille, joista seuraa käyttäjälle lakiin perustuvia sitoumuksia tai taloudellisia transaktioita, jotka muokkaavat tai poistavat käyttäjän hallinnoimaa dataa tietovarastossa tai jotka lähettävät käyttäjän testivastauksia, ainakin yksi seuraavista pitää paikkansa (ks. tarkemmin 50 http://www.w3.org/translations/wcg20-fi/). 51 Periaate 4: Lujatekoinen Sisällön pitää olla riittävän lujatekoinen, jotta se voidaan luotettavasti tulkita laajalla joukolla asiakasohjelmia, mukaan lukien avustavat teknologiat 52 Ohje 4.1 Yhteensopiva: Maksimoi yhteensopivuus nykyisten ja tulevien asiakasohjelmien kanssa, mukaan lukien avustavat teknologiat. Ei relevantti toiminnot 53 4.1.1 Jäsentäminen: Kun sisältö on toteutettu merkkauskieliä käyttämällä, elementeillä on täydelliset alku- ja lopputagit, elementit on järjestetty sisäkkäin määritystensä mukaan, samaa attribuuttia ei ole annettu elementeille moneen kertaan ja kaikki ID-tyyppiset tunnisteet ovat yksilöllisiä paitsi tilanteissa, joissa määritykset sallivat tämänkaltaiset ominaisuudet. 54 4.1.2 Nimi, rooli, arvo: Kaikkien käyttöliittymäkomponenttien (mukaan lukien lomake-elementit, linkit ja skriptien tuottamat 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 asiakasohjelmien saatavissa, mukaan lukien avustavat teknologiat. kohtalainen html Koodi ei mene läpi validaattorista javascript Toimivuuden varmistaminen edellyttäisi validia koodia Ennen Saavutettavuus huomioitu -leiman auditointia espoo.fi:stä tuli validaattorista 185 huomiota. Korjattu kaikilla sivuilla näkyvät huomiot. Jäljellä 31 korjaamatonta huomiota.
55 Valitut NKL:n NVT-kriteerit 56 1. Samalla rivillä olevat linkit on erotettu jollakin linkit erotinmerkillä. 57 2. Kentät ovat alekkain ja kenttään liittyvä ohjeteksti on sen edessä. 58 3. Oletusfonttikoko on riittävä. fonttikoko 59 Muut kriteerit 60 1. Klikattavat elementit ovat riittävän isoja, erillään toisistaan ja sivun laidoista, ja koko aktiiviselta näyttävä alue on aktiivinen. linkit 61 2. Sivun kieli on selkeää ja ymmärrettävää. Tekstissä ei ole pitkiä lauseita, monimutkaisia lauserakenteita tai selittämättömiä lyhenteitä. 62 3. Linkkien nimet eroavat toisistaan riittävästi, kun ne luetaan ääneen, eikä niissä ole pitkää yhtenevää alkuosaa. 63 4. Sivujen otsikointi, kappalejako ja muu rakenne on looginen ja selkeä. Linkit on koottu selkeiksi linkkilistoiksi. 65 5. Tärkeä tieto on HTML-muodossa, ei esimerkiksi ainoastaan PDF- tai Word-muodossa. Em. kaltaisten erillisten materiaalien esteettömästä toteutustavasta huolehditaan. 66 6. Esteettömyyden lisäksi arvioidaan yleistä käytettävyyttä käytettävyyskriteerien mukaan. 67 Käytettävyys 68 Merkittävät käytettävyyshavainnot yleisten käytettävyysheuristiikkojen perusteella (esim. Nielsen). kohtalainen sisältö päävalikon kieliversiolinkit pitää avata linkit Kielilinkkien lyhenteet vaihdettu selkokielisiin teksteihin. otsikot, linkit Liikaa suosittelemme-linkkejä Suosittelemme-tekstien ei tarvitsisi olla otsikoita Poistettu Suosittelemme-sisällöistä h3-otsikot.