Все, что вам нужно знать о доступности веб-сайтов

Каждый пользователь, который посещает ваш веб-сайт, должен иметь право на понятный пользовательский опыт, независимо от его способностей или их отсутствия. Это не только наше мнение, но в некоторых странах это закон. Но это не единственная причина убедиться, что ваш сайт соответствует стандартам доступности. Согласно отчету об инвалидности, 1 миллиард человек живут с инвалидностью, что эквивалентно 15% населения мира . Ваш веб-сайт будут использовать люди с физическими, зрительными, когнитивными, неврологическими, моторными и слуховыми нарушениями. Хотя использование цифр в качестве причины кажется неприятным, это значительное количество потенциальных посетителей. Сделать ваш сайт доступным для всех стоит затраченных усилий.

Разрыв между доступными веб-сайтами и теми, которые недоступны, обычно происходит из-за бюджета. Чтобы сделать ваш веб-сайт инклюзивным, просто требуется больше усилий во время разработки, а больше усилий означает больше денег. Но, если все сделано стратегически и с помощью CMS, такой как Drupal, это не должно быть значительным усилием. Ядро Drupal поддерживает проектирование и разработку веб-сайтов, соответствующих стандартам WCAG 2.0 и ATAG 2.0. На самом деле существует целое сообщество (сообщество специальных возможностей Drupal), занимающееся улучшением стандартов специальных возможностей и поддержанием их в актуальном состоянии. Можно даже сказать, что доступность — это основная сила Drupal.

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

Что такое веб-доступность?

Веб-доступность — очень важный аспект в веб-разработке. С точки зрения непрофессионала, веб-доступность обеспечивает доступ к вашему веб-сайту для всех, независимо от их ограниченных возможностей. Хотя это часто предполагается, доступность касается не только людей с ограниченными возможностями. Как дееспособный человек, вы можете оказаться в определенных обстоятельствах — ситуативных или временных, — которые могут повлиять на ваш доступ к веб-сайту.

Почему веб-доступность важна

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

• Увеличьте охват аудитории
• Избегайте юридических проблем ( вспомните судебный процесс против Бейонсе в 2019 году, когда ее веб-сайт не соответствовал ADA (Закон об американцах с ограниченными возможностями))
• Улучшение пользовательского опыта для доступности также означает, что вы улучшаете свой общий показатель UX.
• Улучшить рейтинг вашего сайта в поисковых системах

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

Соответствие и уровни

Консорциум World Wide Web (W3C) разработал и выпустил набор руководств — WCAG (Рекомендации по доступности веб-контента), которые регулируют стандарты доступности в Интернете. Критерии успеха этих стандартов (WCAG 2.0, WCAG 2.1 и WCAG 2.2) имеют три уровня соответствия:

• Уровень А
• Уровень АА
• Уровень ААА

Уровень A — это минимальный уровень специальных возможностей, который охватывает самые основные требования к функциям специальных возможностей.

Уровень AA — для этого уровня требуется все, что есть на уровне A, плюс несколько дополнительных требований. Когда веб-сайт соответствует этому уровню, это очень важно, потому что многие из самых больших барьеров доступности устранены.

Уровень AAA . Для уровня AAA требуется все, что есть на уровнях A и AA, плюс несколько дополнительных требований. Этого уровня трудно достичь большинству веб-сайтов, и это самый высокий уровень доступности по стандартам WCAG.

Как узнать, доступен ли ваш сайт?

WCAG установила 4 принципа и 13 рекомендаций по обеспечению доступности веб-сайтов. Несоблюдение любого из этих четырех принципов сделает ваш веб-сайт недоступным для пользователей с ограниченными возможностями. Эти принципы известны как принципы POUR.

1. Воспринимаемый
2. Действующий
3. понятно
4. Крепкий

Воспринимаемый — все рекомендации, сгруппированные под воспринимаемым, вращаются вокруг обеспечения того, чтобы люди могли найти ваш контент.

Работоспособность — вам необходимо убедиться, что ваш сайт работоспособен. Люди должны иметь возможность пользоваться вашим сайтом.

Понятный — люди должны быть в состоянии понять ваш сайт.

Надежность — ваш веб-сайт должен быть совместим со всеми браузерами, операционными системами и устройствами.

Руководство по доступности

Теперь у каждого принципа есть свой собственный набор руководящих принципов , которые мы собираемся обсудить здесь:

Воспринимаемые рекомендации

1.1) Текстовые альтернативы . Первая рекомендация по восприятию, воспринимаемая 1.1 , требует, чтобы все нетекстовое содержимое имело текстовую альтернативу. Это означает, что изображения должны иметь осмысленный альтернативный текст. Альтернативный текст должен описывать, что происходит на изображении.

1.2) Медиа на основе времени - Воспринимаемый 1.2 требует наличия альтернативных вариантов для мультимедиа на основе времени. Добавьте субтитры к видео для людей с нарушениями слуха. Близкие подписи могут помочь дать им контекст.

1.3) Адаптируемый - Воспринимаемый 1.3 требует, чтобы контент мог быть представлен различными способами без потери контекста.

1.4) Различимость. Последняя рекомендация для воспринимаемости — Воспринимаемость 1.4 , и она требует, чтобы контент можно было визуально отделить от фона. Это означает, что должен быть достаточный контраст между цветом текста и цветом фона. Текст должен иметь минимальный коэффициент контрастности 4,5.

Действующие рекомендации

2.1) Доступность с клавиатуры . Первая директива 2.1 об операционной доступности требует, чтобы доступ ко всем частям веб-сайта был возможен только с помощью клавиатуры .

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

2.3) Судороги и физические реакции - Operaable 2.3 требует, чтобы контент не был разработан таким образом, чтобы вызвать судороги. Анимация и видео не должны мигать чаще 3 раз в секунду.

2.4) Навигация — Работа 2.4 требует, чтобы люди могли перемещаться по веб-сайту и понимать, где они находятся на веб-сайте. Все ссылки, элементы ввода и кнопки на странице должны иметь сфокусированное состояние, чтобы указать, где человек находится на экране, когда пользователи перемещаются с помощью вкладок.

2.5) Способы ввода . Последним руководством для Operaable является Operaable 2.5 , и оно требует, чтобы ко всем частям веб-сайта можно было получить доступ с помощью других устройств ввода, помимо клавиатуры. По сути, вам нужно убедиться, что ваш веб-сайт работает с мышью, устройствами с сенсорным экраном и преобразованием речи в текст.

Понятные рекомендации

3.1) Удобочитаемый — понятный 3.1 требует, чтобы содержимое было читабельным и простым для понимания. Используйте простой язык и старайтесь избегать жаргона.

3.2) Предсказуемость — понятность 3.2 требует, чтобы веб-страницы были предсказуемы в том, как они выглядят и работают. Контент на каждой странице будет разным, но основная структура страницы должна оставаться неизменной. Навигация, порядок ссылок и поиск всегда должны быть в одном и том же месте на странице.

3.3) Помощь при вводе — понятно. 3.3 требует, чтобы людям было легко исправлять и избегать ошибок.

Надежные рекомендации

4.1) Совместимость . Существует только одна рекомендация в отношении надежности, и это 4.1 . Это требует, чтобы веб-сайт был совместим со всеми браузерами, операционными системами и устройствами. Это достижимо путем написания корректного семантического HTML. Если по какой-то причине веб-сайт все еще нуждается в помощи специальных возможностей, добавьте некоторые атрибуты ARIA.

Как проверить доступность?

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

• Волна
• Маяк

Справочные сайты

См. приведенные ниже сайты W3C для ознакомления со стандартами и рекомендациями.

• https://www.w3.org/
• https://www.w3.org/WAI/
• https://www.w3.org/WAI/standards-guidelines/wcag/
• https://www.w3.org/WAI/WCAG21/quickref/