Mis vahe on semantikal ja ligipääsetavusel (a11y)?

Semantika aitab masinatel (brauseritel, parseritel, otsingurobotitel) mõista sisu struktuuri ja tähendust. Juurdepääsetavus (a11y) on suunatud sellele, et sisu oleks arusaadav ja mugav inimestele erinevate füüsiliste või kognitiivsete piirangutega, kes kasutavad abitehnoloogiaid.

Semantilised sildid

HTML semantiliste siltide kasutamine, nagu <article>, <nav>, <aside>, <footer>, <h1>-<h6>, annab lehe elementidele tähendusliku väärtuse. Näiteks:

<article>
  <h2>Artikli pealkiri</h2>
  <p>Artikli tekst...</p>
</article>

See aitab brauseritel õigesti tõlgendada dokumendi struktuuri.

Juurdepääsetavus (a11y)

Juurdepääsetavus hõlmab mitmeid aspekte:

• Semantika: Semantiliste siltide õige kasutamine on juba osa juurdepääsetavusest, kuna see aitab abitehnoloogiatel (skrinriderid) mõista elementide struktuuri ja eesmärki.

• ARIA-atribuutid: Täiendavad atribuudid, nagu aria-label, aria-describedby, aria-hidden, role, pakuvad täiendavat teavet abitehnoloogiatele, kui HTML semantika ei ole piisav:

  <button aria-label="Sulgge dialoogaken">
    <img src="close.svg" alt="">
  </button>
  

• Kontrast: Piisav kontrast teksti ja tausta vahel inimestele, kellel on nägemispuue:

• Navi­gatsioon klaviatuuriga: Võimalus liikuda lehel ja suhelda elementidega ainult klaviatuuriga:

• Alternatiivne tekst piltidele (alt): Kirjeldus pildi sisust kasutajatele, kes seda ei näe:

  <img src="cat.jpg" alt="Must kass magab aknaalusel">
  

• Pealkirjade struktuur: Loogiline hierarhia (<h1> - <h6>) mugavaks navigeerimiseks skrinrideritega:

Seos

Semantika on oluline alus juurdepääsetavuse jaoks. Hästi struktureeritud leht semantiliste elementidega on palju lihtsam muuta juurdepääsetavaks. Kuid üksnes semantika ei ole piisav – sageli on vaja täiendavaid meetmeid, nagu ARIA-atribuutid, fookuse haldamine ja piisava kontrasti tagamine:

Aspekt	Semantika	Juurdepääsetavus (a11y)
Eesmärk	Andma elementidele tähenduslik väärtus	Tagada, et sisu oleks mõistetav ja kasutatav kõigi poolt
Tööriistad	HTML sildid (<nav>, <article>, <h1>...)	Semantika, ARIA, kontrast, fookus, alt tekst ja muud
Kasutaja	Brauserid, parserid, otsingumootorid	Inimesed erinevate vajadustega, abitehnoloogiad