5 правил создания доступного веб-контента

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

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

Предлагаем вам несколько простых правил, с которых вы можете начать делать ваш контент более доступным.

Пишите понятный текст ссылки

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

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

Интегрируйте ссылки в контекст предложений, насколько это возможно. Например, вместо “Прочтите о наших правилах покупки здесь” напишите “Прочтите о наших правилах покупки”.

Если вы используете “сырой” URL в качестве ссылки, скринридер так его и прочтет для посетителя. С простым и коротким URL вроде http://www.example.com/about-us/ это будет звучать не так уж и плохо. Но длинный URL, например, http://example.com/docID/15849273/?param=download97hh02ed будет слишком сложным для восприятия пользователем скринридера и только запутает его, не дав никакой полезной информации.

Будьте осторожны с указанием размещения элементов

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

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

Использование таких ориентировок, как “справа”, “слева”, “выше”, “ниже” также создает трудности при внесении мелких изменений в ваш сайт.

Ссылки, ведущие прямо на нужную страницу, или более общие ориентировки вроде “в боковой панели” или в “футере” сработают лучше.

Избегайте ориентирования по цвету

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

Например, вы можете сказать: “Кликните на красную кнопку”, если кнопка всего одна. Но если, например, есть две кнопки – красная и зеленая, предложение запутает посетителя с ограниченными возможностями. В таком случае, убедитесь, что вы упоминаете о каком-нибудь другом различии между кнопками (например, “Кликните на красную кнопку Остановить”).

Структурируйте текст

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

Параграфы должны быть короткими. Чем длиннее блок текста, тем сложнее воспринимается информация в нем.

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

Размещайте ваши параграфы и списки под тематическими заголовками. Заголовки позволяют пользователям скринридеров быстро “перепрыгивать” с одного блока информации к другому в поисках нужного контента.

Добавляйте альтернативный текст

Если вы используете в тексте картинки, добавляйте также и альтернативный текст для этих картинок. Пусть он будет размером с твит: 140 знаков будет в самый раз. Альтернативный текст для простых текстовых картинок не должен быть бо́льшим, чем, собственно, текст на картинке. Но сложная, эмоционально заряженная картинка, скорее всего, потребует более детального описания.

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