Как внедрить веб-доступность на ваш сайт WordPress

Опубликовано: 2020-02-15

WordPress — самая популярная платформа для создания сайтов. По данным W3techs, 35,7% всех веб-сайтов используют WordPress, что составляет ошеломляющие 62,5% доли рынка систем управления контентом (CMS) в мире.

Однако при создании веб-сайта WP веб-доступность, вероятно, последнее, о чем вы думаете.

Но стандарты кодирования доступности WordPress гласят, что « весь новый или обновленный код, выпущенный в WordPress, должен соответствовать Руководству по доступности веб-контента 2.0 на уровне AA. ”

Другими словами, доступность является критическим фактором, если у вас есть веб-сайт WP.

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

А. Четыре столпа веб-доступности

Консорциум World Wide Web (W3C), разрабатывающий международные стандарты для Интернета, уже разработал следующие четыре принципа доступности Интернета:

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

B. Рекомендации по веб-доступности WordPress

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

Улучшить доступность текста

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

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

Структурированная передняя и задняя часть

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

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

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

Навигация с помощью клавиатуры для лучшего взаимодействия

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

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

Добавить ориентиры ARIA

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

Наиболее распространенные ориентиры ARIA включают баннер, основную, дополнительную информацию, информацию о содержании, поиск и навигацию.

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

Лучшее преимущество использования ориентиров ARIA заключается в том, что они могут работать с уже семантическими элементами HTML5. В результате вы можете использовать их с элементами HTML5 в существующих темах WordPress.

Интерактивные элементы: цветовой контраст

Для интерактивных элементов, таких как CTA и формы, всегда используйте высококонтрастные цвета в качестве фона текста. В то время как уровень AA WCAG 2.0 требует контрастности не менее 4:5:1 для обычного текста и 3:1 для крупного текста, уровень AAA требует контрастности не менее 7:1 для обычного текста и 4:5: 1 для большого текста.

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

Напутствие

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

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

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

Если у вас все еще есть сомнения относительно того, как сделать ваш сайт WordPress доступным, не стесняйтесь оставлять свои вопросы в комментариях.