Jaký je rozdíl mezi sémantikou a přístupností (a11y)?

Sémantika pomáhá strojům (prohlížečům, parserům, vyhledávacím robotům) pochopit strukturu a význam obsahu. Přístupnost (a11y) je zaměřena na to, aby byl obsah srozumitelný a pohodlný pro lidi s různými fyzickými nebo kognitivními omezeními, kteří používají asistivní technologie.

Sémantické značky

Použití sémantických HTML značek, jako jsou <article>, <nav>, <aside>, <footer>, <h1>-<h6>, dodává prvkům stránky smysluplný význam. Například:

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

To pomáhá prohlížečům správně interpretovat strukturu dokumentu.

Přístupnost (a11y)

Přístupnost zahrnuje mnoho aspektů:

• Sémantika: Správné používání sémantických značek je již součástí přístupnosti, protože pomáhá asistivním technologiím (čtečkám obrazovky) pochopit strukturu a účel prvků.

• ARIA atributy: Další atributy, jako aria-label, aria-describedby, aria-hidden, role, poskytují dodatečné informace pro asistivní technologie, když sémantika HTML nestačí.

  <button aria-label="Zavřít dialogové okno">
    <img src="close.svg" alt="">
  </button>
  

• Kontrast: Dostatečný kontrast mezi textem a pozadím pro osoby se zrakovým postižením.

• Navigace klávesnicí: Možnost pohybovat se po stránce a interagovat s prvky pouze pomocí klávesnice.

• Alternativní text pro obrázky (alt): Popis obsahu obrázku pro uživatele, kteří ho nevidí.

  <img src="cat.jpg" alt="Černá kočka spí na parapetu.">
  

• Struktura nadpisů: Logická hierarchie nadpisů (<h1> - <h6>) pro pohodlnou navigaci pomocí čteček obrazovky.

Vztah

Sémantika je důležitým základem pro přístupnost. Dobře strukturovaná stránka pomocí sémantických prvků je výrazně jednodušší zpřístupnit. Nicméně samotná sémantika nestačí pro úplnou přístupnost – často jsou potřeba další opatření, jako ARIA atributy, práce s fokusem a zajištění dostatečného kontrastu.

Aspekt	Sémantika	Přístupnost (a11y)
Cíl	Přidělení smysluplného významu prvkům	Zajištění porozumění a používání obsahu všemi
Nástroje	HTML značky (<nav>, <article>, <h1>...)	Sémantika, ARIA, kontrast, fokus, alt text a další
Uživatel	Prohlížeče, parsery, vyhledávače	Lidé s různými potřebami, asistivní technologie