Контрольный список доступности веб-сайта SaaS

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

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

Доступность — жизненно важная часть современного дизайна взаимодействия с пользователем как для вашего веб-сайта SaaS, так и для продукта. Последняя итерация Руководства по обеспечению доступности веб-контента (WCAG) 2.1, разработанного Консорциумом World Wide Web (W3C), охватывает огромный спектр рекомендаций по повышению доступности веб-контента.

Зачем делать ваш SaaS-сайт доступным?

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

• По данным ВОЗ, люди с какой-либо формой инвалидности составляют 15% населения мира.
• Каждый четвертый взрослый — или 61 миллион человек — в Соединенных Штатах имеет инвалидность.

Сделать ваш веб-сайт SaaS более доступным — это не только правильно, но и неспособность сделать это означает, что вы отказываетесь от потенциальных клиентов еще до того, как у вас будет возможность представить свой продукт.

Кроме того, недоступность вашего SaaS может привести к дорогостоящим судебным искам.

• В 2018 году число исков Федерального агентства по борьбе с наркотиками увеличилось на 181% по сравнению с 2017 годом.
• Количество судебных исков о том, что веб-сайты, приложения и видео недоступны для людей с ограниченными возможностями, выросло на 64% в первой половине 2021 года по сравнению с 2020 годом.

4 основных принципа доступного веб-дизайна

Руководство по обеспечению доступности веб-контента построено на четырех принципах:

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

Уровни доступности WCAG

Существует три уровня соответствия доступности (A, AA и AAA), при этом уровень A соответствует минимальным требованиям (не полностью доступен), а AAA — наиболее оптимизированному уровню доступности.

• Уровень A: Самый низкий уровень доступности, удовлетворяющий минимальному набору требований. Многим группам пользователей с ограниченными возможностями будет сложно или невозможно получить доступ к содержимому таких веб-сайтов.
• Уровень AA: более высокий уровень доступности. Некоторым группам пользователей будет сложно получить доступ к информации на таких веб-сайтах. Достижение этого уровня устранит основные препятствия для доступа к веб-контенту для пользователей с ограниченными возможностями.
• Уровень AAA: самый высокий уровень доступности. Удовлетворение этим критериям обеспечит оптимальное взаимодействие с пользователем для людей с ограниченными возможностями.

Контрольный список доступности веб-сайта SaaS из 14 пунктов

Этот контрольный список не является исчерпывающим, но охватывает приоритетные элементы, которые необходимо учитывать, чтобы сделать ваш веб-сайт SaaS более доступным и соответствующим требованиям:

• Установите четкую структуру заголовка HTML с правильным использованием H1, H2 и т. д.
• Сделайте гиперссылки на странице удобными для пользователя:
  • Подчеркните встроенный связанный текст и выберите цвет, отличный от остального содержимого.
  • Напишите описательный анкорный текст, например «Загрузите наше бесплатное руководство по специальным возможностям» вместо «Нажмите здесь».
• Добавьте описательный замещающий текст для всех изображений и таблиц, чтобы контент могли использовать люди, использующие вспомогательные технологии, такие как программы чтения с экрана.
• Убедитесь, что у вас есть субтитры, встроенные титры или, по крайней мере, текстовые расшифровки для видео- и аудиоконтента.
• Используйте цвета осторожно:
  • Имейте адекватный цветовой контраст между различными элементами (например, текстом и кнопками) и фоном.
  • Убедитесь, что только цвета не используются для передачи информации пользователям.
  • Используйте шаблоны или текстуры для обозначения визуальных различий в диаграммах, графиках и т. д.
• Выбирайте доступные шрифты, чтобы символы можно было легко отличить друг от друга, а в шрифте было достаточное расстояние между буквами.
• Обеспечьте возможность легко изменять размер текста, в то время как страница по-прежнему работает должным образом во всех браузерах.
• Сделайте свой SaaS-сайт удобным для клавиатуры:
  • Убедитесь, что все части вашего веб-сайта доступны без мыши, только с помощью клавиш клавиатуры. Все действия, которые можно выполнять с помощью мыши, должны выполняться и с помощью клавиатуры.
  • Сделайте навигацию по сайту интуитивно понятной и лаконичной, включив в меню только необходимые категории.
  • Показать видимый индикатор фокуса, который указывает на активный элемент, выбранный пользователем в данный момент.
• Сделайте ваши формы доступными:
  • Определите четкие границы и границы.
  • Пометьте элементы формы, чтобы объяснить, какие данные необходимо ввести.
  • Отметьте обязательные поля формы как обязательные.
  • Дайте полезные сообщения об ошибках.
• Для страниц с ограничением по времени разрешите пользователям настраивать ограничение или отключать его.
• Убедитесь, что текстовый контент грамматически верен и написан простым языком, чтобы облегчить чтение и понимание. Определите сокращения или необычные слова в глоссарии.
• На странице не должно быть элементов, которые мигают чаще трех раз в секунду.
• Используйте семантические элементы HTML, чтобы эффективно описать назначение элементов страницы.
• Опубликуйте заявление о доступности, в котором указывается целевой уровень доступности вашей компании и ее усилия по достижению соответствия требованиям ADA.

Отборные бесплатные инструменты оценки доступности

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

• WAVE : набор инструментов оценки, которые помогают авторам сделать свой веб-контент более доступным для людей с ограниченными возможностями.
• WebAccessibility.com : Получите общую оценку соответствия W3C из 100, чтобы увидеть, насколько WCAG соответствует вашему веб-сайту SaaS.
• SortSite : проверьте свой веб-сайт на соответствие стандартам доступности WCAG и разделу 508 Закона о реабилитации. Он проверяет доступность, неработающие ссылки, совместимость кода браузера, поисковую оптимизацию и другие проблемы с удобством использования.
• ACE by accessiBe : полностью автоматизированный инструмент доступности, который дает немедленный и точный ответ на вопрос, соответствует ли ваш веб-сайт требованиям ADA и WCAG.

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