Как сделать сайты WordPress доступными

Этот пост был написан Эмбер Хайндс, генеральным директором Equalize Digital, сертифицированной корпорации B, специализирующейся на специальных возможностях WordPress. Если вы хотите узнать больше об Equalize Digital и его услугах, посетите веб-сайт компании.

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

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

В этой статье я расскажу:

• Что такое веб-доступность?
• Почему важна доступность
• Каковы некоторые распространенные проблемы доступности?
• Тестирование сайтов WordPress на доступность
• Обеспечение доступности веб-сайта

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

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

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

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

Некоторые примеры функций, которые делают веб-сайты более доступными, включают:

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

Почему доступность имеет значение

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

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

Рейтинг в поисковых системах

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

Увеличение продаж

CDC заявляет, что по состоянию на 2018 год каждый четвертый американец имеет инвалидность. Ежегодно американцы с ограниченными возможностями тратят более 200 миллиардов долларов на дискреционные онлайн-расходы. Специальные возможности позволяют большему количеству людей находить и использовать веб-сайты, увеличивая возможности для новых продаж, конверсий и постоянных клиентов. Когда в современном мире многие веб-сайты недоступны , любой доступный веб-сайт будет на голову выше конкурентов.

Это требуется по закону

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

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

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

Изображение бренда

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

Каковы некоторые распространенные проблемы доступности?

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

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

Отсутствует или некачественный альтернативный текст

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

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

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

Недостаточный цветовой контраст

В веб-дизайне цветовой контраст относится к мере яркости между цветом фона и цветными элементами, такими как текст, кнопки или значки. Цвета фона и переднего плана должны иметь соотношение 4,5:1, чтобы текст стандартного размера считался достаточным. Вы можете проверить свой цветовой контраст, введя шестнадцатеричные коды обоих цветов в бесплатную программу проверки цветового контраста.

Неоднозначный якорный текст

Якорный текст — это кликабельное слово или группа слов на веб-странице. Нажав на якорный текст, вы можете перейти на новый веб-сайт, загрузить документ, открыть изображение или видео в новой вкладке. Анкорный текст считается двусмысленным, если он не имеет смысла вне контекста или не описывает цель ссылки. Некоторые примеры неоднозначного анкорного текста включают «ссылка», «нажмите здесь», «узнайте больше» или «продолжить». При добавлении ссылок к контенту важно, чтобы, если кто-то независимо услышит только ссылку (без какого-либо окружающего текста), он знал, куда указывает ссылка или что произойдет, когда ссылка будет нажата.

Отсутствующие подписи и стенограммы

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

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

Тестирование сайтов WordPress на доступность

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

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

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

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

Два популярных бесплатных инструмента, которые можно использовать на любом веб-сайте, — это WAVE и Axe. Эти инструменты имеют расширения Chrome и Firefox, доступные для тестирования отдельных URL-адресов по одному, а также платные планы, позволяющие проводить массовое тестирование и дополнительные функции.

Плагин WordPress для проверки доступности

Если вы хотите запускать массовое сканирование доступности и просматривать отчеты на панели инструментов WordPress, плагин WordPress Accessibility Checker — лучший инструмент. Вы можете бесплатно скачать базовую версию плагина на WordPress.org.

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

Accessibility Checker выполняет более 40 различных проверок, в том числе для выявления распространенных проблем, указанных выше. Бесплатная версия сканирует сообщения и страницы, а версия Pro включает в себя полное сканирование сайта пользовательских типов сообщений и архивных страниц. Неправильно помеченные или проверенные элементы могут быть отклонены, что позволяет отслеживать исправления специальных возможностей по мере их внесения с течением времени. Это отличный инструмент для агентств, разработчиков и пользователей WordPress.

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

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

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

После тестирования клавиатуры вы можете перейти к тестированию программ чтения с экрана. Программы для чтения с экрана – это вспомогательное программное обеспечение, которое слепые и слабовидящие люди используют для понимания веб-контента. Если у вас Mac, вы можете использовать программное обеспечение VoiceOver, встроенное в ваш компьютер. Если у вас нет Mac, вы можете загрузить бесплатную программу чтения с экрана с открытым исходным кодом NVDA или приобрести популярную программу чтения с экрана JAWS. Лучше всего протестировать свой веб-сайт с двумя или более программами чтения с экрана, поскольку не все программы чтения с экрана говорят одно и то же для отдельных элементов.

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

После того, как вы выполнили тесты навигации с помощью клавиатуры и чтения с экрана, вам необходимо проверить все встроенные или связанные медиафайлы. К мультимедийным файлам относятся видео, аудиофайлы, PDF-файлы, файлы .Doc или .XLS, ползунки изображений или текста, а также сторонние виджеты или iFrames. Убедитесь, что люди с ограниченными возможностями могут получать доступ, взаимодействовать и понимать содержимое, представленное всеми встроенными или связанными медиафайлами.

Пользовательское тестирование

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

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

Вывод: обеспечение доступности веб-сайта

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

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

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