Saavutettavuusseloste

Tämä saavutettavuusseloste koskee Crusellinsilta-verkkosivustoa (crusellinsilta.hel.fi) sekä Lapinlahdenkadunsilta-verkkosivua (lapinlahdenkadunsilta.hel.fi). Verkkosivustoista vastaa Helsingin kaupunki, kaupunkiympäristön toimiala. Tässä selosteessa kerrotaan, kuinka saavutettava verkkosivusto on ja miten voit antaa meille palautetta saavutettavuudesta.

Kuinka saavutettava tämä verkkosivusto on?

Digitaalisten palveluiden tarjoamista koskevan lain mukaan julkisten verkkosivustojen on oltava saavutettavia, eli kaikilla tulee olla tasavertaiset mahdollisuudet käyttää niitä.

Helsingin tavoitteena on pyrkiä digitaalisten palveluiden saavutettavuudessa vähintään WCAG-ohjeistuksen mukaiseen AA- tai sitä parempaan tasoon. Verkkosivusto täyttää lain asettamat saavutettavuusvaatimukset WCAG 2.1 -tason AA mukaisesti seuraavin havaituin puuttein.

Saavutettavuuden arviointi

Saavutettavuuden arvioinnissa on noudatettu Helsingin kaupungin työohjetta ja menetelmiä, jotka pyrkivät varmistamaan palvelun saavutettavuuden kaikissa työvaiheissa.

Saavutettavuus on tarkistettu ulkopuolisen asiantuntijan suorittamana arviointina. Saavutettavuus on tarkistettu käyttäen ohjelmallista saavutettavuustarkistusta sekä verkkosivuston ja sisällön manuaalista tarkistusta.

Yhteenveto palvelun saavutettavuudesta

Sivustojen sisällöistä ei löydetty suuria saavutettavuuspuutteita. Suurin osa saavutettavuusongelmista sijaitsevat evästebannerissa ja sivupohjassa.

Kriittiset virheet

Evästeasetusten muuttaminen

WCAG 2.1

Tilasta kertovat viestit | Taso: AA

Kohdistusjärjestys | Taso: A

Sijainti: evästebanneri

Kuvaus
Kun käyttäjä klikkaa painiketta “Näytä evästeasetukset”, ilmestyy painikkeiden yläpuolelle valintaruutuja. Sokealle henkilölle tämä ei ole lainkaan selkeää, sillä painikkeen painaminen ei vaikuta tekevän mitään. Käyttäjälle ei siis ilmoiteta uuden sisällön näyttämisestä millään tavoin, vaan hänen on ymmärrettävä selata sisältöä ylöspäin päästäkseen valintaruutuihin. Kohdistus katoaa kyseisestä painikkeesta aiheuttaen sen, että kohdistus siirtyy selaimesta ja avustavasta teknologiasta riippuen esimerkiksi sivun alkuun tai johonkin muuhun elementtiin epäloogisesti. Tämä aiheuttaa vaikeuksia ymmärtää mitä painikkeesta on tapahtunut.

Korjausehdotus
Käyttäjälle tulisi ilmaista jollain tavalla, että sisältöä on avattu banneriin. Myös kohdistusjärjestyksestä tulisi huolehtia. Painikkeessa voisi esimerkiksi olla aria-expanded-toiminto, jonka avulla käyttäjälle kerrotaan, että sisältöä on avattu. Kohdistusjärjestyksen tulisi olla sellainen, että käyttäjän on helppo siirtyä avaavasta painikkeesta avattuun sisältöön. Kohdistus tulisi siirtää hallitusti silloin, kun painikkeen klikkaaminen aiheuttaa sen katoamisen.

Mobiilivalikon kohdistus

WCAG 2.1
Kohdistusjärjestys | Taso: A

WCAG 2.2
Focus not obscured (minimum) | Taso: AA

Sijainti
Mobiilivalikko

Kuvaus
Kun valikko avataan kapeassa näkymässä, se peittää koko näkymän. Valikosta pääsee kohdistamaan taustalla olevalle sivulle, jolloin kohdistus ei ole enää näkyvissä. Käyttäjällä voi olla vaikeuksia löytää sijaintinsa uudelleen.

Korjausehdotus
Koska valikko toimii modaalin tavoin, tulisi kohdistus vangita valikon sisään. Valikko tulisi voida sulkea sekä esc-näppäimellä että sulje-painikkeella.

Merkittävät virheet

Kohdistuksen näkyvyys

WCAG 2.2
2.4.11 Focus not obscured (minimum) | Taso: AA

Sijainti
Koko sivusto

Kuvaus
Kun evästebanneri on auki, kohdistuksen ilmaisin piiloutuu tietyissä kohdissa bannerin taakse. Käyttäjälle on silloin mahdoton hahmottaa missä kohdistus sijaitsee.

Korjausehdotus
Kohdistuksen ilmaisimen tulisi olla aina näkyvissä. Tämä voidaan toteuttaa evästebannerin kohdalla siten, että sivulle lisätään scroll-padding/-margin.

Evästebannerin painikkeet lähennettynä

WCAG 2.1
1.4.10 Responsiivisuus | Taso: AA

Sijainti
Evästebanneri

Kuvaus
Kun sivua lähennetään (400% 1280px leveydessä), osa evästebannerin sisällöstä jää piiloon, sillä sitä ei voi vierittää näkyviin. Heikkonäköisille käyttäjille voi olla vaikea päästä klikkaamaan painikkeita. Painikkeet saa näkyviin vain tab-näppäimellä selatessa.

Korjausehdotus
Evästebannerin painike-osio tulisi toteuttaa siten, että sitä voi vierittää myös hiirellä.

Värit ja kontrastit

WCAG 2.1
1.4.11 Ei-tekstimuotoisen sisällön kontrasti | Taso: AA

Sijainti
Evästebanneri

Kuvaus
Evästebannerissa olevan valintaruudun kohdistuksen ilmaisin ei erotu riittävän hyvin taustasta. Reunaviivan ja taustan välinen kontrasti on vain 2.4:1.

Korjausehdotus
Kohdistuksen ilmaisimen tulisi erottua taustasta 3:1 kontrastilla.

Hakupainikkeen merkinnät

WCAG 2.1
1.3.1 Informaatio ja suhteet | Taso: A

Sijainti
Ylätunniste

Kuvaus
Sivun yläosassa on hakupainike, joka avaa hakubannerin. Hakupainikkeeseen on liitetty aria-haspopup=”true”, joka käytännössä tarkoittaa ruudunlukijalle sitä, että kyseessä on valikkopainike, joka avaa alivalikon. Kyseessä ei kuitenkaan ole valikkopainike ja ruudunlukijaa käyttävä saattaa hämmentyä kohdistuksen siirtyessä yllättäen hakukenttään.

Korjausehdotus
Hakupainikkeesta tulisi poistaa aria-haspopup=”true”.hyvin taustasta. Reunaviivan ja taustan välinen kontrasti on vain 2.4:1.

Muut virheet

Aria-modal-merkintä

WCAG 2.1
Informaatio ja suhteet | Taso: A

Sijainti
Evästebanneri

Kuvaus
Evästebanneriin on liitetty aria-modal=”true”. Tämä kertoo avustavalle teknologialle, että kyseessä on modaalisisältö. Evästebanneri ei kuitenkaan toimi modaalin tavoin, joten merkintä on harhaanjohtava.

Korjausehdotus
Aria-modal=”true” -merkintä tulisi poistaa evästebannerista.

Saavutettavan tekstin kieli

WCAG 2.1
Osien kieli | Taso: AA

Sijainti
https://crusellinsilta.hel.fi/ https://lapinlahdenkadunsilta.hel.fi/

Kuvaus
Otsikon “Helsingin kaupungin uutiset” alla on uutisotsikkoja, joiden yhteydessä on julkaisupäivämäärä. Päivämäärän yhteyteen on lisätty visuaalisesti piilotettu teksti “Published: “. Sana luetaan suomenkielen ääntämistapaa käyttäen ja voi sen vuoksi olla vaikeasti ymmärrettävissä.

Korjausehdotus
Sana “Published” tulisi kääntää suomenkielelle, kuten ylempänä otsikon “Uutiset” alla on tehty.

Otsikkotasot

WCAG 2.1
Informaatio ja suhteet | Taso: A

Sijainti
https://crusellinsilta.hel.fi/tietoa-sivustosta/ https://lapinlahdenkadunsilta.hel.fi/tietoa-sivustosta/

Kuvaus
“Tietoa sivustosta”-sivulla on otsikko “Käytössä olevat evästeet”. Otsikko on merkitty h3-otsikoksi. Otsikon jälkeen seuraa evästeotsikoita, jotka ovat myös h3-tason otsikoita. Tässä muodossa kyseisellä otsikolla ei ole sen alaisuudessa olevaa sisältöä. Semanttisesti “Käytössä olevat evästeet”-otsikko on yläotsikko sen alapuolella oleville otsikoille.

Korjausehdotus
Alaotsikot (“Polylang”, “LiteSpeed” ja “Sekalaista”) tulisi määrittää h4-otsikoiksi ja niiden alla olevat otsikkotasot vastaavasti alaotsikoiksi.

Puutteiden korjaus

Havaittuja saavutettavuuspuutteita pyritään korjaamaan jatkuvasti. Tässä selosteessa havaittujen saavutettavuuspuutteiden listausta päivitetään sen mukaan, kun puutteita saadaan korjattua.

Huomasitko puutteita saavutettavuudessa?

Pyrimme jatkuvasti parantamaan verkkosivuston saavutettavuutta. Ota meihin yhteyttä, jos löydät saavutettavuuspuutteita, joita ei ole kuvattu tällä sivulla, tai tarvitsemasi aineisto ei ole saavutettavaa. Anna palautetta palautelomakkeella.

Saavutettavuuden valvonta

Etelä-Suomen aluehallintovirasto valvoo saavutettavuusvaatimusten toteutumista. Jos et ole tyytyväinen saamaasi vastaukseen tai et saa vastausta lainkaan kahden viikon aikana, voit tehdä ilmoituksen Etelä-Suomen aluehallintovirastoon. Etelä-Suomen aluehallintoviraston sivulla kerrotaan tarkasti, miten ilmoituksen voi tehdä ja miten asia käsitellään.

Etelä-Suomen aluehallintovirasto
Saavutettavuuden valvonnan yksikkö
Sähköposti saavutettavuus@avi.fi
Puhelinnumero vaihde 0295 016 000

Saavutettavuusvaatimukset-verkkosivusto