- 1 мин
- 288
Аксессибилити (англ. Accessibility, A11y) — это «доступность» цифрового продукта. Означает возможность людям с ограничиями (зрения, слуха, моторике) использовать сайты так же, как и бех ограничений.
Все люди выбирают сайт глазами. Визуал — первое, с чем сталкивается человек открывая любой сайт в интернете.
Наша задача как разработчика — показать, что внешний вид опирается на невидимую, но важную основу: доступность, навигацию и поисковую оптимизацию. Ведь, никто не ищет сайты с «правильной семантической структурой» или «с контрастностью по WCAG».
Но визуальная часть — это поверхность. Под ней: код, разметка, скорость загрузки, доступность для скринридеров, логика индексации поисковиками. Эти слои не видны глазу, однако именно они определяют, увидят ли сайт в поиске и будет ли доступна информация всем пользователям без исключения.
Делимся опытом: с какими частыми противоречиями между красотой интерфейса и его доступностью мы сталкиваемся при разработке сайтов для клиентов.
1. Контрастность текста и фона
Дизайнеры стремятся к интерфейсу с минимумом элементов (скрытые меню-гамбургеры, иконки без подписей, бледные цвета). Пользователям с когнитивными нарушениями или пожилым людям нужна максимальная прямолинейность: текст на кнопках, понятные списки и отсутствие лишних кликов.
Решение
Достигайте порядка и визуальной чистоты через продуманную иерархию, опираясь на полезную информацию.
2. Типографика против читаемости
Использование декоративных, тонких или нестандартных шрифтов делает сайт уникальным. Однако для людей с дислексией или нарушениями зрения они превращаются в нечитаемый текст.
Решение
Выбирайте шрифты без засечек с правильным межстрочным интервалом и возможностью масштабирования.
3. Цвет как единственный источник информации
Фирменная палитра компании может иметь слабый контраст (например, светло-серый текст на белом фоне). Для пользователей с нарушениями цветовосприятия (например, с дальтонизмом) такой текст будет сливаться с фоном.
Решение
Проверяйте цвета на соответствие стандарту WCAG. Текст должен быть достаточно тёмным и максимально контрастным (или светлым) по отношению к фону.
4. Сложная вёрстка и анимация
Дизайнеры часто включает нестандартную сетку (например, хаотичное расположение блоков). Для доступности сайт должен быть линейным, предсказуемым и управляемым с клавиатуры.
Решение
Добавление скрытых вспомогательных элементов (ARIA-тегов) или отказ от чрезмерной анимации.
5. Инновационные элементы управления против клавиатурной доступности
Красивые, но нестандартные элементы интерфейса (необычные ползунки, переключатели или бесконечная лента) влияют на доступность сайта.
Люди с плохим зрением и с нарушениями моторики не смогут ими управлять. Для них эти элементы превращаются в невидимую или непреодолимую преграду, так как они не работают с клавиатуры или программ экранного доступа.
Решение
Проектируйте элементы управления так, чтобы ими можно было полноценно пользоваться с любого устройства, используя базовую навигацию (клавиши Tab, Enter, стрелки). Добавляйте скрытые текстовые метки (ARIA-атрибуты) для озвучивания скринридерами.
Согласно статистическим данным и исследованиям, соблюдение требований доступности аксессибилити и дизайна (UI) увеличивает конверсию, привлекает новых пользователей и повышает качественные показатели сайта в поисковых системах:
- Исследование Semrush показало, что ресурсы с высокими показателями доступности (WCAG-совместимые) привлекают на 23% больше органического трафика и ранжируются в поиске на 27% большему количеству ключевых слов.
- Совместные исследования платформ AccessibilityChecker.org, BuiltWith и сервиса Semrush зафиксировали рост ежемесячного органического трафика после внедрения решений по доступности.
- Снижение показателя отказов (Bounce Rate): Аналитика отчетов показывает, что приведение сайта к стандартам доступности сокращает процент отказов в среднем на 12%.
- По данным отчетов по обеспечению доступности (например, исследования Level Access), устранение барьеров приводит к росту времени, проведенного на сайте, на 20%, и к снижению количества отказов.
Руководство по обеспечению доступности веб-контента (WCAG): 4 основных принципа для сайта
№1. Воспринимаемость (Perceivable)
Контентная информация и компоненты веб-интерфейса должны быть понятны и доступны для любых пользователей, независимо от их физических ограничений.
Как это сделать на сайте
Адаптивность верстки: Контент должен сохранять смысл, порядок чтения и структуру контентной информации при изменении масштаба (до 200%) подстраиваясь под любые экраны (десктоп, мобильные).
Цветовая контрастность: Текст должен быть достаточно контрастным по отношению к фону (коэффициент обычного текста (до 18pt) должен быть не менее 4,5:1 крупного текста (от 18 pt) 3:1, нетекстовые элементы (такие как иконки, границы полей контрастность не менее 3:1).
Текст:
- Разбивайте большие блоки текста и выравнивайте по левому краю для удобства чтения.
- Основной шрифт должен быть не менее 14–16 px (Arial, Verdana, Georgia, Times New Roman), межстрочный интервал 1,5.
- Теги заголовков (от Н1 до H6) для создания четкой иерархии документа и уровней заголовков.
- Ссылки и кнопки должны иметь текст, четко объясняющий, куда они ведут. На кнопках должны отражаться действия.
- Используйте описательные заголовки и названия, поскольку они помогают читателю ориентироваться в браузере и на странице.
- Используйте нумерованные и маркированные списки, чтобы читателю было легче следовать шагам.
Текстовые альтернативы: Картинки, графики, иконки должны иметь текстовое описание (атрибут alt), для использования специальных программ озвучивания с экрана.
Аудио и видео: Добавьте субтитры, расшифровки или описания к аудио- и видеоконтенту, не используйте мерцающие или мигающие элементы.
Таблицы: Предваряйте таблицы вводным текстом, так как не все программы чтения с экрана заранее оповещают о наличии таблицы. Не используйте таблицы, если это не лучший способ представления информации. Таблицы сложны для восприятия программами чтения с экрана.
№2. Управляемость (Operable)
Любые компоненты веб-интефейса и навигации на сайте должны быть доступны для использования любым человеком.
Как это сделать на сайте
Должна быть доступность с клавиатуры, режим переключения версии для слабовидящих, не должно быть движущихся элементов, виджетов которыми нельзя управлять.
№3. Понятность (Understandable)
Информация и логика работы созданного интерфейса, должна быть понятной любому пользователю.
Как это сделать на сайте
- Язык контента должен быть програмно определен в вёрстке.
- Навигация при клике на элементы страниц не должна менять свое место. Такие элементы как, например, «корзина», «поиск» должны быть одинаково оформлены и расположены на всех страницах сайта.
- Все формы должны предоставлять понятные подсказки и давать возможность отменять, проверять или сохранять отправку важных данных.
№4. Надежность (Robustness)
Веб-контент должен быть достаточно стабильным, чтобы одинаково интерпретироваться широким спектром пользовательских программ.
Как это сделать на сайте
- Использование валидного HTML и CSS поможет различным браузерам правильно читать код сайта.
- Использование HTML-тегов обеспечивает корректное распознование всех элементов программами чтения с экрана.
Общие рекомендации: что делать и чего избегать
Убедитесь, что читатели могут получить доступ ко всем частям документа (включая вкладки, кнопки отправки форм и интерактивные элементы), используя только клавиатуру, без мыши или трекпада.
Используйте программу чтения с экрана для тестирования вашей документации. Этот тест поможет вам выявить проблемы с доступностью в вашем контенте и является хорошим способом саморедактирования.
В HTML используйте семантическую разметку. Отдавайте предпочтение собственным элементам, а не пользовательским стилям. Избегайте ненужного форматирования шрифтов.
Если вы документируете продукт, который включает в себя специализированные функции доступности, то явно опишите эти функции.
Не используйте принудительные переносы строк (жёсткие переводы) внутри предложений и абзацев. Переносы строк могут плохо работать в окнах измененного размера или с увеличенным текстом.
По возможности избегайте использования верблюжьего регистра и заглавных букв. Некоторые программы чтения с экрана считывают заглавные буквы по отдельности. Следуйте правилам использования заглавных букв.
Подведем итог
Мнение, что требования доступности вредят эстетике digital-продуктов — не более чем миф.
Современные красивые веб-ресурсы (Apple, Госуслуги, Альфа-Банк) доказывают, что эстетика и доступность могут успешно дополнять друг друга.
Созданные нами проекты лишь подтверждают: технологичность, визуальная привлекательность и соответствие стандартам доступности достигаются без ущерба друг для друга.
Автор статьи:
