Доступность сайта означает, что каждый человек, включая людей с ограниченными возможностями, может выполнить любое действие на сайте. При этом неважно, использует пользователь клавиатуру или любое другое устройство.
Критерии доступности сайта определяются рядом стандартов Web Content Accessibility Guidelines или WCAG, которые регулируют, какие функциональные возможности должны быть доступны на сайте.
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Что такое доступный сайт
Сайт считается доступным, если с ним может взаимодействовать человек, использующий вспомогательные технологии: скринридеры, устройства для чтения текста или голосовые устройства управления. Кроме того, интерфейс сайта должен быть понятным и удобным для людей с ограниченными возможностями.
В 2022 году в мире насчитывалось более 1 миллиарда людей с ограниченными возможностями. Получается, примерно каждый восьмой человек на Земле имеет особенности со здоровьем, которые могут отражаться на работе — в том числе, на использовании интернета.
Как создать доступный сайт
Чтобы сделать сайт доступным, необходимо следовать ряду правил и критериев, установленных организацией W3C. Она создала стандарт доступности сайтов, его актуальная версия — WCAG 2.1.
📌 В стандарте рекомендации по доступности делятся на четыре категории:
-
«Воспринимаемость» — информация и компоненты интерфейса должны быть представлены пользователям с разными сенсорными возможностями в доступной для восприятия форме.
-
«Управляемость» — компоненты интерфейса пользователя и навигационные элементы должны быть управляемыми и доступны с клавиатуры и других вспомогательных устройств.
-
«Понятность» — информация и управление интерфейсом пользователя должны быть понятными.
-
«Устойчивость» — контент должен быть понятен и доступен вспомогательным технологиям.
В каждой категории есть ряд рекомендаций, которые и являются критериями доступности. Рассмотрим несколько важных критериев.
🔠 Предоставление текстовых альтернатив для всех не визуальных элементов — изображений, видео и аудио. Для обеспечения доступности аудио и видеоконтента на сайте необходимо добавлять описания, а также субтитры или звуковые сигналы для пользователей с ограниченными возможностями.
⌨️ Сайтом можно полностью пользоваться с клавиатуры. Формы и другие интерактивные элементы на сайте должны быть доступны с помощью клавиатуры и иметь понятные инструкции для пользователей.
🅾️ Достаточная контрастность текста и изображений. Веб-страницы должны иметь достаточный контраст между текстом и фоном, чтобы обеспечить лёгкую читаемость. Также необходимо учитывать размер и тип шрифта, чтобы он был читаемым для всех пользователей, включая тех, у которых есть проблемы со зрением.
Важно учитывать, что существуют особенности зрения, которые проявляются в неверном восприятии цветов, например, дальтонизм. Поэтому рекомендуется добавлять состояния интерактивным элементам не только в виде изменения цвета, но и с помощью других визуальных средств.
🖌️ Простой и интуитивный дизайн. Он не требует дополнительных усилий или знаний для пользования сайтом. Разработчику важно разбираться в дизайне, чтобы создавать качественные и доступные сайты.
Структура сайта должна быть чётко организована, чтобы пользователи могли без сложностей перемещаться по страницам и находить необходимую информацию. Использование семантической разметки, где каждый тег стоит на своём месте, облегчает чтение и понимание содержимого программами чтения с экрана.
↕️ Адаптируемость. Сайт должен быть доступен на разных устройствах и в портретной, и в альбомной ориентации.
Как создавать адаптивные сетки
🚦Доступная навигация. Навигация и ссылки на сайте должны быть организованы и иметь ясные названия, чтобы пользователи могли находить нужный контент и определять своё местонахождение на странице.
💬 Тестирование и обратная связь. Необходимо проводить тестирование доступности сайта с помощью инструментов и методик, которые позволяют определить проблемы доступности. Также необходимо предоставлять возможность обратной связи для пользователей, чтобы они могли сообщать об ошибках или проблемах на сайте.
Для определения достаточной контрастности сайта существуют разные инструменты, например, сервис WebAIM позволяет проверять контрастность цветов элементов и соотносить данные с критериями WCAG. Также есть отдельный инструмент от WebAIM для измерения контрастности ссылок относительно фона и основного текста.
Помимо проверки контрастности, есть сервисы для симуляции дальтонизма и других особенностей зрения, чтобы проверить, как видят сайт люди с другим цветовосприятием. Например, в Chrome DevTools есть встроенный симулятор особенностей зрения, в котором вы можете проверить любой сайт. Это можно сделать, добавив инструмент Rendering и выбрав в пункте Emulate vision deficiencies нужную особенность зрения.
Разработчику важно понимать, как различные ограничения пользователей влияют на использование сайта, и учитывать это при вёрстке. Также полезно знать, как программы чтения с экрана считывают содержимое сайта. Это позволяет разработчику создавать ресурс, который будет читаемым и понятным для всех пользователей.
Доступность сайта должна учитываться на каждом этапе разработки. В процессе вёрстки рекомендуется постоянно проверять сайт на доступность и вносить изменения, чтобы не упустить ни один из критериев.
Подробнее узнать о критериях доступности, инструментах проверки и научиться создавать доступные для каждого пользователя сайты, можно на нашем специализированном курсе.