Семантика менен жеткиликтүүлүк (a11y) арасындагы…

Семантика машиналарга (браузерлерге, парсерлерге, издөө роботторуна) мазмундун түзүлүшү жана маанисин түшүнүүгө жардам берет. Жеткиликтүүлүк (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) арасындагы айырма эмне?