Aký je rozdiel medzi sémantikou a prístupnosťou…

Sémantika pomáha strojom (prehliadačom, parserom, vyhľadávacím robotom) pochopiť štruktúru a zmysel obsahu. Prístupnosť (a11y) je zameraná na to, aby bol obsah zrozumiteľný a pohodlný pre ľudí s rôznymi fyzickými alebo kognitívnymi obmedzeniami, ktorí používajú pomocné technológie.

Sémantické značky

Použitie sémantických HTML značiek, ako sú <article>, <nav>, <aside>, <footer>, <h1>-<h6>, pridáva prvkom stránky zmysluplný význam. Napríklad:

<article>
  <h2>Nadpis článku</h2>
  <p>Text článku...</p>
</article>

To pomáha prehliadačom správne interpretovať štruktúru dokumentu.

Prístupnosť (a11y)

Prístupnosť zahŕňa mnoho aspektov:

Sémantika: Správne používanie sémantických značiek je už súčasťou prístupnosti, pretože pomáha pomocným technológiám (čítacím zariadeniam) pochopiť štruktúru a účel prvkov.
ARIA atribúty: Ďalšie atribúty, ako aria-label, aria-describedby, aria-hidden, role, poskytujú dodatočné informácie pre pomocné technológie, keď sémantika HTML nestačí.
```
<button aria-label="Zatvoriť dialógové okno">
  <img src="close.svg" alt="">
</button>
```
Kontrast: Dostatok kontrastu medzi textom a pozadím pre osoby so zrakovým postihnutím.
Navigácia klávesnicou: Možnosť pohybovať sa po stránke a interagovať s prvkami len pomocou klávesnice.
Alternatívny text pre obrázky (alt): Popis obsahu obrázka pre používateľov, ktorí ho nevidia.
```
<img src="cat.jpg" alt="Čierna mačka spí na parapete.">
```
Štruktúra nadpisov: Logická hierarchia nadpisov (<h1> - <h6>) pre pohodlnú navigáciu pomocou čítačiek obrazovky.

Väzba

Sémantika je dôležitým základom pre prístupnosť. Dobre štruktúrovaná stránka pomocou sémantických prvkov je výrazne jednoduchšie sprístupniť. Avšak, samotná sémantika nestačí na úplnú prístupnosť – často sú potrebné ďalšie opatrenia, ako ARIA atribúty, práca s fokusom a zabezpečenie dostatočného kontrastu.

Aspekt	Sémantika	Prístupnosť (a11y)
Cieľ	Pridelenie zmysluplného významu prvkom	Zabezpečenie porozumenia a používania obsahu všetkými
Nástroje	HTML značky (`<nav>`, `<article>`, `<h1>`...)	Sémantika, ARIA, kontrast, fokus, `alt` text a ďalšie
Používateľ	Prehliadače, parsery, vyhľadávače	Ľudia s rôznymi potrebami, pomocné technológie

Aký je rozdiel medzi sémantikou a prístupnosťou (a11y)?