Semanttinen HTML

Semanttinen HTML on HTML:ää, jossa jokainen elementti valitaan sen merkityksen perusteella, ei vain ulkonäön perusteella. <button> on toiminnoille. <nav> kietoo navigaation ympärilleen. <table> sisältää taulukkomuotoisen datan. <div>:n käyttäminen, joka on tyylitelty näyttämään painikkeelta toiminnalle, on semantiikan epäonnistuminen — vaikka visuaalinen tulos olisi identtinen.

Valtaosa saavutettavuusvirheistä juontuu hylätystä semantiikasta. Lähes jokaisella avustavan teknologian epäonnistumisella on sama perussyy: geneerinen elementti tekee työn, johon semanttinen elementti on suunniteltu.

Miksi ruudunlukuohjelmat välittävät tästä

Ruudunlukuohjelmat paljastavat HTML:n käyttäjälle saavutettavuuspuun kautta — DOM:sta rakennetun sisäisen esityksen, joka yhdistää jokaisen elementin rooliin, nimeen, tilaan ja ominaisuuksiin. Saavutettavuuspuu on se, mitä käyttäjä tosiasiassa kuulee.

Natiivi <button> astuu saavutettavuuspuuhun muodossa button "Submit". Painikkeelta näyttävä <div> astuu puuhun muodossa generic — mikä tarkoittaa, että ruudunlukuohjelma ei ilmoita mitään hyödyllistä, eikä käyttäjällä ole tapaa löytää, että div on vuorovaikutteinen.

Sama logiikka pätee:

• Otsikoihin (<h1>–<h6>) — ruudunlukuohjelmat antavat käyttäjien hypätä otsikoiden välillä sivun silmäilyssä. <div class="heading"> ei näy otsikkoluettelossa.
• Listoihin (<ul>, <ol>, <li>) — ruudunlukuohjelmat ilmoittavat “lista, 5 kohdetta” ennen lukemista. <div>:t, jotka teeskentelevät listakohtia, eivät.
• Lomakkeisiin — <input> ja liitetty <label> lukee “Sähköposti, muokkaa tekstiä.” Diiveistä ja contenteditable-elementistä koostuva mukautettu syöte ei lue mitään.
• Taulukoihin — <table> ja <th>-rivi/sarake-otsikot antavat käyttäjien navigoida datataulukoita solu kerrallaan otsikkokontekstin kanssa ilmoitettuna. CSS-ruudukot diiveistä eivät.

Korjauskaava

Korjaus on lähes aina samaa muotoa:

• <div onclick="..."> → <button> (tai <a href> navigointiin).
• <span class="link"> → <a href>.
• <div role="heading"> → <h1> – <h6>.
• Mukautetut pudotusvalikot → <select>, kun suunnittelu sen sallii, tai ARIA-koeteltu combobox, kun ei salli.
• Tyylitellyistä <div>:ista rakennetut välilehdet → välilehtimalli ARIA Authoring Practices Guide -oppaasta.

Milloin käyttää ARIAa

ARIAn ensimmäinen sääntö on: älä käytä ARIAa, jos natiivi elementti tekee työn. ARIA-roolit, tilat ja ominaisuudet ovat paikkaus tapauksille, joissa natiivi HTML ei voi kuvata rakennettavaa widgetiä (puunäkymät, moniselektiiviset comboboxit, tietyt modaalimallit). Ne eivät korvaa <button>:n käyttöä.

Käytännön auditointi

Nopein tapa havaita semantiikan rapautuminen koodikannassa: hae onclick div- ja span-elementeistä. Jokainen osuma on ehdokas virheeksi. Toiseksi nopein: hae role=-attribuutteja. ARIA on sopiva rajoitetuissa yhteyksissä, mutta raskas ARIA-käyttö usein viestii, että natiivit elementit ohitettiin tyylisyistä, jotka eivät tosiasiassa vaatineet ohittamista.