Люди с ограниченными возможностями тоже пользуются Интернетом. К сожалению, они не имеют доступа ко всем сайтам, ведь многие ресурсы для них не приспособлены. Доступность, accessibility (или инклюзивность), является условием успеха веб-сайта у пользователей с ограниченными физическими или когнитивными возможностями.
Особенно это важно для сайтов медицинских организаций, онлайн-аптек и ретейла товаров для здоровья, где доля таких посетителей гораздо больше, чем у среднего ресурса в Интернете.
Аудитория
Стандарты, как и доработки, которые вам следует внедрить на сайте, в основном ориентированы на пользователей со следующими особенностями здоровья:
- Различные проблемы со зрением, вплоть до полного его отсутствия;
- Проблемы восприятия цветов, в том числе Дальтонизм;
- Невозможность использовать привычные клавиатуру и (или) мышь, в том числе из-за травм;
- Нарушения мелкой моторики рук вследствие различных заболеваний;
- Нарушения слуха;
- Дислексия.
Регламенты и стандарты
Существует интернет-инициатива под названием WAI (Web Accessibility Initiative), разрабатываемая Консорциумом Всемирной паутины W3C, чтобы помочь вебмастерам сделать свои сайты доступными для всех. Практические рекомендации и стандарты по оптимизации воплотились в гайдлайнах WCAG (Web Content Accessibility Guidelines).
В качестве дополнительного можно использовать американский стандарт ADA (Americans with Disabilities Act). Он подробен, но очень строг и формализован, из-за чего понять и работать по нему непросто.
Основные решения, которые улучшат инклюзивность сайта
- доступность контента для считывателей экрана,
- лаконичные и понятные заголовки,
- информативные описания (текст и title) ссылок,
- изображение с alt-текстом,
- субтитры для аудио и видео,
- навигация без использования мыши (с помощью клавиатуры или специальных инструментов),
- навигация без использования клавиатуры (виртуальная клавиатура на экране),
- легко читаемые базовые шрифты, возможность изменять размер и типографические параметры шрифтов,
- достаточная контрастность цветов и темный (ночной) режим,
- специальная разметка кода ARIA для определения ролей элементов станицы.
Тестирование веб-сайта на доступность
Аудит доступности веб-сайтов – это полезный тест, проводимый экспертами по веб-разработке. Они проверяют соответствие веб-сайта стандартам WCAG и смотрят насколько хорошо платформа поддерживает потребности людей с нарушениями.
Однако, если у вас нет возможности обратиться к экспертам, провести базовую проверку accessibility сайта можно самостоятельно. Как вручную, так и с помощью онлайн-сервисов.
Автоматизированные сервисы проверки доступности
Эти 3 инструмента дадут вам общую информацию о доступности вашего сайта для людей с ограниченными возможностями. Рекомендую применять не один, но все разом:
1. WAVE
Все, что вам нужно сделать с инструментом WAVE – это указать URL-адрес.
После этого вы получите отчет об ошибках доступности. Эта платформа использует цветовую градацию для обозначения уведомлений, ошибок, функций и т.д.
Расширение WAVE доступно для браузеров Chrome, Microsoft Edge и Firefox. Есть возможность работать по API.
2. A11Y Color Contrast Accessibility Validator
A11Y Color Contrast Accessibility Validator анализирует цветовой контраст на сайте в соответствии с правилами WCAG.
Чтобы получить отчет о доступности цветового контраста, необходимо указать URL или самостоятельно выбрать цветовую пару. Эта платформа также дает рекомендации по устранению проблем, связанных с контрастом.
3. Accessibility Checker от Intent Based LTD
Accessibility Checker – это бесплатный комплексный инструмент, который поможет проверить контрастность, корректность HTML-разметки страницы для скринридеров, валидность разметки ARIA, и некоторые другие параметры.
Каждая ошибка имеет небольшое, но достаточно понятное описание. Также есть подсказки, что можно дополнительно протестировать вручную.
Ручная проверка доступности сайта
С помощью ручного тестирования вы сможете узнать о проблемах, не замеченных автоматическими инструментами проверки доступности. Что лучше тестировать вручную? Такие вещи, как соответствие реальности alt-текстов изображений, навигация с помощью клавиатуры или виртуальная клавиатура должны обязательно проверяться человеком.
Тестирование с помощью считывателя экрана
Использование считывателя экрана для тестирования доступности – один из лучших подходов, поскольку он поможет вам найти ошибки, которые влияют на посетителей с серьезными нарушениями зрения. Активируйте считыватель экрана, чтобы увидеть, что нужно улучшить.
Популярные бесплатные программ для чтения экрана, которые можно использовать при тестировании:
- NVDA (для Windows),
- VoiseOver (предустановлен в iOS и macOS),
- TalkBack (Android-устройства),
- Orca (предустановлен в в ОС семейства Linux).