Фарқияти байни семантика ва дастрасӣ (a11y) чист…

Семантика кӯмак мекунад, ки машинаҳо (браузерҳо, парсерҳо, роботҳои ҷустуҷӯ) структура ва маънои мундариҷаро фаҳманд. Дастрасӣ (a11y) барои он равона шудааст, ки мундариҷа барои одамон бо маҳдудиятҳои физикӣ ё когнитивӣ, ки технологияҳои ёрӣ истифода мебаранд, фаҳмо ва қулай бошад.

Тегҳои семантикӣ

Истифодаи тегҳои HTML семантикӣ, монанди <article>, <nav>, <aside>, <footer>, <h1>-<h6>, маънои маънавиро ба унсурҳои саҳифа медиҳад. Масалан:

<article>
  <h2>Сарлавҳаи мақола</h2>
  <p>Матни мақола...</p>
</article>

Ин кӯмак мекунад, ки браузерҳо структураи ҳуҷҷатро дуруст фаҳманд.

Дастрасӣ (a11y)

Дастрасӣ ба бисёр ҷиҳатҳо вобаста аст:

Семантика: Истифодаи дурустии тегҳои семантикӣ аллакай қисми дастрасӣ аст, зеро кӯмак мекунад, ки технологияҳои ёрӣ (скрин ридерҳо) структура ва мақсади унсурҳоро фаҳманд.
АРИА-атрибутҳо: Атрибутҳои иловагӣ, монанди 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) чист?