Полное руководство по веб-доступности

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

Что на самом деле означает доступность

Международный ориентир это Руководство по обеспечению доступности веб-контента, известное как WCAG. Текущая версия это WCAG 2.2, и большинство организаций стремятся к уровню AA, именно на этот уровень ссылаются законы, такие как Европейский акт о доступности. Запоминать рекомендации наизусть не нужно, но полезно знать четыре принципа, на которых они основаны. Страница должна быть:

• Воспринимаемой. Люди могут воспринять содержимое, независимо от того, видят они его, слышат или осязают. У изображений есть текстовые альтернативы, у видео есть субтитры, а текст обладает достаточным контрастом.
• Управляемой. Люди могут пользоваться страницей тем, что у них есть, мышью, только клавиатурой, переключателем или голосом. Ничто не блокирует их, и ничто не зависит от чувства или действия, которые им недоступны.
• Понятной. Содержимое читается ясно, а интерфейс ведёт себя предсказуемо, поэтому люди не удивлены и не сбиты с толку.
• Надёжной. Страница построена так, что браузеры и вспомогательные технологии, сейчас и в будущем, могут интерпретировать её без сбоев.

Почти всё практическое в этом руководстве восходит к одной из этих четырёх идей.

Для кого это

Заманчиво представить себе небольшую группу пользователей, но доступность шире. Примерно каждый шестой человек живёт со значительной инвалидностью, и гораздо больше людей выигрывают от доступного дизайна, не считая себя людьми с инвалидностью: пожилой клиент, человек с временной травмой, посетитель с медленным соединением или любой, кто пользуется телефоном на ярком солнце. Проектирование для крайних случаев делает опыт лучше и для середины. Субтитры помогают в шумной комнате, сильный контраст помогает на дешёвом экране, а понятный порядок фокуса помогает каждому, кто предпочитает клавиатуру.

Основы, которые важнее всего

Хорошая новость в том, что работа с наибольшей отдачей структурная, а не декоративная. Заложите эти основы правильно, и большая часть пути к AA пройдена.

Используйте правильный элемент HTML

Настоящая кнопка, настоящая ссылка и настоящий список сразу несут в себе встроенное поведение и смысл, бесплатно. Пересоберите их из обычных стилизованных блоков, и вам придётся вручную возвращать фокус, поддержку клавиатуры и корректное объявление, и большинство команд что-то упускает. Это привычка с самой высокой отдачей в доступности. Мы подробно разбираем её в статье почему семантический HTML по-прежнему важен.

Сделайте так, чтобы всё работало с клавиатуры

Многие люди вообще не пользуются мышью. Каждый элемент управления должен быть достижим и управляем только с клавиатуры, в логичном порядке, с контуром фокуса, который действительно видно. Это ещё и самый быстрый ручной тест, который вы можете провести на своём сайте. Смотрите навигация с клавиатуры, тест, который проваливает большинство сайтов.

Выбирайте цвета, которые сможет прочитать каждый

Тексту нужен достаточный контраст с фоном, и цвет никогда не должен быть единственным способом передать смысл. Это одна из самых частых ошибок и одна из самых простых в исправлении, когда вы знаете целевые значения. Наше руководство по выбору доступного цветового контраста разбирает цифры по шагам.

Пишите настоящие текстовые альтернативы

Изображениям, несущим смысл, нужен альтернативный текст, чтобы пользователи программ чтения с экрана получали ту же информацию, а декоративные изображения нужно помечать как декоративные, чтобы они пропускались. Хороший alt-текст также помогает поисковым системам понимать ваши изображения. Смотрите alt-текст для SEO и доступности.

Создавайте формы, которые люди могут заполнить

Формы это место, где многие посетители решают стать клиентами, поэтому запутанная или недоступная форма стоит вам денег напрямую. Подписанные поля, понятные ошибки и разумная группировка помогают каждому дойти до конца. Мы объясняем как в статье доступные формы приносят больше заявок.

Почему это выгодно вашему бизнесу

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

Есть и тихий бонус. Та же структура, что помогает вспомогательным технологиям, осмысленные заголовки, настоящие ориентиры, описательные ссылки и правильные альтернативы, это ровно то, что читают поисковые системы, чтобы понять страницу. Доступность и SEO построены на одних и тех же основах, поэтому работа окупается дважды.

Замечание об электронной коммерции

У интернет-магазинов есть свои болевые точки: галереи товаров, фильтры, выбор вариантов и оформление заказа, которое не должно терять никого. Недоступное оформление заказа это брошенная покупка. Если вы продаёте онлайн, чек-лист доступности для электронной коммерции охватывает самые важные части.

Как тестировать

Чтобы начать, лаборатория не нужна. Короткая повторяемая процедура выявляет большинство проблем:

1. Уберите мышь и пройдите всю страницу клавишей Tab. Можете ли вы достичь всего и всем воспользоваться, и всегда ли видно, где вы находитесь?
2. Запустите автоматическую проверку, например axe или Lighthouse. Она не найдёт всё, но быстро отметит очевидные ошибки.
3. Проверьте цветовой контраст по целевым значениям AA.
4. Попробуйте программу чтения с экрана в течение десяти минут. В большинстве систем она уже встроена.

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

С чего начать

Если всё это кажется большим объёмом, начните с основ: корректный HTML, рабочий порядок клавиатуры и достаточный контраст. Эти три пункта сами по себе убирают большинство барьеров. Дальше работайте над alt-текстом, формами и остальным как над постоянной привычкой, а не разовым проектом.

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