Kuo skiriasi semantika ir prieinamumas (a11y)?

Semanatika padeda mašinoms (naršyklėms, parseriams, paieškos robotams) suprasti turinio struktūrą ir prasmę. Prieinamumas (a11y) yra orientuotas į tai, kad turinys būtų suprantamas ir patogus žmonėms su įvairiais fiziniais ar pažinimo apribojimais, naudojantiems pagalbos technologijas.

Semanatiniai žymekliai

Naudojant semantinius HTML žymeklius, tokius kaip <article>, <nav>, <aside>, <footer>, <h1>-<h6>, suteikiama elementams prasmės reikšmė. Pavyzdžiui:

<article>
  <h2>Straipsnio antraštė</h2>
  <p>Straipsnio tekstas...</p>
</article>

Tai padeda naršyklėms teisingai interpretuoti dokumento struktūrą.

Prieinamumas (a11y)

Prieinamumas apima daugybę aspektų:

• Semanatika: Teisingas semantinių žymeklių naudojimas jau yra dalis prieinamumo, nes padeda pagalbos technologijoms (skaitytuvams) suprasti elementų struktūrą ir paskirtį.

• ARIA atributai: Papildomi atributai, tokie kaip aria-label, aria-describedby, aria-hidden, role, suteikia papildomos informacijos pagalbos technologijoms, kai HTML semantika yra nepakankama:

  <button aria-label="Uždaryti dialogo langą">
    <img src="close.svg" alt="">
  </button>
  

• Kontrastas: Pakankamas kontrastas tarp teksto ir fono, skirtas žmonėms su regėjimo sutrikimais:

• Navigacija klaviatūra: Galimybė judėti puslapyje ir sąveikauti su elementais tik naudojant klaviatūrą:

• Alternatyvus tekstas vaizdams (alt): Aprašymas vaizdo turinio naudotojams, kurie jo nemato:

  <img src="cat.jpg" alt="Juoda katė miega ant palangės">
  

• Antraščių struktūra: Loginė hierarchija (<h1> - <h6>) patogiai naršyti naudojant skaitytuvus:

Ryšys

Semanatika yra svarbus pagrindas prieinamumui. Gerai struktūruota puslapis su semantiniais elementais yra žymiai lengviau padaryti prieinamą. Tačiau viena semantika pati savaime nėra pakankama – dažnai reikalingi papildomi veiksmai, tokie kaip ARIA atributai, fokusavimo valdymas ir pakankamo kontrasto užtikrinimas:

Aspektas	Semanatika	Prieinamumas (a11y)
Tikslas	Pridėti prasmingą reikšmę elementams	Užtikrinti, kad turinys būtų suprantamas ir naudojamas visų
Įrankiai	HTML žymekliai (<nav>, <article>, <h1>...)	Semanatika, ARIA, kontrastas, fokusas, alt tekstas ir kt.
Naudotojas	Naršyklės, parseriai, paieškos sistemos	Žmonės su įvairiais poreikiais, pagalbinės technologijos