Как использовать ссылки для пропуска, чтобы сделать ваш сайт WordPress более доступным

В серии «Введение в специальные возможности» мы говорили об основах различных Руководств по обеспечению доступности веб-контента (WCAG). Теперь пришло время сделать следующий шаг, ознакомившись с некоторыми ключевыми рекомендациями и показав вам, как сделать ваш сайт более доступным. Начнем с блоков обхода, более известных как пропуск ссылок.

Что такое скип-ссылка?

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

«Доступен механизм для обхода блоков контента, которые повторяются на нескольких веб-страницах». – Стандарт WCAG 2.4.1 – Обходные блоки

2.4.1 — это стандарт уровня A. Это означает, что это подпадает под действие Раздела 508 и требуется по закону. У вас должен быть пропуск ссылок.

Можете ли вы догадаться, к какому блоку чаще всего применяются ссылки для пропуска контента? Если вы угадали «меню», вы были правы. Меню появляются практически на каждой странице сайта. Зрячие пользователи и пользователи с мышью, как правило, прокручивают страницу прямо мимо них, потому что это один из тех элементов сайта, которые вы просто ожидаете увидеть. Но навигационные меню — не единственные блоки, в которых нужно пропускать ссылки.

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

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

Как добавить ссылки для пропуска?

Теперь, когда вы знаете, что такое ссылки для пропуска, пришло время добавить их на свой сайт. Есть несколько способов решить эту проблему. Самый простой способ (а для вас, не кодеров, единственный) — это установить плагин. Сложный способ — закодировать их в свою тему самостоятельно.

Использование плагина

Один плагин, который мы рекомендуем, когда дело доходит до пропуска ссылок: WP Accessibility от Joe Dolson. Он решает несколько проблем доступности, включая добавление базовых ссылок для пропуска.

Кодируй сам

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

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

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Мы намеренно оставили атрибут href пустым. Это потому, что нам нужно определить, куда будет вести наша ссылка для пропуска. В этом примере мы будем использовать элемент <main> в качестве цели. Поскольку мы не можем напрямую ссылаться на элемент без идентификатора, нам нужно убедиться, что он есть у нашего элемента <main> . Ваш элемент <main> скорее всего будет найден в header.php , но не всегда. После того, как вы нашли элемент, вам нужно убедиться, что у него есть идентификатор. Если нет, добавьте его так:

 <main id=”main-content”> [a bunch more code below]

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

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Теперь, когда у вас есть ссылка для пропуска, вернитесь к файлу header.php или туда, где находится открывающий тег <body> вашей темы. Тег <body> является важным местом для ссылок пропуска, поскольку они должны быть первыми, что попадает в :focus для пользователей клавиатуры и программ чтения с экрана.

Сразу после тега <body> , после готового HTML-кода. Ниже показан более подробный пример с несколькими ссылками для пропуска. Если вы хотите добавить несколько ссылок на свой сайт, убедитесь, что идентификаторы применены правильно.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

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

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Чего вы не видите, так это использования display: none . Его использование приведет к тому, что программа чтения с экрана полностью пропустит ссылку, полностью лишив ее цели. Скрытие выполняется путем размещения текста за пределами экрана с помощью right: 100% и смещения его вправо right: auto on :focus .

Применив свой CSS, все готово. Ваши ссылки для пропуска на месте, но скрыты. Когда пользователь с клавиатурой или программа для чтения с экрана загружает вашу страницу по адресу инициирует :focus , ваши ссылки пропуска позволят ему сразу перейти к содержимому, за которым они пришли.

Подведение итогов

Пропустить ссылки — прекрасный пример функции специальных возможностей, которая кажется сложной, но на самом деле это не так. Все, что мы сделали со стороны кода, это добавили пару строк HTML и CSS. Для нетехнического подхода мы установили плагин. Ни один из методов не занимает много времени, что важно отметить, поскольку ссылки для пропуска являются стандартом уровня A для WCAG 2.0 (самые последние стандарты WCAG).По закону вы должны иметь их на своем сайте.Не подвергайте себя риску; добавьте свои ссылки для пропуска сегодня!