Semanttinen HTML

 

Mikä se on?

HTML-elementit voi jakaa kahteen kategoriaan:

  • Ei-semanttinen: nämä elementit eivät määrittele mitään niiden sisällöstä, ja niitä käytetään vain ryhmittelemään muita elementtejä tai erottamaan tietyt elementit toisistaan. Tärkeimmät esimerkit ovat <div> ja <span>.
  • Semanttinen: nämä elementit välittävät tietoa niiden sisällöstä. Jotkut ovat yhtä vanhoja kuin HTML itse (esimerkiksi kappaleiden <p> -elementti ja linkkien <a> -elementti). Jokainen HTML-versio on lisännyt uusia semanttisia elementtejä: erityisesti HTML5 on tuonut monia semanttisia elementtejä, jotka ovat välttämättömiä saavutettavuuden parantamiseksi (kuten<nav>navigointielementeille ja<time> ajalle ja päivämäärille).

Kuinka ja miksi niitä käytetään?

On tärkeää käyttää semanttisia elementtejä oikein, jotta ruudunlukijat ja muut avustavat tekniikat ymmärtäisivät niiden merkityksen ja välittäisivät sen tiedon käyttäjälle.

Esimerkiksi:

  • Jos käytät (oikein) <h2>-elementtejä esimerkiksi hedelmiä ja vihanneksia käsittelevien osioiden alussa, ruudunlukija voi ilmoittaa niistä nimellä “Otsikkotaso 2, hedelmät” ja myöhemmin “Otsikkotaso 2, vihannekset”. Lisäksi useimmat ruudunlukijat sallivat käyttäjän selata otsikoittain, jotta he voivat ymmärtää sivun rakenteen tai siirtyä eteenpäin kiinnostaviin osioihin.
  • Jos käytät<p>-elementtejä näihin otsikoihin (mikä olisi väärin) ja lisäät sitten CSS-muotoilun saadaksesi ne näyttämään isommilta ja lihavimmilta, käyttäjät jotka eivät näe miltä teksti näyttää, eivät tiedä että ne palvelevat erityistä tarkoitusta. Lisäksi käyttäjät eivät voi selata sivua otsikoittain.

Tiettyjen merkitysten lisäksi, interaktiivisissa semanttisissa elementeissä on myös sisäänrakennettuja toiminnallisuuksia, jotka ovat erittäin tärkeitä saavutettavuuden kannalta.

Otetaan esimerkkinä painike. Sinun tulisi käyttää HTML <button>-elementtiä. Voisit käyttää teknisesti eri elementtiä, kuten<div>, ja sitten tyylitellä se CSS:llä. Jotta se käyttäytyisi kuten todellinen painike, sinun pitäisi kuitenkin tehdä vielä seuraavaa:

  • Lisää painikkeelle ARIA-rooli role="button", jotta ruudunlukijat voivat kertoa, että kyseessä on painike (lisää ARIA-rooleista ARIA-sivulla).
  • Tee siitä kohdistettava tabindex="0" , jotta se olisi saavutettava myös näppäimistöllä tai näppäimistön kaltaisella laitteella.
  • Lisääkeyup tapahtuman käsittely ainakin välilyönti-näppäimelle, jotta painiketta voisi aktivoida näppäimistöllä tai näppäimistön kaltaisella laitteella.
  • Lisää click tapahtuman käsittely, jotta painiketta voisi aktivoida hiirellä tai hiiren kaltaisella laitteella.

Kaikki tämä vain saman toiminnallisuuden saavuttamiseksi, jonka saat “avaimet käteen”-periaatteella kun käytät <button>-elementtiä. Eli, miksi tehdä asioista vaikeampia kuin mitä niiden täytyy olla?

Tutustu myös: