WCAG 2.1, упрощенный: как сделать ваш сайт доступным

Принципы веб-доступности, рекомендации, инструменты тестирования и многое другое

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

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

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

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

(Особенно, если ваш бизнес находится в сфере образования или предоставляет важные услуги. Не создавая доступный контент, вы в некотором смысле говорите: «Людей с ограниченными возможностями не стоит обучать. Вы не достойны нашего времени или внимания».)

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

Например, пробовали ли вы когда-нибудь использовать программу чтения с экрана на своем сайте? Или вы вообще умеете пользоваться программой чтения с экрана? Вы знаете, какие существуют инструменты для аудита вашего сайта на предмет доступности? Вы знаете и понимаете, каким руководящим принципам вы должны следовать?

Принципы WCAG 2.1

WCAG 2.1 описывает четыре принципа доступности. Веб-сайты должны быть P доступными, O доступными, U понятными и R устойчивыми (POUR ).

Чтобы контент был воспринимаемым, пользователи должны понимать, что контент существует. Его нельзя скрыть от пользователей, которые не могут использовать все свои чувства.

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

Чтобы информация была понятной, пользователи должны понимать содержание страницы, а также понимать, как работать со страницей.

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

Теперь, когда мы понимаем на высоком уровне, каковы руководящие принципы веб-доступности, давайте подробно рассмотрим каждый принцип. Вот тут-то и пригодятся 13 правил.

1. Воспринимаемый

Вот несколько рекомендаций, которым необходимо следовать, чтобы ваш контент был воспринимаемым:

Правило 1.1. Текстовые альтернативы. Предоставьте текстовые альтернативы любому нетекстовому содержанию на странице. Например, недекоративные изображения должны иметь атрибут alt, описывающий изображение. (Декоративные изображения, такие как фоновые изображения, могут иметь просто атрибут alt с пустой строкой в качестве его значения.)
Правило 1.2. Временные медиа. Аудио- и видеоклипы должны включать субтитры или стенограммы, чтобы помочь слепым и глухим.
Правило 1.3 Адаптируемость. Контент должен иметь возможность отображаться по-разному и в разных макетах без потери информации. Например, структура HTML вашего веб-сайта должна читаться в разумном порядке, если вы удалите весь CSS. Когда пользователь просматривает ваш сайт на мобильном устройстве или планшете, ориентация области просмотра не должна ограничиваться только альбомной или только книжной.
Правило 1.4 Различимость. При представлении информации, например об ошибках, во время заполнения формы пользователем используйте комбинацию цвета и значков, чтобы дальтоники по-прежнему могли понимать ваши сообщения. Цвет не должен быть единственным визуальным средством отображения информации. Цветовой контраст между передним и задним планом должен быть подходящим (как правило, вам следует стремиться к контрастности не менее 4,5). Если звук воспроизводится на вашем сайте более трех секунд, у пользователя должна быть возможность остановить звук или изменить громкость. Пользователь должен иметь возможность изменять размер шрифта на экране, не нарушая макета сайта. Пользователю не нужно прокручивать страницу одновременно по вертикали и горизонтали, чтобы видеть контент на странице. Кнопки и входы должны иметь индикаторы наведения и фокуса, чтобы пользователь знал, какой элемент в данный момент активен. (Это руководство охватывает множество вещей!)

2. Работоспособен

Вот несколько рекомендаций, которым нужно следовать, чтобы сделать ваш пользовательский интерфейс работоспособным:

Правило 2.1. Доступность с клавиатуры. Пользователь должен иметь возможность использовать ваш веб-сайт и перемещаться по нему, используя только клавиатуру. Вы можете легко проверить это самостоятельно, просто используя клавиши Tab, Enter, Space, Escape и клавиши со стрелками на клавиатуре при посещении собственного сайта. Можете ли вы дотянуться до каждой кнопки и ввода на странице? Можете ли вы щелкнуть каждую кнопку на странице с помощью клавиши Enter или пробела? (Пожалуйста, не делайте глупостей, таких как добавление прослушивателей кликов в div и span!) Попадаете ли вы в ловушки фокуса, когда у вас нет возможности выйти из определенной области страницы? Помните, что не все пользуются мышью.
Правило 2.2. Достаточно времени. Пользователям нужно достаточно времени, чтобы прочитать содержимое на странице и ответить на уведомления. Если в вашем приложении есть тосты, не заставляйте их исчезать через несколько секунд; пусть они остаются на странице, пока пользователь их не уволит. Если сеанс пользователя скоро истечет, предупредите его заранее и дайте возможность продлить сеанс. За исключением случаев, когда функциональность, основанная на времени, является абсолютно важной для вашего приложения (например, сайт бронирования билетов, который позволяет вам только удерживать билеты перед их покупкой в течение длительного времени), не используйте таймеры или временные ограничения вообще.
Правило 2.3. Судорожные припадки и физические реакции. Это должно быть довольно просто. Не делайте на своем сайте действий, которые могут вызвать судороги. Не используйте контент, который мигает более трех раз. Не добавляйте фривольные анимации только для развлечения. Любое движение на странице должно служить определенной цели и должно быть тщательно продумано.
Правило 2.4. Навигация: упростите пользователям навигацию по вашему сайту. Добавьте кнопку «перейти к содержанию» для пользователей клавиатуры, которая позволяет им пропускать навигационные ссылки и переходить прямо к содержанию главной страницы. Используйте правильные уровни заголовков и не пропускайте уровни заголовков! (Элемент h3 не должен следовать за элементом h1 без элемента h2 первым.) Заголовки невероятно важны для пользователей программ чтения с экрана. При переходе по сайту убедитесь, что порядок фокусировки имеет смысл. Как упоминалось ранее, индикаторы фокуса должны быть видимыми, чтобы пользователь знал, на каком элементе они в настоящее время сосредоточены. У вашей страницы должен быть заголовок. Панировочные сухари следует использовать, чтобы пользователь знал, где они находятся на вашем сайте и как они туда попали.
Правило 2.5. Условия ввода. Пользователи должны иметь возможность управлять вводом с клавиатуры на настольном компьютере / ноутбуке, а также с сенсорного экрана на мобильном устройстве или планшете. Не делайте кнопки на экранах мобильных устройств слишком маленькими, чтобы было сложно нажать правильную кнопку. Оптимальный минимальный размер сенсорных мишеней - не менее 44 x 44 пикселей.

3. Понятный

Чтобы сделать вашу информацию понятной, вот несколько рекомендаций, которым необходимо следовать:

Правило 3.1 для чтения. Ваша целевая аудитория должна уметь читать и понимать текст на странице. Избегайте жаргона без объяснений. Используйте соответствующий атрибут lang в вашем теге html, чтобы определить язык, на котором вы пишете. Для сокращений используйте тег abbr.
Правило 3.2 Предсказуемость. Убедитесь, что ваш веб-сайт ведет себя предсказуемо. Будьте последовательны в том, как выглядят ваши кнопки и как выглядят ваши ссылки. Если у вас есть компонент глобальной навигации, который отображается на каждой странице, убедитесь, что ссылки всегда находятся в одном и том же порядке и в одном месте. Если компоненты выглядят одинаково, они должны вести себя одинаково.
Рекомендация 3.3 Помощь при вводе. Вы должны помогать пользователям избегать и исправлять ошибки при использовании вашего приложения. Используйте ярлыки на всех ваших входах. При необходимости используйте текст-заполнитель, но не используйте текст-заполнитель вместо метки! Когда пользователь заполняет форму, как можно скорее отправьте полезные сообщения обратной связи. Определите, какой именно ввод содержит ошибку и как пользователь может исправить ошибку. Для длинных или многостраничных форм разрешите пользователям просматривать свои данные перед заключительным этапом отправки.

4. Надежный

Вот несколько рекомендаций, которые помогут сделать ваш сайт надежным:

Совместимость с правилом 4.1. Ваш сайт должен быть совместим с широким спектром пользовательских агентов и должен быть максимально ориентирован на будущее. Используйте правильный HTML, чтобы ваш контент анализировался правильно. Используйте семантические элементы HTML, чтобы программы чтения с экрана могли лучше понять структуру вашей страницы. Используйте элементы с role=status и role=alert, чтобы предоставлять программам чтения с экрана обновленную информацию об успешном или неудачном выполнении действий, когда пользователь взаимодействует с вашим приложением.

Бонус: как проверить доступность

На данный момент вы знаете все принципы и рекомендации, содержащиеся в WCAG 2.1. Но что теперь? С чего начать? Как вы оцениваете, насколько хорошо вы делаете свой веб-сайт доступным?

Ниже приведены некоторые идеи, инструменты и расширения, которые мне показались полезными:

Ручное тестирование навигации только с клавиатуры

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

Ручное тестирование с помощью программы для чтения с экрана

Если вы не умеете пользоваться программой чтения с экрана, познакомьтесь с ней. Популярные варианты включают JAWS, VoiceOver для iOS и NVDA для Windows. Сначала может быть сложно научиться правильно пользоваться программой чтения с экрана, но это того стоит.

Как только вы поймете основные команды для выбранной программы чтения с экрана, попробуйте использовать ее на своем сайте. Вы быстро поймете, как должно быть неприятно быть слепым пользователем Интернета.

Расширения Chrome

Расширение Axe Chrome может предоставить анализ любой страницы и помогает выявить многие проблемы с доступностью. Полный список их правил можно найти в их репозитории GitHub.

Accessibility Insights for Web Chrome extension - аналогичное расширение, которое также может анализировать ваш сайт на предмет проблем с доступностью.

eslint-plugin-jsx-a11y

Вы можете использовать подключаемый модуль ESLint eslint-plugin-jsx-a11y, чтобы устранить проблемы с доступностью в JSX. Просто добавьте eslint и этот плагин к зависимостям разработчика вашего пакета вместе с любыми другими плагинами, которые вы обычно используете, и все готово. Как и любой другой плагин ESLint, этот можно настроить на выдачу предупреждений или ошибок на основе правил доступности, которым вы решите следовать.

Заключение

Если вы зашли так далеко, спасибо за чтение! Я надеюсь, что к настоящему времени вы понимаете мотивацию сделать свой сайт доступным, принципы и рекомендации, которым вы должны следовать, и то, как вы можете провести некоторое тестирование доступности.

А теперь иди и сделай мир лучше и доступнее!