17. WCAG Basics

HTML: Скелет. Урок: WCAG Basics

Иллюстрация к уроку В этом уроке мы познакомимся с основами WCAG (Web Content Accessibility Guidelines) – международным стандартом доступности веб-контента для людей с ограниченными возможностями. Понимание и применение этих принципов сделает ваши веб-страницы удобными для всех пользователей.

Что такое WCAG?

WCAG - это набор рекомендаций по созданию веб-контента, который будет более доступным для широкого круга людей с инвалидностью, включая слепоту, слабовидение, глухоту, нарушения обучаемости, когнитивные ограничения, ограниченную подвижность, речевые нарушения, светочувствительность и их комбинации. WCAG не является законом, но многие страны используют его в качестве основы для законодательства об интернет-доступности.

Основные принципы WCAG

WCAG строится на четырех основных принципах, которые часто называют аббревиатурой POUR:

Perceivable (Воспринимаемость): Информация и компоненты пользовательского интерфейса должны быть представлены пользователям таким образом, чтобы они могли их воспринимать. Это означает, что контент должен быть доступен для чувств пользователя: зрение, слух, осязание.
Operable (Управляемость): Компоненты пользовательского интерфейса и навигация должны быть управляемыми. Пользователи должны иметь возможность взаимодействовать с веб-сайтом с помощью различных устройств ввода, таких как клавиатура, мышь, сенсорный экран или голосовые команды.
Understandable (Понятность): Информация и работа пользовательского интерфейса должны быть понятными. Контент должен быть написан простым языком, структура веб-страницы должна быть логичной и предсказуемой, а ошибки должны быть четко обозначены и легко исправимы.
Robust (Надежность): Контент должен быть достаточно надежным, чтобы его можно было интерпретировать широким спектром пользовательских агентов, включая вспомогательные технологии. Веб-страницы должны быть совместимы с различными браузерами, операционными системами и устройствами.

Практические примеры кода

1. Альтернативный текст для изображений:

<img src="logo.png" alt="Логотип компании 'Пример'">

Комментарий: Атрибут alt предоставляет текстовое описание изображения для пользователей, которые не могут его увидеть (например, с помощью скринридера).

2. Правильная структура заголовков:

<h1>Главный заголовок</h1>
<h2>Подзаголовок 1</h2>
<h3>Подзаголовок 1.1</h3>
<h2>Подзаголовок 2</h2>

Комментарий: Использование правильной иерархии заголовков (h1, h2, h3 и т.д.) помогает структурировать контент и упрощает навигацию для пользователей скринридеров.

3. Использование семантических элементов HTML5:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<article>
  <h1>Заголовок статьи</h1>
  <p>Текст статьи...</p>
</article>

<footer>
  <p>© 2023 Пример компании</p>
</footer>

Комментарий: Использование семантических элементов, таких как <nav>, <article>, <footer>, помогает определить структуру страницы и облегчает ее понимание для скринридеров и поисковых роботов.

4. Контрастность текста и фона:

Убедитесь, что между текстом и фоном достаточный контраст, чтобы текст был легко читаемым. Существуют онлайн-инструменты, которые могут помочь проверить контрастность.

Жизненный пример

Многие популярные сайты и фреймворки активно используют принципы WCAG. Например, Twitter предоставляет альтернативный текст для изображений, а Bootstrap предлагает инструменты для создания доступных форм и навигации. Библиотеки компонентов пользовательского интерфейса, такие как React Aria, специально разработаны для создания доступных компонентов. CMS, такие как WordPress, имеют плагины, которые помогают проверять доступность контента.

Ключевые моменты

WCAG – это стандарт доступности веб-контента.
Принципы POUR (Perceivable, Operable, Understandable, Robust) лежат в основе WCAG.
Использование атрибута alt для изображений.
Правильная структура заголовков (h1-h6).
Использование семантических элементов HTML5.
Обеспечение достаточной контрастности текста и фона.