Verkkosivun ulkoasu on usein ensimmäinen asia, johon käyttäjä kiinnittää huomiota. Saavutettavuuden näkökulmasta kaikkein tärkeintä ei kuitenkaan ole se, miltä sivu näyttää, vaan se, miten sivu on rakennettu HTML-koodissa.
Hyvin suunniteltu HTML-rakenne tekee verkkosivusta ymmärrettävän selaimille, hakukoneille ja erityisesti avustaville teknologioille, kuten ruudunlukuohjelmille. Selkeä rakenne auttaa käyttäjiä hahmottamaan sivun sisältöä, liikkumaan sivulla tehokkaasti ja löytämään etsimänsä tiedon ilman turhaa kuormitusta.
Huono HTML-rakenne voi puolestaan tehdä muuten visuaalisesti näyttävästä sivusta vaikeasti käytettävän tai jopa täysin käyttökelvottoman osalle käyttäjistä.
Tässä artikkelissa on käsitelty aihetta tekniikan näkökulmasta ja suuri osa siitä on erityisen tärkeää sivustojen teknisille toteuttajille. Aihe on kuitenkin tärkeä kaikille ja myös sisällöntuottajien on syytä ymmärtää mistä on kyse.
HTML määrittää sivun rakenteen
HTML on se tekniikka, joka kertoo mitä sivun sisältö ja sen osat ovat – Paino sanalla mitä.
Tämä voi kuulostaa oudolta mutta HTML elementeillä ei ole ulkoasua vaan kaikkien elementtien sisältö näyttää samalta; Pääotsikon <h1> teksti on täysin saman näköistä kuin leipätekstin ilmaisevan tekstikappaleen. Kaikki ulkonäköön vaikuttava tulee CSS ulkoasutyyleistä. Ellei sivustolle ole lisätty omia ulkoasutyylejä (omaa CSS tiedostoa) käyttävät selaimet niin itseensä sisäänrakenneettua ulkoasutyylejä ns. “user agent stylesheet”.
HTML:n alkuperäinen tarkoitus ei ollut tehdä näyttäviä verkkosivuja, vaan kuvata sisältöjen merkityksiä ja suhteita. Jokaisella elementillä on oma tarkoituksensa.
Esimerkiksi:
• <h1> kertoo sivun pääotsikon
• <nav> kertoo navigaation
• <main> kertoo sivun varsinaisen sisällön
• <footer> kertoo alatunnisteen
Kun elementtejä käytetään niiden tarkoituksen mukaisesti, selain ja avustavat teknologiat ymmärtävät sivun rakenteen automaattisesti.
Semanttinen HTML auttaa käyttäjää
Semanttinen HTML tarkoittaa sitä, että elementit valitaan niiden merkityksen eikä ulkoasun perusteella. Usein sanotaan, että semanttisuus tuli HTML kieleen vasta HTML5 version myötä mutta kyllä semanttisuus on ollut olemassa aina. HTML5 versio ainoastaan esitteli uusia selkeämmin semanttisesti nimettyjä dokumentin rakenne-elementtjä kuten header, nav, main jne.
Mutta jo HTML alkuajoista alkaen elementeillä on ollut tarkoitus, johon niitä olisi tullut käyttää.
Sivuhuomiona mainittakoon, että selaimet ovat hyvin älykkäitä ja anteeksiantavia sovelluksia kun niitä tarkastellaan yleisimpien käyttötilanteiden ja -tapojen suhteen. Käytettäessä selainta sisällön tarkasteluun näön varaisesti hiirellä tai kosketusnäytöllä, osaa selain näyttää sisällön usein kehittäjän haluamalla tavalla vaikka se olisi toteutettu vakavastikin HTML-spesifikaation vastaisesti.
Huono tapa rakentaa otsikko:
<div class="big-title">
Yrityksen palvelut
</div>Parempi tapa:
<h1>Yrityksen palvelut</h1>Visuaalisesti molemmat voivat näyttää täysin samanlaisilta, mutta saavutettavuuden kannalta ero on valtava. Ruudunlukuohjelma tunnistaa jälkimmäisen oikeaksi pääotsikoksi. Käyttäjä voi siirtyä otsikosta toiseen nopeasti ja hahmottaa sivun rakenteen tehokkaasti.
Ensimmäisessä esimerkissä kyse ei edes ole otsikosta lainkaan! Kyse on vain tavallisesta tekstistä ilman merkitystä.
Vielä koodareille huomautuksena:
<div>elementtiä ei tulisi käyttää kuin viimeisenä vaihtoehtona ellei mikään muu semanttinen elementti ole kyseiseen tarkoitukseen sopiva!
Mikä on landmark eli maamerkkielementti?
HTML5 toi mukanaan joukon rakenteellisia elementtejä, joita kutsutaan usein maamerkeiksi eli landmarkeiksi. Niiden tarkoitus on jakaa sivu loogisiin alueisiin.
Tärkeimmät landmark-elementit ovat:
| Elementti | Tarkoitus |
|---|---|
<header> | Sivun tai osion ylätunniste |
<nav> | Navigaatio |
<main> | Sivun pääsisältö |
<aside> | Sivuun liittyvä oheissisältö |
<footer> | Sivun tai osion alatunniste |
Ruudunlukuohjelmat voivat listata nämä alueet käyttäjälle, jolloin sivun rakenteen ymmärtäminen on helpompaa ja sivulla liikkuminen nopeutuu huomattavasti.
Esimerkki hyvästä sivurakenteesta
<!doctype html>
<html lang="fi">
<head>
<meta name="charset" value="UTF-8">
<title>Saavutettavan sivun rakenne</title>
</head>
<body>
<header>
<nav aria-label="Päänavigaatio">
<ul>
<li><a href="/">Etusivu</a></li>
<li><a href="/artikkelit">Artikkelit</a></li>
<li><a href="/yhteystiedot">Yhteystiedot</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Miksi HTML-rakenne on tärkeä?</h2>
<p>
Selkeä rakenne auttaa käyttäjiä ja avustavia teknologioita.
</p>
</article>
</main>
<aside>
<h2>Aiheeseen liittyvät artikkelit</h2>
<article>
<h3>Millainen on hyvä linkki?</h3>
<p>artikkelin ote...</p>
</article>
</aside>
<footer>
©Saavutettavuusopas.fi 2026
</footer>
</body>
</html>Tällainen rakenne on:
• helposti ymmärrettävä
• looginen
• saavutettava
• ylläpidettävä
• hakukoneystävällinen
ARIA koodeista sivun rakenne-elementeissä
ARIA koodeista on muistettava, että ne ovat tarkoitettu ainoastaan avustaville tekniikoille ja niitä tulisi käyttää vain ja vasta kun riittävää informaatiota ei saada toteutettua spesifikaation mukaisella semanttisella HTML merkkauksella. ARIA koodien ylenmääräisellä kylvämisellä koodiin ei yleensä ole positiivisia vaikutuksia. Älä siis lisää ARIA koodeja sivuille ”varmuuden vuoksi” vaan vain ja ainoastaan kun tiedät sellaisen olevan tarpeen ja silloinkin vain kun tiedät, että teet sen varmasti oikein.
Ylimääräiset ja ennen kaikkea virheelliset ARIA koodit kääntyvät välittömästi tarkoitustaan vastaan ja itseasiassa usein heikentävät saavutettavuutta.
Landmark-elementtien ARIA-roolit
Useimmat HTML5:n landmark-elementit sisältävät automaattisesti niitä vastaavan ARIA-roolin. ARIA koodeilla voidaan ilmaista muillekin elementeille niiden rooli mutta ARIA:n käyttö on aina vain toissijainen keino. Käytä aina mieluummin semanttista HTML merkkausta.
| HTML-elementti | Vastaava ARIA-rooli |
|---|---|
<header> | banner |
<nav> | navigation |
<main> | main |
<aside> | complementary |
<footer> | contentinfo |
Esimerkiksi tämä (parempi):
<nav>vastaa käytännössä tätä (huonompi):
<div role="navigation>Ensisijaisesti kannattaa kuitenkin käyttää aina semanttista HTML-elementtiä eikä pelkkää ARIA-roolia.
Milloin ARIA-attribuutteja tarvitaan?
ARIA-attribuutteja tarvitaan yleensä silloin, kun pelkkä HTML ei riitä kuvaamaan käyttöliittymää.
Esimerkiksi jos sivulla on useita navigaatioita, ne kannattaa nimetä.
<nav aria-label="Päänavigaatio">ja:
<nav aria-label="Alatunnisteen navigaatio">Tällöin ruudunlukuohjelman käyttäjä ymmärtää, missä navigaatiossa hän liikkuu. Ilman nimeämistä käyttäjä saattaa kuulla vain: “navigation” mutta nimeämisen jälkeen: “Päänavigaatio”
Vain yksi main elementti per sivu
Yksi tärkeimmistä saavutettavuuden säännöistä on, että sivulla tulisi olla vain yksi <main>-elementti.
Se kertoo avustaville teknologioille, missä varsinainen sisältö sijaitsee. Ruudunlukuohjelmien käyttäjät voivat usein hypätä suoraan pääsisältöön juuri tämän elementin avulla. Tämän alueen ja samalla myös ns. hyppylinkin kohteen tulisi olla sivun pääsisältö. Tarkemmin pääsisällössä oleva sivun pääotsikko eli <h1>-elementti.
Otsikot ovat osa sivun rakennetta
Landmark-elementit eivät yksin riitä. Myös otsikkotasojen tulee muodostaa looginen rakenne.
Hyvä rakenne:
<h1>Sivun otsikko</h1>
<h2>Pääaihe</h2>
<h3>Aiheen tarkennus</h3>
<h2>Seuraava aihe</h2>Huono rakenne:
<h1>Sivun otsikko</h1>
<h4>Satunnainen alaotsikko</h4>Tässä esimerkissä on koodin mukaisessa järjestyksessä h1 tason otsikon jälkeen seuraaana h4 tason otsikko. Välistä on jäänyt h2 ja h3 tason otsikot. Näin ei saa milloinkaan toteuttaaa sisällön rakennetta.
Ruudunlukuohjelmien käyttäjät liikkuvat usein pelkkien otsikoiden avulla. Jos otsikkotasot hyppivät sattumanvaraisesti, sisällön hahmottaminen vaikeutuu. Huono HTML-rakenne aiheuttaa todellisia ongelmia.
Visuaalisesti toimiva sivu voi olla teknisesti erittäin vaikea käyttää ja huonosti saavutettava.
Esimerkiksi tällainen rakenne:
<div onclick="location.href='/tuote'">
Tuote-esittely
</div>Tuote-esittely voi näyttää linkiltä, mutta ei ole oikea linkki.
Parempi ratkaisu:
<a href="/tuote">
Tuote-esittely
</a>
Tämä on oikea linkki. Elementti on sitä mitä sen tarkoitetaan olevan vain jos se on toteutettu kyseiseen käyttöön tarkoitetulla HTML elementillä.
Oikea HTML-elementti tuo automaattisesti:
• näppäimistötuen
• ruudunlukijatuen
• selaimen oletustoiminnot
• paremman saavutettavuuden
Selkeän HTML rakenteen hyötyjä
Selkeä rakenne helpottaa myös ylläpitoa. Hyvä HTML-rakenne ei hyödytä vain käyttäjiä vaan myös:
• kehittäjiä
• sisällöntuottajia
• hakukoneita
• saavutettavuustestaajia
• tulevia ylläpitäjiä
Selkeä semanttinen rakenne tekee koodista helpommin luettavaa ja vähentää virheiden määrää.
Saavutettavuus alkaa rakenteesta
Moni saavutettavuusongelma syntyy jo sivun perusrakenteessa. Jos HTML on rakennettu väärin, ongelmia ei yleensä pystytä korjaamaan pelkällä CSS:llä tai JavaScriptillä. Eikä varsinkaan ARIA-koodeilla.
Hyvä saavutettavuus alkaa:
• oikeista HTML-elementeistä
• loogisesta rakenteesta
• semanttisesta merkityksestä
• selkeästä navigaatiosta
Kun rakenne on kunnossa, myös avustavat teknologiat voivat tulkita sivun oikein.
Yhteenveto
HTML-rakenne ei ole vain tekninen osa sivua. Se on koko verkkosivun perusta.
Hyvin rakennettu sivu:
• on helpompi käyttää
• toimii paremmin avustavilla teknologioilla
• tukee hakukonenäkyvyyttä
• helpottaa ylläpitoa
• tarjoaa paremman käyttökokemuksen kaikille käyttäjille
Saavutettavuus ei synny lisäämällä sivulle muutamaa ARIA-attribuuttia jälkikäteen. Se syntyy rakentamalla sivu alusta asti oikein.
Lopuksi
Ja miksi tästä kirjoitan? – koska aivan liian usein näen verkkosivujen koodissa sellaisia virheitä ja toteutustapoja, joita ei pitäisi. Usein nämä ovat syntyneet sinänsä ammattitaitoiseten webkehittäjien toimeesta, joiden olettaisi osaavan ja tietävän mutta ehkä olen liian optimistinen. Kyse on HTML-koodin oletusarvoisesta väheksymisestä ja perusteiden osaamattomuudesta sekä siitä ettei ymmärretä miten HTML-koodia tulkitaan eri välineillä (user agents) eli muillakin kuin selaimilla. Ei ymmärretä, että sisältöä käyttävät myös henkilöt, jotka eivät käytä hahmota, ymmärrä ja käytä sitä samoin kuin tekijä ja tarvitsee vielä erilaisia teknisiä välineitä sisällön kuluttamiseen.
Nämä asiat olisivat helppoja korjata ja siten edistää merkittävästi saavutettavuutta. Vetominen siihen, että jokin käytetty sovelluskehys (framework), nyt vain tuottaa tällaista koodia ei ole riittävä selitys. Sitten kyseistä sovelluskehystä on käytetävä toisella tavalla, sovelluskehystä on korjattava tai se on vaihdettava toiseen. Ja jos nyt oikein provosoivasti sanon, niin kopioikaa koodinne paremmasta lähteestä.
Olen pitkään kouluttanut myös verkon tekniikoita, joten jos aihe jäi vaivaamaan, varaa aika keskusteluhetkeen, niin katsotaan miten voisin olla avuksi.