Saavutettavuusseloste
Helsingin Kaupunginteatteri pyrkii takaamaan Internet-palvelunsa saavutettavuuden Lain digitaalisten palvelujen tarjoamisesta 306/2019 mukaisesti. Tämä saavutettavuusseloste koskee hkt.fi -sivustoa.
Vaatimustenmukaisuustilanne
Sivusto täyttää Lain digitaalisten palvelujen tarjoamisesta 306/2019 vaatimukset osittain. Vaatimusten noudattamatta jättämiset ja vaatimuksiin sovellettavat poikkeukset mainitaan jäljempänä. Havaitsemamme saavutettavuusongelmat luetellaan alla kohdassa Ei-saavutettava sisältö.
Pyrimme kehittämään sivustoamme ja korjaamaan saavutettavuusongelmat ohjelmointiteknisten ratkaisujen, sisällön muokkaamisen ja henkilöstön koulutuksen avulla. Havaitut saavutettavuusongelmat on dokumentoitu projektinhallintatyökaluihimme ja niitä korjataan järjestelmällisesti.
Ei-saavutettava sisältö
Nykyisellä sivustolla on havaittu saavutettavuusongelmia:
| Huomio | Esimerkki |
|---|---|
| Artikkelien kuvista puuttuu alt-teksti (WCAG 1.1.1) | Uutisartikkelisivulla kuvalle käytetään tyhjää alt-attribuuttia (`<img … alt="">`), jolloin ruudunlukija ei saa tietoa kuvasta |
| Geneerinen linkkiteksti ei kerro linkin kohdetta (WCAG 2.4.4) | Artikkelissa käytetään linkkitekstiä “täällä” (`<a href="…">täällä</a>`), joka vie Teatteriin-lehden pdf:ään |
| Pitkä tab-järjestys sivuilla (WCAG 2.4.3) | Ajankohtaista-sivulla ja muissa osioissa nav menu ja kymmenet artikkelilinkit tekevät Tab-navigoinnista pitkän; käyttäjä joutuu tabuloimaan kymmeniä painalluksia päästäkseen alatunnisteeseen. |
| Puuttuvat alt-tekstit (WCAG 1.1.1) | Esityssivujen näyttelijöiden kuvissa alt-attribuutti on tyhjä. |
| Pääkuvan alt-teksti ei kuvaa sisältöä (WCAG 1.1.1) | Hero-kuvan alt-attribuutti on sama kuin esityksen nimi eikä kuvaile kuvassa näkyviä ihmisiä. |
| Useita h1-otsikoita samalla sivulla (WCAG 2.4.6) | Esityssivulla “Let’s Play Business” on h1-otsikko sekä hero-osiossa että esityksen kuvauksessa. |
| Piilotettu toimintokutsu “Osta liput” ja “Tilaa tarjoilut” (WCAG 2.4.7 / 4.1.2) | Esityssivun hero-osiossa call-to-action -linkit on piilotettu tyylillä visibility:hidden. |
| Fokuksen korostus puuttuu tai on heikko (WCAG 2.4.7) | Etusivun ensimmäinen interaktiivinen elementti (esim. logo tai ylävalikko) ei näytä selkeästi näkyvää fokuksen kehystä Tab-navigoinnissa |
| Chat-ikkuna ei ole näppäimistöllä saavutettavissa (WCAG 2.1.1) | Oikean alareunan ”Hei! Voinko olla avuksi?” -chat-widget ei saa tab-fokusta eikä sen X-sulkemispainiketta voi käyttää näppäimistöllä. |
| Tapahtumasivujen kuvilta puuttuu alt-tekstit (WCAG 1.1.1) | “Keskiviikon kulissikierros” -tapahtumasivulla kuvan alt-attribuutti on tyhjä (`<img … alt="">`) |
| Epälooginen lukujärjestys (WCAG 1.3.2) | Kalenterin päivien lukujärjestys on ruudunlukijalla epäselvä. |
| Väri ainoana tiedonvälityskeinona (WCAG 1.4.1) | Kalenterissa eri kuukaudet ja nykyinen päivä erotetaan vain värillä. |
| Painikkeiden nimet eivät ole esteettömiä | Evästebannerissa on painike <button tabindex="0" id="coi-expand">, jolla ei ole näkyvää nimeä tai aria-labelia; ruudunlukija ei tiedä painikkeen tarkoitusta. |
| Kuvilta puuttuu alt-teksti (Alt attribute) | Useat <img> elementit ilman alt- tai aria-label attribuuttia: esim. <img src="…" alt=""> |
| Syötekentällä ei ole nimeä (Field name) | <textarea id="comment" aria-required="true"></textarea> ilman label-, aria-label- tai aria-labelledby-attribuuttia. |
| Virheelliset ARIA-attribuutit (Allowed ARIA attributes) | Kappale-elementissä on aria-level-attribuutti (esim. <p aria-level="3">), mikä ei ole sallittua. |
| Heikko värikontrasti tekstissä (Color contrast) | Tekstiväri #2bb976 taustalla #ffffff antaa kontrastisuhteen 2.52 (< 4.5:1). |
| Linkit erottuvat vain värillä tekstikappaleissa (Link in text block) | Tekstilinkit #0677c7 taustatekstin #000000 kanssa; ei alleviivausta ja kontrastisuhde 2.69. |
| Videoilla ei ole tekstitystä tai kuvailutulkkausta (Video captions) | Upotetut videot ilman suljettuja tekstityksiä tai transkriptioita. |
| Linkiltä puuttuu selkeä nimi (Link name) | Linkki on tab-järjestyksessä, mutta sillä ei ole näkyvää tekstiä tai aria-labelia; esim. <a href="#top"><i aria-hidden="true"></i><span>Menu</span></a>. |
| Sivulta puuttuu lang-attribuutti (Document language) | <html> elementissä ei ole lang="fi" attribuuttia. |
| Sisällöllä ei ole merkattuja alueita (Landmark) | Sivuilla on sisältöä, joka ei ole <main>, <nav>, <header> tai muissa landmark-elementeissä. |
| Puuttuva pää-<main>-elementti (Main landmark) | Dokumentissa ei ole yhtään <main>-landmark-elementtiä. |
| Landmarkien nimet eivät ole uniikkeja (Unique landmark) | Useampi <nav> elementti ilman aria-labelia tai otsikkoa. |
| Otsikkotasojen järjestyksessä hyppäyksiä (Heading order) | Koodissa käytetään <h5> heti <h1>-otsikon jälkeen ilman väliportaita. |
| Puuttuva <h1>-otsikko (H1 heading) | Joillakin sivuilla ei ole lainkaan <h1>-tason otsikkoa. |
| Tyhjät otsikot (Empty heading) | <h3></h3> ilman sisältöä. |
| Virheellinen ARIA-roolin käyttö (Allowed ARIA role) | <a class="header__logo" role="img" …> – anchorilla ei saa olla roolia img. |
| Virheellinen scope-attribuutti (Valid scope attribute) | <td scope="col"> käytetty <td>-elementissä. |
| Saapuminen-sivun navigaatiokuvien alt-teksti puuttuu (WCAG 1.1.1) | Ravintolapalvelut- ja Esteettömyys-osioissa on kuvia, joilla on tyhjä alt-attribuutti (`<img … alt="">`) |
| Henkilökunnan kuvista puuttuu alt-tekstit (WCAG 1.1.1) | Yhteystiedot-sivulla henkilöstön valokuvista puuttuu alt-attribuutti (`<img … alt="">`), vaikka henkilön nimi näkyy viereisessä tekstissä |
| Turhat linkit, joiden href="#" eivät johda mihinkään (WCAG 2.4.4) | Yhteystiedot-sivun henkilökortissa sekä kuva että nimi ovat linkkejä, joiden href-attribuuttina on “#”, jolloin ne ovat turhia fokuspisteitä |
| Tekstiä sisältävät kuvat ilman tekstivastinetta (WCAG 1.4.5) | Sivustolla on kuvia, joissa on tekstiä, mutta niille ei ole alt-tekstiä. |
| Näppäimistökäytettävyys puutteellinen (WCAG 2.1.1) | Osa valikoista ja toiminnoista ei ole saavutettavissa tab-näppäimellä. |
| Kuvilta puuttuu alt-teksti (WCAG 1.1.1 – alt attribute missing) | Webwarden havainnoissa alt-teksti puuttuu useilta kuvilta ja kuville ei ole annettu aria-label tai title -attribuuttia; esimerkiksi HTML-koodi sisältää vain <img> ilman alt-attribuuttia |
| Lomakekentistä puuttuu nimike (WCAG 3.3.2/4.1.2 – Field name) | Lomake-elementeissä, kuten textarea, ei ole label- tai aria-label -attribuuttia; Webwarden listaa, että kentät eivät sisällä mitään implisiittistä tai eksplisiittistä nimeä |
| Videoista puuttuu tekstitys (WCAG 1.2.2 – Captions) | Videoupotuksissa (esim. YouTube) ei ole tekstitystä; Webwarden-löydökset viittaavat siihen, että käyttäjät eivät saa videoiden sisältöä ilman ääntä |
| Virheelliset ARIA-attribuutit (WCAG 4.1.2 – Allowed ARIA attributes) | Sivuilla käytetään kiellettyä aria-level-attribuuttia peruselementeissä (esim. <p aria-level="3"> tai <p aria-level="5">); Webwarden huomauttaa, että aria-level ei ole sallittu kyseisessä elementissä |
| Virheellinen ARIA-rooli (Allowed ARIA role) – suositus | Esimerkiksi ankkuriin on lisätty role="img", mikä ei ole sallittua kyseisellä elementillä; Webwarden huomauttaa roolin virheellisyydestä |
| Link-elementeillä ei ole selkeää nimeä (Link name) – WCAG 2.4.4, 4.1.2 | Esim. nuolinäppäimen linkki <a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i><span>Menu</span></a> ei sisällä ruudunlukijalle erottuvaa nimeä |
| Heikko kontrasti (WCAG 1.4.3 & 1.4.11) | Teksti kuvien päällä ja osa painikkeista on vaikeasti luettavissa. |
| Heikko väri- ja kontrastisuhde (WCAG 1.4.3/1.4.11) | Webwarden raportoi useita väriyhdistelmiä, joissa tekstin kontrastisuhde on liian pieni (esim. #2bb976 valkoisella taustalla, kontrastisuhde 2.52), mikä ei täytä 4.5:1 vaatimusta |
| Sivujen sisällöt eivät ole landmarkeissa (suositus) | Webwarden suosituksissa todetaan, että osa sisällöstä ei ole määritettyjen landmark-alueiden sisällä ja sitä voi olla vaikea navigoida ruudunlukijalla |
| Pääsisältöelementti puuttuu (Main landmark) – suositus | Useilta sivuilta puuttuu yksi selkeä <main>-elementti; Webwarden huomauttaa, että dokumentissa ei ole päälandmarkkia |
| Landmarkit eivät ole uniikkeja (Unique landmark) – suositus | Sivustolla on useita nav-alueita ilman yksilöiviä aria-label- tai title-attribuutteja; Webwarden korostaa, että landmarkien tulee olla uniikkeja |
| Otsikkohierarkia epälooginen (Heading order) – suositus | Sivuilla otsikkotasoja käytetään hyppien (esim. h1-h3-h5); Webwarden muistuttaa, että otsikot tulisi käyttää nousevassa järjestyksessä |
| H1-otsikko puuttuu (H1 heading) – suositus | Jotkin sivut eivät sisällä <h1>-otsikkoa lainkaan; Webwarden raportoi 36 tapausta, joissa h1 puuttuu |
| Tyhjä otsikkotagi (Empty heading) – suositus | <h3></h3> ilman sisältöä. |
| Scope-attribuutti väärässä elementissä (Valid scope attribute) – suositus | Yhdessä taulukossa scope-attribuutti on sijoitettu td-elementtiin eikä th-elementtiin; Webwarden tunnistaa tämän virheeksi |
| Aktiivinen välilehti ei ilmaistu (WCAG 4.1.3) | Välilehtikomponentit eivät kerro, mikä välilehti on auki. |
| Puutteelliset otsikot (WCAG 2.4.2) | Joidenkin sivujen otsikot eivät kuvaa sivun sisältöä. |
| Geneeriset linkkitekstit (WCAG 2.4.7) | Linkkitekstit “Lue lisää” eivät kerro, mihin ne vievät. |
| Epäjohdonmukainen navigaatio (WCAG 3.2.3) | Osasta sivuja puuttuu navigaatiomekanismeja tai ne poikkeavat muista sivuista. |
| Sivulta puuttuu paikallinen navigaatio (sisällysluettelo) | Ajankohtaistasivulla ei ole context–navigationosiota; muilla pitkähköillä sivuilla kuten Yhteystiedot ja Saapuminensivuilla on lista linkkejä eri osioihin (esim. Asiakaspalvelu, Ravintolapalvelut) |
| Puuttuu sisäinen navigaatio (ei hyppylinkkejä osioihin) | Kalenterisivun lähdekoodi ei sisällä context–navigation-listaa, kun taas Yhteystiedotsivulla on selkeä sisäinen navigointi (#asiakaspalvelu, #sodexon-ravintolapalvelut, #laskutustiedot) |
| Pitkältä etusivulta puuttuu sisäisen navigaation listaus | Etusivu on pitkä ja siinä on useita osioita, mutta se ei sisällä context–navigation-osiota; vastaava sisällysluettelo löytyy Yhteystiedot ja Kaupunginteatterisivuilta (esim. Henkilökunta, Teatteritalo, Arkisto) |
| Nimettömät linkit ja ikonit (WCAG 2.4.4/4.1.2) | Linkkeinä ja painikkeina käytetään pelkkiä ikoneita tai kuvia ilman näkyvää tekstikuvausta tai aria-label -attribuuttia; Webwarden kertoo, että linkeillä ei ole saavutettavaa nimeä |
| Dokumentin kieli puuttuu (WCAG 3.1.1 – Document language) | Osa sivuista ei määritä html-elementissä lang-attribuuttia; Webwarden toteaa, että <html> ei sisällä lang-määrettä |
| Pääsisällöllä ei ole main-landmarkia | HTML-lähdekoodissa käytetään <nav>-elementtejä, mutta pääsisältö ei ole <main>-elementin tai role="main"-attribuutin sisällä; ruudunlukija ei voi hypätä suoraan pääsisältöön. |
| Piilotetut lipunostosivun painikkeet näkyvät ruudunlukijalle | Hero-osiossa “Osta liput” -painikkeet on piilotettu CSS:llä (`visibility:hidden`), mutta ilman aria-hidden, jolloin ruudunlukija voi silti kohdistaa painikkeen. |
| Mobiilinavigaation valikkokuvake ei ole näppäimistöllä saavutettavissa | Mobiilissa valikon avaava hamburger-kuvake on ankkuri `href="#"` eikä se saa Tab-fokusta eikä siinä ole aria-labelia |
| Piilotetut ’Osta liput’ -painikkeet eivät ole saavutettavissa näppäimistöllä | Etusivun hero-osiossa Osta liput -painikkeet on piilotettu CSS:llä (`visibility:hidden`), joten ne eivät saa Tab-fokusta mutta ovat silti ruudunlukijassa |
| Kalenterin kuukausinavigaation nuolilla ei ole nimeä | Kalenterin edellinen/seuraava -nuolet ovat ankkureita `href="#"` ilman näkyvää tekstiä tai aria-labelia; ruudunlukija ei tiedä mihin ne vievät. |
| Turhat linkit henkilökorteissa eivät johda mihinkään | Yhteystiedot-sivun henkilökortit on kääritty linkkeihin, joilla on `href="#"` mutta jotka eivät tee mitään; tabulaattori pysähtyy turhaan näihin linkkeihin |
Sovellettava lainsäädäntö ei kata tiettyjä sisältöjä
Hallinnoimallamme Youtube-kanavalla on ennen 23.9.2020 julkaistua videosisältöä. Osasta tällaisesta videosisällöstä puuttuu tekstitys ja/tai kuvailutulkkaus. Ennen 23.9.2020 julkaistua videosisältöä ei lain mukaan tarvitse tehdä takautuvasti saavutettavaksi tai poistaa.
Esitysarkistomme, julkaisut-hakemiston tiedostot ja erityisteknologioilla kuten virtuaalipanoraamoilla toteutetut osiot sivustomme sisällöstä eivät ole saavutettavissa, koska niihin sovelletaan tilapäisesti direktiivin (EU) 2016/2102 5 artiklassa tarkoitettua poikkeusta kohtuuttoman rasitteen vuoksi. Näiden osioiden tiedostot eivät ole kaikilta osiltaan saavutettavia, sillä tiedostojen määrä on huomattava eikä sivuston ylläpitäjällä ole kustannustehokkaita tai automatisoituja menetelmiä saattaa näitä sisältöjä sellaiseksi, että ne täyttäisivät saavutettavuusvaatimukset.
Tämän saavutettavuusselosteen laatiminen
Tämä seloste on laadittu 23.9.2020
Tämä seloste perustuu sekä kolmansien osapuolien että Helsingin Kaupunginteatterin itse tekemään arviointiin.
Sivuston saavutettavuus on arvioitu KnowIt Oy:n toimesta 27.8.2025 ja selostetta on tarkistettu viimeksi 20.9.2025
Palaute ja yhteystiedot
Jatkamme saavutettavuusongelmien kartoitusta ja korjaamme niitä osana sivustomme jatkuvaa kehitystyötä. Pyydämme ottamaan yhteyttä mikäli havaitset muita kuin yllä lueteltuja saavutettavuusongelmia sivustollamme
Voit antaa meille saavutettavuuspalautetta tai pyytää ohjeita sivustomme käyttämiseen sähköpostitse osoitteella [javascript protected email address]
Mikäli jätät yhteystietosi, vastaamme palautteeseesi mahdollisimman pian.
Täytäntöönpanomenettely
Mikäli huomaat sivuilla saavutettavuuspuutteita, otathan ensin yhteyttä meihin palveluntarjoajana. Vastaamme palautteisiin 14 päivän kuluessa, jos olet jättänyt yhteystietosi lomakkeella. Jos et ole tyytyväinen saamaasi vastaukseen tai et saa vastausta 14 päivän kuluessa, voit olla yhteydessä valvovaan viranomaiseen eli Liikenne- ja viestintävirasto Traficomiin. Liikenne- ja viestintävirasto Traficomin verkkosivuilla on kerrottu, kuinka huomautuksen voi tehdä ja miten se käsitellään.
Valvontaviranomaisen yhteystiedot
Liikenne- ja viestintävirasto Traficom
Digitaalisen esteettömyyden ja saavutettavuuden valvontayksikkö
PL 320
00059 TRAFICOM
Puhelinnumero vaihde 029 534 5000 (vaihde)