Kategoria: Saavutettavuus

HTML: verkkosivujen merkintäkieli ja sen historia

HTML (Hypertext Markup Language, suomeksi hypertekstin merkintäkieli) on avoimesti standardoitu merkintäkieli, jolla kuvataan hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML:llä merkitään myös tekstin rakenne – esimerkiksi mikä osa on otsikkoa ja mikä leipätekstiä – ja se tunnetaan erityisesti kielenä, jolla verkkosivut kirjoitetaan. Tässä artikkelissa kerromme, miten HTML toimii, mitkä ovat sen tärkeimmät elementit ja miten kieli on kehittynyt Tim Berners-Leen ensimmäisestä luonnoksesta HTML5:een.

Elementit ja tunnisteet

HTML-koodi on rakenteista tekstiä, joka muodostuu sisäkkäisistä ja peräkkäisistä elementeistä. Elementtejä edustavat kulmasulkein merkityt tunnisteet eli tägit, jotka nimeävät elementin tyypin. Selaimet eivät näytä tunnisteita sellaisinaan, vaan käsittelevät niitä ohjeina sivun sisällön jäsentämiseen. Tavallisesti elementissä on aloitustunniste, vinoviivalla merkitty lopetustunniste ja niiden välinen sisältö:

<tunniste attribuutti="arvo">elementin sisältö</tunniste>

Aloitustunnisteessa voi olla attribuutteja, jotka määrittävät elementin ominaisuuksia tarkemmin. Osassa elementeistä ei ole lainkaan sisältöä – esimerkiksi rivinvaihdon tuottava <br /> ei tarvitse lopetustunnistetta.

Rakenteellinen ja esityksellinen merkkaus

Rakenteellinen merkkaus kertoo elementin tarkoituksen. Esimerkiksi <h2> tarkoittaa toisen tason otsikkoa. Esityksellinen merkkaus taas määrittää vain ulkoasun: <b> tarkoittaa lihavointia, mutta ei kerro, miten esimerkiksi puhesyntetisaattorin pitäisi käsitellä tekstiä. Rakenteellinen <strong> puolestaan tarkoittaa, että sisältö esitetään voimakkaasti – lihavoituna tai painokkaasti luettuna. Suurin osa esityksellisistä merkkauksista katsottiin vanhentuneiksi jo HTML 4.0:ssa, ja ulkoasu kuvataan nykyään erillisillä CSS-tyyliohjeilla.

Tärkeimmät elementit

  • Otsikot: <h1>–<h6>, joista h1 on ylin taso.
  • Kappaleet ja rivinvaihdot: <p> jakaa sivun kappaleisiin, <br /> katkaisee rivin muuttamatta rakennetta.
  • Linkit: ankkurielementti <a>, jonka href-attribuutti määrittää kohteen URL-osoitteen.
  • Listat: järjestetty lista <ol>, järjestämätön lista <ul> ja listan alkiot <li>.
  • Kuvat: <img>, jossa vaaditaan src-attribuutti (polku kuvaan) ja alt-attribuutti (vaihtoehtoinen teksti).
  • Canvas: HTML5:n myötä tullut elementti 2D-grafiikan dynaamiseen piirtämiseen, jota käytetään erityisesti 2D-peleissä.

Erikoismerkkejä voi lisätä merkki- ja nimiviittauksilla, jotka alkavat &-merkillä ja päättyvät puolipisteeseen. Huomaa myös, että koodin peräkkäiset välilyönnit ja rivinvaihdot näkyvät selaimessa yhtenä välilyöntinä.

HTML:n historia

HTML:n historia alkoi vuonna 1989, kun Tim Berners-Lee ja Robert Cailliau hahmottelivat korviketta CERNin kirjavalle dokumenttiformaatille. Rinnalle suunniteltiin yksinkertainen HTTP-protokolla. CERN käynnisti oman WWW-palvelimensa vuonna 1991, ja Berners-Lee julkaisi ensimmäisen kuvauksen HTML:stä saman vuoden lopulla. Siinä oli 22 elementtityyppiä, joista 13 oli yhä käytössä HTML 4:ssä. HTML-normia ylläpitää vuonna 1994 perustettu W3C (World Wide Web Consortium).

  • HTML 2.0 (RFC 1866) julkaistiin IETF:n työryhmän laatimana.
  • HTML 3.2 julkaistiin W3C:n toimesta tammikuussa 1997, ja siihen lisättiin pääosa Netscapen ulkoasukoodeista.
  • HTML 4.0 julkaistiin loppuvuodesta 1997, ja sitä päivitettiin HTML 4.01:ksi joulukuussa 1999. HTML 4.01:n XML-versiona syntyi XHTML.
  • HTML5: kehitystyön aloitti WHATWG vuonna 2004, ensimmäinen vedos julkaistiin tammikuussa 2008, ja suositus hyväksyttiin lokakuussa 2014. Uusia ominaisuuksia olivat muun muassa canvas- ja video-elementit. Päivitysversioita ovat HTML 5.1 ja 5.2.

Selainsodat ja CSS

HTML:n alkuperäinen tarkoitus oli kuvata sivun rakennetta eikä ulkoasua, mutta sivujen tekijät halusivat pian vaikuttaa myös ulkonäköön. Selainvalmistajat vastasivat lisäämällä omia elementtejään, ja pitkään HTML:n kehitys olikin lähinnä Netscapen ja Microsoftin varassa. Siirtyminen ulkoasun kuvaamiseen erillisillä CSS-tyyliohjeilla yksinkertaisti HTML:ää ja helpotti sivujen luomista ja päivittämistä.

HTML ja saavutettavuus

Hyvin rakennettu HTML on saavutettavan verkkosivun perusta. Kun sisällön rakenne on merkitty oikein, sivua voi käyttää erilaisilla päätelaitteilla ja apuvälineillä, kuten ruudunlukuohjelmilla. Kuvien alt-tekstit, oikeat otsikkotasot ja rakenteelliset elementit auttavat kaikkia käyttäjiä.

HTML, CSS ja JavaScript

Englanninkielisen Wikipedian mukaan HTML on vakiintunut merkintäkieli verkkoselaimessa näytettäville dokumenteille. Se määrittää verkkosisällön sisällön ja rakenteen, ja sen tukena käytetään usein CSS-tyylitiedostoja ja JavaScriptin kaltaisia skriptikieliä. Selaimet vastaanottavat HTML-dokumentit verkkopalvelimelta tai paikallisesta tallennustilasta ja muuntavat ne multimediaa sisältäviksi verkkosivuiksi. JavaScript vaikuttaa sivun toimintaan ja sisältöön, kun taas CSS määrittää ulkoasun ja asettelun. W3C on suositellut CSS:n käyttöä esityksellisen HTML:n sijaan vuodesta 1997 lähtien.

Versiohistorian tarkemmat päivämäärät

  • Lokakuu 1991: CERNin epävirallinen ”HTML Tags” -dokumentti mainittiin julkisesti ensimmäisen kerran.
  • 24.11.1995: HTML 2.0 julkaistiin RFC 1866:na. Täydentävät RFC:t toivat tiedostojen lähetyksen lomakkeella, taulukot, asiakaspuolen kuvakartat ja kansainvälistämisen.
  • 14.1.1997: HTML 3.2 julkaistiin W3C:n suosituksena. Se oli ensimmäinen pelkästään W3C:n kehittämä versio, ja Netscapen blink- ja Microsoftin marquee-elementit jätettiin pois yritysten yhteisellä sopimuksella.
  • 18.12.1997: HTML 4.0 julkaistiin kolmena muunnelmana: Strict, Transitional ja Frameset.
  • 24.12.1999: HTML 4.01 julkaistiin W3C:n suosituksena, ja toukokuussa 2000 siitä tehtiin ISO/IEC 15445:2000 -standardi.
  • 28.10.2014: HTML5 julkaistiin W3C:n suosituksena; HTML 5.1 seurasi 1.11.2016 ja HTML 5.2 14.12.2017.

HTML 4.01:n jälkeen uusia HTML-versioita ei julkaistu moneen vuoteen, koska W3C:n HTML-työryhmä keskittyi XML-pohjaiseen XHTML:ään.

Lähteet

Saavutettavuus: mitä digitaalinen saavutettavuus tarkoittaa

Saavutettavuus on Traficomin määritelmän mukaan esteettömyyttä digitaalisessa ympäristössä: ihmisten erilaisuuden ja moninaisuuden huomioimista verkkosivujen ja mobiilisovellusten suunnittelussa ja toteutuksessa. Tavoitteena on, että jokaisella on yhdenvertaiset mahdollisuudet käyttää digitaalisia tuotteita ja palveluita. Tässä artikkelissa käymme läpi, mitä saavutettavuus tarkoittaa, mitä EU:n direktiivit ja Suomen lainsäädäntö edellyttävät ja miten saavutettavuus toteutetaan käytännössä.

Mitä saavutettavuus tarkoittaa?

Saavutettavuus ei tarkoita pelkästään verkkosivujen tai mobiilisovellusten helppokäyttöisyyttä, vaan se koskee kaikenlaisia digitaalisia ohjelmistoja. Se liittyy osallistumiseen moniin asioihin, kuten työhön sekä palvelujen, tuotteiden ja tiedon käyttöön. Verkkokehityksessä saavutettavuudesta käytetään joskus lyhennettä A11y: a, 11 kirjainta ja y englannin sanasta accessibility. Kaikki käyttäjät hyötyvät saavutettavuudesta, mutta joillekin se on käytön edellytys, kun toisille se on mukavuustekijä.

EU:n saavutettavuusdirektiivi

Julkista sektoria koskee saavutettavuusdirektiivi (2016/2102), joka viittaa eurooppalaiseen standardiin EN 301 549 ja sitä kautta kansainväliseen WCAG-ohjeistukseen. Määräajat olivat:

  • 23.9.2018 jälkeen julkaistut julkisen sektorin verkkosivustot: 23.9.2019 mennessä.
  • Ennen 23.9.2018 julkaistut sivustot: 23.9.2020 mennessä.
  • Julkisen sektorin mobiilisovellukset: 23.6.2021 mennessä.

Esteettömyysdirektiivi ja verkkokaupat

Esteettömyysdirektiivi koskee monia julkisten ja yksityisten toimijoiden tuotteita ja palveluita. Sitä alettiin soveltaa 28.6.2025 alkaen, ja Suomessa se toteutettiin uudella lailla eräiden tuotteiden esteettömyysvaatimuksista sekä muutoksilla lakiin digitaalisten palvelujen tarjoamisesta. Direktiivi koskee esimerkiksi:

  • tietokoneita ja käyttöjärjestelmiä, älypuhelimia ja e-kirjojen lukulaitteita
  • maksupäätteitä sekä pankki- ja lippuautomaatteja
  • tietoliikenne- ja viestintäpalveluita sekä kuluttajapankkipalveluita
  • liikennepalveluiden verkkosivuja, sovelluksia ja sähköisiä matkalippuja
  • sähköisiä kirjoja ja verkkokauppaa

Suomessa saavutettavuutta valvovat Traficom ja Etelä-Suomen aluehallintoviraston saavutettavuusvalvonnan yksikkö, ja tavoitteena on ollut siirtää valvontatehtävät kokonaan Traficomille.

WCAG:n neljä periaatetta

Tärkeimpiä ohjeita ovat W3C:n WAI-aloitteen (Web Accessibility Initiative) ja WCAG:n (Web Content Accessibility Guidelines) suositukset. WCAG jakautuu neljään periaatteeseen:

  • Havaittavuus: sisältö on voitava havaita yhdellä tai useammalla aistilla.
  • Hallittavuus: käyttöliittymää on voitava ohjata hiirellä, näppäimistöllä, äänikomennoilla tai muulla tavalla.
  • Ymmärrettävyys: sisällön on oltava käyttäjille ymmärrettävää.
  • Toimintavarmuus: sisällössä käytetään standardeja, jotka toimivat eri selaimilla nyt ja tulevaisuudessa.

Saavutettavuus käytännössä

Verkkosivun on tärkeää noudattaa HTML-suosituksia: kun sivusto on tehty teknisesti hyvin ja sisällön rakenne on merkitty oikein, sitä voi käyttää erilaisilla päätelaitteilla ja apuvälineillä.

  • Sokeat käyttäjät käyttävät ruudunlukuohjelmaa tai pistenäyttöä. Kuville on aina annettava tekstivastine (alt-attribuutti), jotta kuvan olennainen tieto välittyy.
  • Heikkonäköiset käyttävät suurta tekstikokoa tai ruudunsuurennusta, joten tekstin on rivityttävä uudelleen ilman vaakavieritystä.
  • Liikuntavammaiset voivat käyttää erilaisia ohjauslaitteita tai puheohjausta, ja sivujen on toimittava myös pelkällä näppäimistöllä.
  • Kuulovammaisille tarjotaan videoihin tekstitys ja äänitallenteisiin tekstimuotoinen käsikirjoitus.

Myös videopeleissä on saavutettavuusasetuksia ohjaukseen, näyttöön ja ääniin, ja pelikonsoleihin on kehitetty adaptiivisia ohjaimia.

Kognitiivinen saavutettavuus ja selkokieli

Kognitiivisista vaikeuksista kärsivät, kuten ihmiset, joilla on oppimisvaikeuksia, sekä vierasta kieltä vasta opettelevat tarvitsevat selkokielisiä sivuja. Ymmärtämistä voi helpottaa myös asiaa selventävillä kuvilla, kaavioilla ja luetteloilla. Englanninkielisen Wikipedian mukaan saavutettavuus hyödyttää myös ihmisiä, joilla on tilannekohtainen rajoite – esimerkiksi vauvaa kantava ihminen voi olla hetkellisesti yhden käden varassa.

Mitä tarpeita saavutettavuus palvelee?

  • Näkö: sokeus, heikkonäköisyys ja värisokeuden eri muodot. Linkkien alleviivaus värin lisäksi auttaa värisokeita huomaamaan ne.
  • Motoriikka: esimerkiksi vapina tai hienomotoriikan heikentyminen Parkinsonin taudin, CP-vamman tai aivohalvauksen vuoksi. Suuret klikattavat alueet auttavat käyttäjiä, jotka eivät pysty ohjaamaan hiirtä tarkasti.
  • Kuulo: kuurous ja kuulovammat – tekstitys, lukujako ja viittomakielinen versio tekevät videosta ymmärrettävän.
  • Kohtaukset: vilkkuvat efektit voivat laukaista valoherkkyysepilepsiakohtauksia, joten ne kannattaa välttää tai tehdä valinnaisiksi.
  • Kognitio: esimerkiksi lukivaikeus, laskemisen vaikeus tai muistiin ja tarkkaavaisuuteen vaikuttavat tilat.

Apuvälineet verkon käytössä

Vammaiset käyttäjät selaavat verkkoa erilaisten apuvälineiden avulla. Ruudunlukuohjelma lukee näytön sisällön syntetisoidulla puheella, pistenäyttö muuntaa tekstin pistekirjoitukseksi ja ruudunsuurennusohjelma suurentaa näytön sisältöä. Puheentunnistusohjelmalla tietokonetta voi ohjata puhekomennoilla tai sanella tekstiä, ja näppäimistön päälle asetettavat kalvot helpottavat kirjoittamista motoriikan vaikeuksista kärsiville.

WCAG:n kehitys

W3C:n Web Accessibility Initiative julkaisi WCAG 1.0 -ohjeistuksen vuonna 1999. WCAG 2.0 julkaistiin suosituksena 11.12.2008, ja siitä tuli laajalti hyväksytty ohjeistus saavutettavien sivustojen tekemiseen. WCAG 2.0 koostuu neljästä periaatteesta, 12 ohjeesta ja 65 testattavasta onnistumiskriteeristä. Vuonna 2012 se julkaistiin myös ISO/IEC 40500:2012 -standardina, ja vuonna 2018 julkaistiin sitä laajentava WCAG 2.1. Vuoden 2018 WebAIM-kyselyn mukaan lähes 93 prosenttia saavutettavuuden ammattilaisista ei ollut saanut aiheesta muodollista koulutusta.

Lähteet

Saavutettavuusvaatimukset verkkokaupoille: mitä digipalvelulaki edellyttää

Saavutettavuus ei ole enää vain julkisen sektorin asia. EU:n esteettömyysdirektiivin myötä myös monien yksityisten yritysten verkkopalveluilta vaaditaan saavutettavuutta, ja Suomessa vaatimukset ovat olleet voimassa 28.6.2025 alkaen. Verkkokauppaa pyörittävä tai uutta verkkokauppaa rakennuttava yritys kysyy usein: koskeeko tämä meitä, mitä pitää tehdä ja mitä tapahtuu, jos vaatimukset eivät täyty? Kokosimme Traficomin ohjeiden pohjalta käytännön oppaan verkkosivujen ja verkkokauppojen kehittäjille.

Mikä laki ja mitä palveluja se koskee?

Suomessa vaatimukset on pantu toimeen digipalvelulailla (laki digitaalisten palvelujen tarjoamisesta). Lain 3 a luku koskee tiettyjä kuluttajille suunnattuja digitaalisia palveluja: verkkokauppoja, sähkökirjoja, osaa henkilöliikenteen ja pankkien palveluista, audiovisuaaliseen sisältöön pääsyn tarjoavia palveluja sekä viestintäpalveluja. Näiden palvelujen on täytettävä siirtymäajan jälkeen digipalvelulain yleiset saavutettavuusvaatimukset sekä palvelukohtaiset lisävaatimukset. Valvontaviranomainen on Traficom.

Käytännössä verkkokauppa tarkoittaa tässä laajasti palvelua, jossa kuluttaja voi tehdä sopimuksen tuotteen tai palvelun ostamisesta verkossa – siis myös esimerkiksi ajanvaraus- ja lipunmyyntipalveluja, joissa maksetaan verkossa.

Mikroyritysten poikkeus

Palveluja koskevista vaatimuksista on vapautettu mikroyritykset, joilla on alle 10 työntekijää ja joiden vuosiliikevaihto tai taseen loppusumma on enintään 2 miljoonaa euroa. Traficom kuitenkin kannustaa myös pienimpiä yrityksiä noudattamaan vaatimuksia. Saavutettava verkkokauppa palvelee suurempaa asiakaskuntaa, toimii paremmin mobiilissa ja on usein myös hakukoneystävällisempi.

Mitä vaatimukset tarkoittavat teknisesti?

Digipalvelulain yleiset vaatimukset perustuvat eurooppalaiseen EN 301 549 -standardiin, joka viittaa verkkosisältöjen osalta WCAG 2.1 -ohjeistuksen AA-tasoon. Kehittäjälle tämä tarkoittaa tuttuja periaatteita: sisällön on oltava havaittavaa, hallittavaa, ymmärrettävää ja toimintavarmaa. Verkkokaupassa tyypillisiä tarkistettavia asioita ovat:

  • Näppäimistökäyttö: koko ostopolku tuotehausta kassalle onnistuu ilman hiirtä, ja fokus näkyy selvästi.
  • Tekstivastineet: tuotekuvilla on kuvaavat alt-tekstit, ja pelkästään kuvana esitetyt tiedot (esim. kokotaulukot) löytyvät myös tekstinä.
  • Lomakkeet: kentillä on näkyvät ja ohjelmallisesti liitetyt nimikkeet, ja virheilmoitukset kertovat, mitä pitää korjata.
  • Kontrastit ja tekstin koko: teksti on luettavaa ja sivu toimii suurennettuna ilman vaakavieritystä.
  • Ruudunlukijat: otsikkorakenne on looginen, painikkeilla on ymmärrettävät nimet ja dynaamiset muutokset (esim. ostoskoriin lisääminen) ilmoitetaan avustavalle teknologialle.
  • Aikarajat: istunto ei vanhene kesken maksamisen ilman varoitusta.

Erityistä huomiota kannattaa kiinnittää kolmannen osapuolen komponentteihin, kuten maksupalveluihin, chat-ikkunoihin ja evästebannereihin. Ne ovat osa palvelua, ja niiden puutteet näkyvät käyttäjälle samalla tavalla kuin omat.

Verkkokaupan lisävaatimus

Yleisten vaatimusten lisäksi verkkokaupan on annettava tietoa myymiensä tuotteiden ja palvelujen esteettömyydestä ja saavutettavuudesta, jos tuotteesta vastaava talouden toimija, kuten valmistaja tai maahantuoja, on toimittanut nämä tiedot. Käytännössä tuotetietojärjestelmään kannattaa varata kenttä esteettömyystiedoille.

Saavutettavuusseloste

Palvelussa on oltava saavutettavuusseloste, jossa kuvataan palvelun saavutettavuuden tila. 3 a luvun palveluissa selosteessa on lisäksi oltava yleinen kuvaus palvelusta, tieto palvelun käyttöön tarvittavista tuotteista sekä kuvaus siitä, miten palvelukohtaiset lisävaatimukset on huomioitu. Traficom tarjoaa selosteen laatimisen tueksi työkalun.

Jos vaatimuksia ei pysty täyttämään

Vaatimuksista voi poiketa vain, jos saavutettavuusarvioinnin perusteella voidaan osoittaa, että vaatimusten noudattaminen aiheuttaisi kohtuuttoman rasitteen tai muuttaisi palvelun perusluonnetta perustavanlaatuisesti. Arvioinnissa otetaan huomioon kustannukset suhteessa toiminta- ja pääomakustannuksiin ja nettoliikevaihtoon sekä hyödyt erityisesti vammaisille käyttäjille. Arviointi on dokumentoitava, tehtävä uudelleen palvelun muuttuessa tai vähintään viiden vuoden välein ja säilytettävä viisi vuotta. Kohtuuttomaan rasitteeseen ei voi vedota, jos yritys on saanut ulkopuolista rahoitusta nimenomaan saavutettavuuden parantamiseen.

Jos palvelu ei täytä vaatimuksia, palveluntarjoajan on ilmoitettava valvontaviranomaiselle puutteista ja korjaavista toimenpiteistä. Myös poikkeamisperusteeseen vetoaminen on ilmoitettava.

Käytännön tiekartta kehitystiimille

  1. Selvitä, kuuluuko yritys lain piiriin vai onko se mikroyritys.
  2. Tee lähtötasoarvio automaattisilla työkaluilla ja manuaalisella testauksella (näppäimistö, ruudunlukija, zoomaus).
  3. Priorisoi ostopolun kriittiset kohdat: haku, tuotesivu, ostoskori, kassa ja maksu.
  4. Vaadi saavutettavuus myös teema-, lisäosa- ja maksupalvelutoimittajilta.
  5. Julkaise saavutettavuusseloste ja päivitä sitä kehityksen edetessä.
  6. Lisää saavutettavuustestaus pysyväksi osaksi julkaisuprosessia.

Saavutettavuus on parhaimmillaan laatutyötä, joka hyödyttää kaikkia käyttäjiä. Kun se otetaan huomioon jo suunnitteluvaiheessa, se tulee myös selvästi edullisemmaksi kuin jälkikäteen tehtävä korjaaminen.

Artikkeli on yleistä tietoa eikä oikeudellista neuvontaa. Tarkista oman palvelusi velvoitteet Traficomin saavutettavuusvaatimukset-sivustolta.

Lähteet

Scroll to top