Большую часть времени я пишу о методах поисковой оптимизации. Итак, зачем мне писать о доступности в WordPress?
Потому что, в значительной степени, оптимизация сайта для поисковых систем и оптимизация сайта для доступа для людей с ограниченными возможностями — это почти одно и то же. Те же методы, которые позволяют поисковым роботам правильно индексировать сайт, позволяют программам чтения с экрана правильно описывать контент пользователям с нарушениями зрения.
Точно так же правильное структурирование страницы делает ее удобной для машин, какой бы она ни была. Добавьте методы здравого смысла, которые позволяют пользователям (включая пользователей с ограниченными возможностями) и машинам получать доступ к содержательному контенту, и вы стремитесь сделать свой сайт доступным и дружественным для поисковых систем.
Все мы знаем, что WordPress — это феноменальный инструмент, который позволяет людям создавать блоги и веб-сайты с минимальными знаниями в области программирования или кодирования. Эта платформа проста в настройке и обеспечивает надежную основу для тем и плагинов, которая будет определять, как будет представлен ваш контент и функциональность.
Если вы хотите, чтобы ваш сайт был доступен для людей с ограниченными возможностями, вы обнаружите, что в базовом WordPress есть много всего, что необходимо для облегчения разработки доступного веб-сайта, и нетрудно продвинуться дальше, добавив плагины и хорошие техника.
Прежде чем мы начнем, необходимо учитывать два важных предостережения. Во-первых, реализация этих четырех технологий сама по себе не сделает веб-сайт полностью доступным в части соответствия всем требованиям WCAG или Раздела 508 , но он устранит наиболее распространенные препятствия для доступа в Интернет и обеспечит гораздо большую доступность.
Во-вторых, важно понимать, что доступность может быть достигнута только при взаимодействии методов проектирования, разработки и создания контента. Дизайнер может создать доступную тему, разработчик может добавить доступную функциональность, но если автор контента вставит значимое изображение без тега alt, полное значение веб-страницы будет недоступно.
Имея это в виду, вот мои четыре совета, как сделать сайты WordPress более доступными.
Пометьте свои изображения альтернативным текстом
Хорошо задокументировано, что самым большим препятствием для доступности веб-сайтов является правильное использование альтернативного текста для описания изображений на веб-странице. Если бы этот единственный вопрос был рассмотрен всеми, кто создает веб-сайты, это позволило бы устранить наибольшее количество жалоб о доступности.
Фундаментальный момент, который необходимо понять, заключается в том, что если вы собираетесь размещать изображения на своем сайте, важно правильно их пометить альтернативным текстом. Иными словами, каждое значимое изображение на веб-странице должно иметь тег alt.
Информация в теге alt позволяет пользователям программ чтения с экрана (которые читают веб-страницы вслух пользователям с нарушениями зрения), использовать только текстовые браузеры и медленные соединения, которые не загружают изображения для понимания информации, передаваемой изображениями.
Если изображение не имеет смысла, например, оно используется исключительно для украшения, есть два способа с ним справиться. Если вы загружаете его как фоновое изображение с помощью CSS, программы чтения с экрана будут игнорировать его, и изображение не требует тега alt (будьте осторожны, поскольку это также относится к значимым изображениям: если вы загружаете его в фоновом режиме, программа чтения с экрана будет игнорировать его ). Если изображение отображается с использованием HTML, но оно чисто декоративное, используйте тег alt, но оставьте его пустым. Это говорит программе чтения с экрана, что изображение присутствует, но не имеет значения для пользователя и может быть проигнорировано.
Когда вы действительно маркируете свои изображения, используйте описательный текст, который позволит людям, которые не могут видеть, понять, что означает изображение. Это требует суждения: какое значение имеет изображение, чтобы передать, и какие слова лучше всего передают то же значение. Не увлекайтесь буквальными описаниями каждой визуальной детали, передайте смысл.
Классическим примером является изображение увеличительного стекла, которое используется в качестве кнопки для начала поиска. Изображение имеет смысл, поэтому его следует описать. Описание его как «увеличительное стекло» не помогает пользователю. Что им нужно знать, так это то, что нажатие на эту кнопку запустит поиск, поэтому наиболее подходящим может быть текст «нажмите здесь для поиска» или даже просто «поиск».
Только изображения, которые служат цели должны быть помечены. Примеры этого следующие:
- Изображения, которые используются в качестве кнопок
- Изображения, которые используются в качестве ссылок
- Изображения, которые используются для любых других элементов управления
- Изображения, которые имеют непосредственное отношение к содержанию
Эта техника применима ко всем сайтам, конечно, не только к сайтам WordPress. WordPress, однако, делает это проще, чем большинство, во-первых, позволяя автору контента переключаться между визуальным и HTML-представлениями, и, во-вторых, предоставляя поле для альтернативного текста всякий раз, когда изображение вставляется с использованием функции добавления мультимедиа.
Используйте плагины для улучшения доступности
Доступность WordPress может быть улучшена с помощью различных плагинов. Эти плагины просты в настройке, и они позволят пользователям с широким спектром ограничений доступа к сайту. Вот некоторые плагины, которые я нашел полезными.
Ключи доступа
Плагин Access Keys позволяет назначать ключи доступа для ссылок и элементов управления на вашем сайте. Например, домашней ссылке может быть назначена комбинация клавиш доступа alt + h, а кнопке поиска может быть назначена комбинация клавиш alt + s. Ключи доступа, такие как предоставленные примеры, позволяют пользователям с нарушениями зрения, а также тем, у кого проблемы с мобильностью, легко получить доступ к тому, что им нужно.
Легкий ретвит
Easy Retweet — это плагин, который позволит вам добавлять на страницу доступные кнопки, облегчающие обмен вашим контентом в Twitter. Таким образом, если люди с ограниченными возможностями хотят поделиться своими страницами со своими друзьями, они могут сделать это без каких-либо затруднений.
AStickyPostOrderER
AstickyPostOrderER позволяет вам выбрать порядок отображения вашего контента. Вы можете выбрать отображение контента от самого старого до самого нового или в обратном порядке.
Hackadelic SEO Содержание
Плагин Hackadelic SEO Table of Contents позволяет вам предоставлять оглавление для ваших сообщений или ваших страниц. Это позволит легко найти ваш контент.
WP-Polls
WP-Опросы разрешают лицам с ограниченными возможностями участвовать в любых опросах, которые вы можете иметь на своем сайте.
Новые плагины постоянно разрабатываются. Используйте функциональность панели WordPress, чтобы искать больше. Попробуйте различные плагины и попросите ваших пользователей с ограниченными возможностями дать вам обратную связь
При использовании любых плагинов убедитесь, что используемые плагины совместимы с выбранной темой, а также друг с другом. Если ваши плагины не совместимы с вашей темой, они либо не будут работать, либо вызовут больше проблем для пользователей с ограниченными возможностями, которые пытаются просматривать ваш сайт. Если ваши плагины несовместимы друг с другом, ваш сайт может стать непригодным для использования или контент может отображаться неправильно.
Используйте заголовки правильно
При разработке страниц крайне важно структурировать контент, используя заголовки в правильном порядке: <h1><h2><h3> Когда вы структурируете контент, используя заголовки, люди, использующие программы чтения с экрана, могут получить сводную информацию о том, о чем страницы, и легче перемещаться по ним. Пользователи программы чтения с экрана могут получить доступ к тем разделам контента, которые им нужны, нажав букву «H» для перехода вперед и «shift + H» для перехода назад.
Вы можете маркировать свой контент, используя заголовки с первого по шестой. Проверьте, как ваша тема использует заголовки (например, ваша тема может или не может применить <h1><h1><h6>
При упорядочении есть некоторая гибкость, но наиболее разумный вариант — сохранять заголовки в числовом порядке и не смешивать их ( <h1><h4><h2>
<html>
<head>
<title>Must See Horror Movies</title>
</head>
<body>
<h1>Horror Movies of the Decade </h1>
(This is the title of the page that will be assigned a header by default in most WordPress themes.
This header is always assigned to h1. Structure the rest of the content to follow what has been started)
<h2>Horror Movies for 2012</h2>
(The list of 2012 horror movies will go here)
<h3>2012 Cult Movies</h3>
(a sub-list of 2012 movies)
<h3>2012 Sci Fi Horror Movies</h3>
(another sub-list of 2012 movies)
<h2>Horror Movies for 2011</h2>
(The list of 2011 horror movies goes here)
<h2>Horror Movies for 2010</h2>
(The list of 2010 horror movies goes here)
<h2>Horror Movies for 2009</h2>
(The list of 2009 horror movies goes here)
<h2>Horror Movies for 2008</h2>
(The list of 2008 horror movies goes here)
<h4>Why Use Our Horror Movies Reference </h4>
(This gets a new, lower header level due to the fact that this section of the page comes after those
listing the movies, and it is not as important as the movie listings)
</body>
</html>
Используйте навигационные ссылки
Наконец, вам нужно иметь навигационные ссылки в дизайне вашего сайта. Эти навигационные ссылки позволят пользователям с ограниченными возможностями пропускать панель навигации или другие меню и поля поиска и переходить в определенные места на странице, нажимая эти ссылки. Или пользователь может быстро перейти к нужным разделам на сайте. Эти ссылки должны появляться там, где пользователям необходимо перейти к содержательному контенту. Примеры того, что эти ссылки могут сказать:
- Перейти к основному содержанию
- Перейти к панели навигации
- Перейти к поиску
Некоторые темы WordPress могут уже содержать такие ссылки. Если это так, вам нужно проверить эти ссылки, чтобы увидеть, нужно ли добавлять какие-либо из них. Другие темы, однако, не будут предоставлять навигационные ссылки. Таким образом, вам нужно будет добавить эти ссылки самостоятельно.
Вывод
Я еще раз подчеркну, что ничто из этого не гарантирует, что ваш сайт будет доступен на 100%.
Однако, если вы используете эти четыре метода, вы можете рассчитывать на то, что ваш сайт WordPress будет более доступным, чем 90% сайтов WordPress, и что вы обратились к проблемам, которые возникают у 90% людей, которые указывают на недоступность Интернета.
Люди с ограниченными возможностями смогут лучше получить доступ к вашему сайту вместе со всеми вашими другими посетителями. Поскольку эти посетители также включают в себя поисковых роботов, вы можете быть уверены, что сделать ваш сайт доступным также принесет пользу вашей бизнес-модели и поможет максимизировать ваш потенциал получения прибыли.