В чем разница между семантикой и доступностью (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-атрибуты, работа с фокусировкой и обеспечение достаточной контрастности.