Hyödynnä kesäkampanjan etuhinnat 100-300 €/kurssi – etu voimassa koodilla ”kesä26” 1.6.-14.8.2026 tulleisiin kurssi-ilmoittautumisiin valituista koulutuksista. Tarkemmat tiedot kesäkampanjan kursseista ja ehdoista löydät Kampanjat-sivulta.

Saavutettava HTML

Tämä on selkeä ja hyödyllinen jatkokurssi HTML perusteet hallitseville. Saavutettavuus ei synny pelkällä HTML:llä, mutta semanttisesti oikein rakennettu HTML on saavutettavan verkkopalvelun välttämätön perusta. Opi rakentamaan verkkosivujen HTML niin, että sisältö ja käyttöliittymän toiminnot välittyvät oikein myös avustaville teknologioille.
corellia_web

kesto 1 pv

890 + ALV
  • Kurssimuoto: Etä

Rakenna verkkosivun saavutettavuudelle kestävä tekninen perusta

Oikein kirjoitettu HTML välittää sisällön rakenteen ja käyttöliittymän merkityksen selaimille sekä avustaville teknologioille. Kun käytät HTML-elementtejä niiden tarkoituksen mukaisesti, suuri osa saavutettavuudesta toteutuu luontevasti jo sivua rakennettaessa.

Tällä käytännönläheisellä kurssilla opit toteuttamaan verkkosivujen rakenteet, navigaation, linkit, painikkeet, lomakkeet, taulukot ja muut tavalliset käyttöliittymäelementit saavutettavasti. Opit myös tunnistamaan tilanteet, joissa natiivi HTML riittää ja milloin tarvitaan täydentäviä ARIA-määritteitä.

Hyvä saavutettavuus alkaa oikeasta HTMLä

Verkkosivu voi näyttää silmämääräisesti toimivalta, vaikka sen rakenne olisi avustavalle teknologialle epäselvä. Otsikolta näyttävä teksti ei ole otsikko, jos se on toteutettu tavallisena tekstikappaleena. Linkiltä näyttävä elementti ei välttämättä kerro käyttäjälle, mitä siitä tapahtuu. Myös painikkeiden, lomakekenttien ja navigaation merkitys voi jäädä ruudunlukijalta tunnistamatta.

Semanttisesti oikein kirjoitettu HTML antaa sisällölle ja käyttöliittymän osille niiden todellisen merkityksen. Samalla selain tarjoaa monille elementeille valmiiksi oikean näppäimistötoiminnan, roolin ja avustavien teknologioiden tarvitseman informaation.

Kurssilla opit käyttämään HTML:ää tarkoituksenmukaisesti saavutettavan toteutuksen perustana. Samalla tarkastelemme yleisiä toteutustapoja, jotka rikkovat HTML sisäänrakennetun saavutettavuuden.

Mitä opit tällä kurssilla?

Kurssin jälkeen osaat:

  • rakentaa sivulle loogisen ja semanttisen HTML-rakenteen
  • käyttää otsikoita, alue-elementtejä ja muita rakenteita tarkoituksenmukaisesti
  • erottaa linkin ja painikkeen tehtävät toisistaan
  • toteuttaa käyttöliittymän perustoiminnot näppäimistöllä käytettäviksi
  • yhdistää lomakekentät, nimilaput, ohjeet ja virheilmoitukset toisiinsa
  • toteuttaa tietotaulukon niin, että sen rakenne välittyy myös ruudunlukijalle
  • tarjota kuville ja muulle ei-tekstuaaliselle sisällölle tarvittavat tekstivastineet
  • tunnistaa HTML saavutettavuuteen vaikuttavia virheitä
  • käyttää ARIA-määritteitä vain silloin, kun natiivi HTML ei tarjoa tarvittavaa semantiikkaa
  • tarkistaa toteutuksen rakennetta selaimen kehittäjätyökaluilla, näppäimistöllä ja ruudunlukijan avulla.

Kenelle kurssi sopii?

Kurssi on tarkoitettu henkilöille, jotka rakentavat tai muokkaavat verkkosivujen ja verkkopalvelujen HTML-rakenteita. Se sopii erityisesti:

  • front-end-kehittäjille ja verkkosivujen toteuttajille
  • WordPress-teemojen ja muiden julkaisujärjestelmäratkaisujen kehittäjille
  • teknisille ylläpitäjille

Mitä taitoja tarvitset ennen kurssia?

Osallistujalta edellytetään HTML perusteiden tuntemista. Sinun tulisi ymmärtää HTML-dokumentin rakenne sekä tavallisimpien elementtien ja attribuuttien käyttö.

CSS ja JavaScriptin osaamisesta on hyötyä, mutta kurssi ei edellytä niiden syvällistä hallintaa. Koulutuksen pääpaino on HTML-rakenteessa ja selaimen muodostamassa saavutettavuustiedossa.

Kurssin toteutustapa: Kurssi toteutetaan pääsääntöisesti etäkoulutuksena. Sovittaessa kurssi voidaan totettaa myös luokkakoulutuksena tai asiakkaan tiloissa.

Tietoa koulutuksista

Luokkakoulutukset
Corellian koulutustiloissa:
Kalevankatu 9 A, Helsinki

Kiinnostaako asiakaskohtainen toteutus? Meillä onnistuu.

Kurssin olennainen sisältö

Semanttinen HTML saavutettavuuden perustana

  • Mitä semanttinen HTML tarkoittaa?
  • Miten selain ja avustavat teknologiat tulkitsevat HTML:ää?
  • HTML-elementin nimi, rooli, tila ja arvo
  • Natiivien HTML-elementtien sisäänrakennettu saavutettavuus
  • Milloin yleinen div- tai span-elementti ei riitä?
  • DOM-rakenteen ja visuaalisen esitysjärjestyksen suhde
  • HTML validiuden merkitys saavutettavuudelle

Dokumentin kieli, nimi ja perusrakenne

  • Sivun pääkielen määrittäminen
  • Tekstin sisäiset kielenvaihdokset
  • Kuvaava sivun nimi
  • Sisällön looginen lukujärjestys
  • Sivun rakenteen välittyminen ilman visuaalista esitystä

Sivun alueet ja navigaatio

  • Sivun keskeiset alueet: ylätunniste, navigaatio, pääsisältö ja alatunniste
  • Semanttiset alue-elementit
  • Useiden navigaatioalueiden nimeäminen
  • Pääsisältöön siirtymisen mahdollistaminen
  • Toistuvien sisältöjen ohittaminen
  • Milloin tarvitaan täydentäviä landmark-rooleja?

Otsikot ja sisällön rakenne

  • Sivun pääotsikko ja otsikkotasot
  • Looginen otsikkohierarkia
  • Otsikkotason valitseminen rakenteen, ei ulkoasun perusteella
  • Sisältöosiot ja niitä kuvaavat otsikot
  • Luettelot, lainaukset ja muut sisältörakenteet
  • Yleiset otsikointivirheet

Linkit, painikkeet ja käyttöliittymän kontrollit

  • Linkin ja painikkeen erilaiset tehtävät
  • Kuvaavat linkkitekstit
  • Natiivin painike-elementin ominaisuudet
  • Klikattavien div- ja span-elementtien ongelmat
  • Kontrollin saavutettava nimi
  • Tekstin, kuvakkeen ja saavutettavan nimen suhde
  • Kontrollin tila ja käyttötarkoitus
  • Avautuvien ja sulkeutuvien sisältöjen toteuttamisen perusteet

Näppäimistökäyttö ja kohdistus

  • Mitkä HTML-elementit vastaanottavat kohdistuksen luonnostaan?
  • Looginen kohdistusjärjestys
  • Miksi positiivisia tabindex-arvoja tulee välttää?
  • Kohdistuksen näkyminen ja visuaalinen järjestys
  • Näppäimistöansojen ehkäiseminen
  • Kohdistuksen hallinnan perusteet dynaamisissa käyttöliittymissä
  • Milloin elementtiä ei pidä lisätä sarkainjärjestykseen?

Saavutettavat kuvat ja media

  • Kuvan tarkoituksen tunnistaminen
  • Informatiivisten kuvien vaihtoehtoiset tekstit
  • Koristeellisten kuvien merkitseminen
  • Linkkinä tai painikkeena toimivat kuvat
  • Monimutkaiset kuvat, kaaviot ja infografiikka
  • Kuvatekstin ja vaihtoehtoisen tekstin tehtävät
  • Ääni- ja videosisältöjen HTML-rakenteen perusteet

Saavutettavat lomakkeet

  • Lomakekentän ja nimilapun yhdistäminen
  • Näkyvä nimilappu ja saavutettava nimi
  • Kenttien ryhmittely
  • Ohjeiden ja muotovaatimusten välittäminen
  • Pakollisten kenttien merkitseminen
  • Automaattisen täytön tukeminen
  • Virheiden tunnistaminen ja kuvaaminen
  • Virheilmoituksen yhdistäminen oikeaan kenttään
  • Lomakkeen painikkeiden nimeäminen
  • Placeholder-tekstin oikea käyttötarkoitus

Saavutettavat tietotaulukot

  • Milloin sisältö on tietotaulukko?
  • Otsikkosolujen merkitseminen
  • Rivien ja sarakkeiden välisten suhteiden välittäminen
  • Taulukon otsikko ja kuvaus
  • Yksinkertaisten ja monimutkaisten taulukoiden erot
  • Miksi taulukkoa ei pidä käyttää sivun ulkoasun rakentamiseen?

ARIA täydentämässä HTML:ää

  • Mitä ARIA tekee ja mitä se ei tee?
  • Natiivin HTML-elementin ensisijaisuus
  • Roolit, tilat ja ominaisuudet
  • Elementtien nimeäminen ja kuvaileminen
  • Dynaamisten tilamuutosten välittäminen
  • Piilotetun ja näkyvän sisällön käsittely
  • Yleisimmät virheet ARIA-määritteiden käytössä
  • Miksi väärin käytetty ARIA voi heikentää saavutettavuutta?

Toteutuksen tarkistaminen

  • Sivun käyttäminen pelkällä näppäimistöllä
  • Otsikoiden ja sivualueiden tarkistaminen
  • Elementtien saavutettavien nimien, roolien ja tilojen tarkistaminen
  • Selaimen saavutettavuuspuun hyödyntäminen
  • HTML-rakenteen automaattinen tarkistus
  • Lyhyt tutustuminen ruudunlukijan tapaan tulkita sivua
  • Automaattisen ja manuaalisen tarkistamisen erot

 

 

Käytännön harjoitukset

Kurssilla tarkastellaan HTML-esimerkkejä ja korjataan niissä esiintyviä saavutettavuusongelmia. Harjoituksissa esimerkiksi:

  • muutetaan yleisillä elementeillä rakennettu sivu semanttiseksi HTML-rakenteeksi
  • korjataan otsikot ja sivun keskeiset alueet
  • valitaan tilanteeseen sopiva linkki- tai painike-elementti
  • yhdistetään lomakekentät nimilappuihin, ohjeisiin ja virheilmoituksiin
  • korjataan tietotaulukon rakenne
  • tutkitaan selaimen muodostamaa saavutettavuuspuuta
  • arvioidaan, tarvitaanko toteutuksessa ARIA-määritteitä.

Kurssin rajaus

Kurssi keskittyy HTML-koodin rakenteelliseen ja semanttiseen saavutettavuuteen. Siinä ei käsitellä laajasti visuaalista suunnittelua, CSS-tyylien saavutettavuutta tai vaativien JavaScript-komponenttien ohjelmointia.

Oikein toteutettu HTML ei yksin takaa koko verkkopalvelun saavutettavuutta, mutta se luo perustan, jonka varaan saavutettava ulkoasu, vuorovaikutus ja sisältö voidaan rakentaa.
Rakenna saavutettavuus osaksi koodia alusta lähtien – ilmoittaudu mukaan!

Kurssin kesto

Kesto 1 pv.

Kurssityyppi

Etä

Kouluttajat

Kari Selovuo

Ilmoittaudu kurssille

Oletko kiinnostunut asiakaskohtaisesta toteutuksesta?

Kerro tarpeesi, niin suunnittelemme koulutuksen tarpeisiinne räätälöitynä.