Советы по самостоятельному тестированию доступности для WordPress

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

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

Первоначально выпущенная как версия 2.0 в 2008 году и разработанная Консорциумом World Wide Web (W3C), Рекомендации по доступности веб-контента (WCAG) являются золотым стандартом доступности в Интернете. Текущая версия, WCAG 2.1, описывает лучшие практики в области веб-доступности в 4 различных категориях: воспринимаемая, действующая, понятная и надежная. Ожидается, что следующая версия, 2.2, будет выпущена в конце 2022 года для дальнейшего определения существующих правил и добавления нескольких новых правил.

Кроме того, доступность укоренилась в сообществе WordPress, и они стремятся включить лучшие практики доступности в само программное обеспечение. Некоторые разработчики WordPress делают все возможное в своих темах и плагинах. Например, собственная тема Total WPExplorer держит доступность на переднем плане настолько, что разработчик AJ часто сам регулярно улучшает доступность.

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

Дизайн и начальная сборка

Стандарты веб-доступности следует учитывать на протяжении всего проекта WordPress. Хотя процессы тестирования после сборки, скорее всего, выявят любые ошибки, которые были пропущены при первоначальной сборке, всегда лучше создать сайт как можно более «чисто» с первого раза. На этом этапе проекта вашего веб-сайта рассмотрите следующее:

Цветовой контраст

Одним из самых простых веб-элементов для проверки доступности являются цвета. WCAG 2.1 определяет определенные коэффициенты цветовой контрастности для любых двух цветов на веб-сайте (передний план и фон). Коэффициент контрастности должен быть не менее 4,5:1 для текста нормального размера (менее 18 pt) и 3 : 1 для более крупного текста (18 pt и выше).

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

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

Резервные цвета

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

Представьте, что у вас есть панель с большим изображением и белым текстом сверху. Когда изображения отключены в веб-браузере, фон сайта по умолчанию белый. Этот белый текст теперь невидим на белом фоне. Что, если бы это был важный контент, например призыв к действию или ценностное предложение?

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

Несколько вариантов навигации

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

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

Другим вариантом может быть добавление функции поиска на ваш сайт, чтобы пользователь мог быстро найти весь ваш сайт по определенному ключевому слову или фразе. По умолчанию WordPress включает базовый виджет поиска, который вы можете использовать на боковой панели или в нижнем колонтитуле, но в Gutenberg также есть блок поиска (как и в большинстве других конструкторов страниц), и часто разработчики тем встраивают окно поиска или значок в заголовки темы. Кроме того, вы можете настроить и улучшить функциональность поиска WordPress с помощью множества полезных плагинов.

Форма обратной связи о доступности

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

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

Процессы тестирования после сборки

После того, как большая часть вашего сайта построена, пришло время начать более углубленное тестирование доступности. Это должно включать автоматизированное тестирование и ручное тестирование. Автоматизированное тестирование — отличный ресурс и экономия времени для выявления определенных проблем. Однако доступность — это забота человека, и ИИ не в состоянии распознать все присутствующие нюансы. Поэтому так же важно протестировать отдельные элементы сайта вручную.

Автоматизированное тестирование

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

Чтобы быстро понять, соответствует ли ваш сайт базовым стандартам доступности, воспользуйтесь инструментом WAVE, который представляет собой набор автоматических инструментов оценки, которые, по сути, сканируют веб-страницу и сообщают о сбоях WCAG и элементах, требующих дополнительного изучения. С помощью расширения для браузера инструмент WAVE будет обозначать очевидные сбои доступности красным цветом. Они подразделяются на ошибки и ошибки контраста. Ошибки обычно связаны с кодировкой вашего сайта. Ошибки контрастности возникают, когда ваша цветовая схема не соответствует стандартам контрастности (рассматривалось ранее в этой статье).

Когда вы будете готовы устранить любые ошибки контрастности на своем сайте, вы можете воспользоваться дополнительными опциями, такими как Equalize Digital Accessibility Checker, которые могут упростить процесс корректировки в серверной части вашего сайта. Бесплатная версия плагина будет автоматически проверять страницу и основные сообщения, чтобы сообщать о регулярных ошибках и ошибках контраста на каждой странице. Обновление до профессиональной версии позволяет сканировать пользовательские типы сообщений. Плагин позволяет легко выявлять ошибки в коде и вносить изменения по мере необходимости.

Ручное тестирование

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

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

Тестирование масштабирования страницы должно проверить, можно ли увеличить страницу до 200% без потери содержимого или функциональности. Это должно быть возможно, используя только собственные возможности масштабирования браузера и никакие другие вспомогательные технологии. Вы также должны убедиться, что увеличение масштаба не требует от пользователя прокрутки в обоих направлениях (сверху-вниз и влево-вправо).

Некоторые пользователи не могут (или предпочитают не использовать) мышь для навигации по веб-сайту. Вместо этого они будут использовать клавиатуру для навигации, часто используя клавишу TAB и несколько других клавиш для перемещения между элементами. Для тестирования навигации с помощью клавиатуры вы должны убедиться, что интерактивные элементы на вашем сайте имеют видимый контур фокуса, когда клавиатура нацеливается на этот элемент. Также проверьте все функции наведения, чтобы убедиться, что TAB показывает любой скрытый контент. Хотя этот процесс может быть пугающим, начните с ключевых страниц и попытайтесь пройти через каждую из них с помощью TAB. Можете ли вы правильно получить доступ ко всему контенту и ссылкам?

Тестирование скринридеров может быть самым сложным из всех, поскольку технология является более нишевой. Лучший способ проверить доступность вашего сайта для пользователей программ чтения с экрана — просмотреть ваш сайт с помощью программы чтения с экрана. Ясна ли иерархия ваших веб-страниц? Правильно ли вы используете заголовки и обозначаете определенные элементы, необходимые для чтения с экрана?

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

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

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