Каква е разликата между семантика и достъпност…

Семантиката помага на машините (браузъри, парсери, търсещи роботи) да разберат структурата и смисъла на съдържанието. Достъпността (a11y) е насочена към това съдържанието да бъде разбираемо и удобно за хора с различни физически или когнитивни ограничения, използващи помощни технологии.

Семантични тагове

Използването на семантични HTML тагове като <article>, <nav>, <aside>, <footer>, <h1>-<h6> придава смислово значение на елементите на страницата. Например:

<article>
  <h2>Заглавие на статията</h2>
  <p>Текст на статията...</p>
</article>

Това помага на браузърите правилно да интерпретират структурата на документа.

Достъпност (a11y)

Достъпността включва множество аспекти:

Семантика: Правилното използване на семантичните тагове вече е част от достъпността, тъй като помага на помощните технологии (скрийн рийдъри) да разберат структурата и предназначението на елементите.
ARIA атрибути: Допълнителни атрибути като aria-label, aria-describedby, aria-hidden, role предоставят допълнителна информация за помощните технологии, когато семантиката на HTML не е достатъчна.
```
<button aria-label="Затваряне на диалоговия прозорец">
  <img src="close.svg" alt="">
</button>
```
Контраст: Достатъчен контраст между текста и фона за хора с нарушено зрение.
Навигация с клавиатура: Възможност за придвижване из страницата и взаимодействие с елементите само с клавиатура.
Алтернативен текст за изображения (alt): Описание на съдържанието на изображението за потребители, които не го виждат.
```
<img src="cat.jpg" alt="Черна котка спи на перваза.">
```
Структура на заглавията: Логическа йерархия на заглавията (<h1> - <h6>) за удобна навигация с помощта на скрийн рийдъри.

Връзка

Семантиката е важен фундамент за достъпността. Добре структурирана страница с помощта на семантични елементи значително по-лесно се прави достъпна. Въпреки това, семантиката сама по себе си не е достатъчна за пълна достъпност – често са необходими допълнителни мерки като ARIA атрибути, работа с фокуса и осигуряване на достатъчен контраст.

Аспект	Семантика	Достъпност (a11y)
Цел	Придаване на смислово значение на елементите	Осигуряване на разбиране и използване на съдържанието от всички
Инструменти	HTML тагове (`<nav>`, `<article>`, `<h1>`...)	Семантика, ARIA, контраст, фокус, `alt` текст и др.
Потребител	Браузъри, парсери, търсачки	Хора с различни потребности, помощни технологии

Каква е разликата между семантика и достъпност (a11y)?