Liigu põhisisu juurde
Ligipääsetavuse labor

3.4 · Struktuur

Maamärgid ja semantiline HTML

Maamärgid on lehe linnaosad. Ekraanilugeja kasutaja loetleb need ja hüppab — nii saab ta navigatsiooni vahele jätta, ilma et peaks 30 lingi läbi tabima.

Kuus, mida tegelikult vajad

Maamärgielemendid ja nende kaudsed rollid
ElementRollKasuta
<header>bannerSaidi nimi ja üldine päis ülal.
<nav>navigationNavigatsioonilinkide kogum. Kui neid on mitu, anna silt.
<main>mainSelle lehe ainulaadne sisu. Täpselt üks lehe kohta.
<aside>complementarySeotud, kuid teisejärguline sisu, näiteks külgriba.
<footer>contentinfoKogu saidi info all.
<section>regionTeemapõhine rühm — anna sellele pealkirjaga ligipääsetav nimi.

Div-supp vs maamärgid

Ligipääsmatu

Mida ekraanilugeja ette loeb

  1. maamärke ei leitud — kasutaja peab kogu lehe läbi lugema või tabima
Ligipääsetav

Mida ekraanilugeja ette loeb

  1. bänner
  2. navigatsioon, Peamenüü
  3. põhisisu
  4. sisuinfo

See leht on täpselt nii üles ehitatud. Lisa esimese fokuseeritava elemendina vahelejätmise link, et klaviatuurikasutaja jõuaks põhisisuni ühe vajutusega — proovi Tab lehe ülaosast.

Miks hea näide on parem

  • Maamärgid annavad kogu lehe kaardi, mida div-klassid ei suuda.
  • Semantilistel elementidel on rollid olemas, seega ARIA-t pole peaaegu vaja.
  • Täpselt üks main ja vahelejätmise link kaotavad klaviatuurikasutaja korduva navigatsiooni.

Mõju ligipääsetavusele

Ekraanilugeja kasutajad
Hüppavad ühe kiirklahviga põhisisu, navigatsiooni või jaluse juurde.
Ainult klaviatuuri kasutajad
Jätavad korduvad blokid vahele, mitte ei tabi läbi kogu päist.

Praktiline järeldus

Vali enne div-i semantiline element. See on odavaim ligipääsetavus, mida sa iial teed.

WCAG 2.2
1.3.1 Info and Relationships, 2.4.1 Bypass Blocks

Seotud nõuded

EN 301 549 punktid: 9.3.1.1, 10.3.1.1

See õppetükk avab enesehindamise ala — vaata järgmisena üle oma leht või materjalid.

Vaata üle — Maamärgid ja semantika

Kas said õppetüki läbi? Märgi see ära, et õpitee oleks ajakohane.