Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Советы Разработчикам Как Сделать Их Wordpress Темы Более Доступными

by
Length:MediumLanguages:

Russian (Pусский) translation by Nataly Birch (you can also view the original English article)

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

Обзор Доступного Веб Дизайна

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

Мы поговорим о следующих решениях:

  1. Использование семантически-правильного HTML кода
  2. Структуризация при помощи секций и блоков, существующих в HTML5
  3. Создание чёткой иерархии заголовков
  4. Навигации по странице, используя ассистивные технологии
  5. Навигация при помощи клавиатуры и стилей для псевдо класса focus
  6. Проверка цветового контраста
  7. Использование ссылок-пропусков
  8. Избегание повторяющихся ссылок

1. Использование семантически правильного HTML кода

Использование семантически правильного HTML кода является одним из самых важных шагов по созданию доступного сайта. В своей статье о понимании семантики Леон Уотсон прекрасно объясняет всю её важность и значение.

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

Когда мы пишем код на HTML, нас должен волновать не только дизайн и внешний вид сайта, но также его работа и взаимодействие: 

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

Ссылки <a>, кнопки <button> и блоки <div> очень популярные элементы, поэтому мы рассмотрим всё вышесказанное на их примере.

Когда использовать тэг ссылки <a>

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

  • Хороший пример: <a href="https://developer.mozilla.org/">Mozilla</a>
  • Это тоже хороший пример: <a href="#back-to-top">Back to top</a>.
  • А вот это плохой пример: <a href="#" class="menu-toggle-button">Menu</a>. Здесь должен быть тег кнопки <button>.

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

Вот пример ссылки, Создание Инклюзивного Веба или Почему Доступность Имеет такое Значение, как её видит типичное устройство ассистивной технологии.

Accessibility Viewer displays link name role state and other informationAccessibility Viewer displays link name role state and other informationAccessibility Viewer displays link name role state and other information
Ассистивное устройство отображает название ссылки, состояние и другую полезную информацию.

На практике это означает, что скринридер и другие устройства АТ (ассистивных технологий) распознают якорь и могут объявить его роль и имя. К примеру, "Ссылка на статью, Создание Инклюзивного Веба или Почему Доступность Имеет такое Значение".

Также они могут перемещаться по странице, используя только ссылки.

List of page links in the VoiceoverList of page links in the VoiceoverList of page links in the Voiceover
Список ссылок на сайте Voiceover

Когда использовать тэг кнопки <button>

Используйте тэг кнопки <button>, когда вам нужно описать действие, как к примеру открытие меню. Видео, созданное Робом Додсоном прекрасно объясняет почему в таких ситуациях необходимо использовать тэг <button>, а не <div>

С резюмирую, тэг кнопки <button> имеет следующие встроенные преимущества:

  • Естественный фокус на кнопки клавиатуры
  • Для него уже задана роль кнопки, что позволяет пользователям АТ сразу понять, что это интерактивный элемент.
  • Его можно нажать при помощи кнопки "Enter" или Пробела без добавления Javascript обработчика.
  • Для него можно использовать аттрибут disabled, на случай когда кнопка не должна быть активной.

Подсказка: В Chrome 64 можно использовать панель проверки Доступности. Она покажет расположение выбранного элемента в древовидной иерархии доступности, а также атрибуты полей ARIA и вычисленные свойства.

Accessibility pane in Chrome showing button element informationAccessibility pane in Chrome showing button element informationAccessibility pane in Chrome showing button element information
Панель Доступности в Chrome, которая отображает информацию о кнопке

Когда использовать тэг <div>

Используйте блочный тэг (<div>) для стилизации. Главное правило: сначала проверьте нет ли HTML элемента, который будет сразу соответствовать вашим требованиям и целям, и если такого нет, то тогда изощряйтесь с div. К примеру <article>, <nav>, <p>, <blockquote>, <figure>, <table>, или <ul>.

Больше про это можно почитать здесь - Ссылки, Кнопки, Кнопки Форм и Стандартные Блочные элементы, автор Адриан Росели.

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

2. Структуризация при помощи секционных элементов, присутствующих в HTML5.

У многих HTML5 элементов есть встроенная возможность назначать ARIA роли. Это позволяет идентифицировать разделы страницы и тем самым позволить пользователям АТ комфортно двигаться по сайту от блока к блоку. Для того чтобы пользователь ничего не пропустил, необходимо сделать так, чтобы каждый блок информации находился в своём семантически правильно назначенном элементе.

Это самые распространённые элементы:

Элемент HTML5
Его назначение
<header>
баннер
<nav>
навигация
<main>
основной раздел
<aside>
дополнительный раздел
<footer>
подвал, информация о контенте

Заметьте: старые браузеры и АТ не всегда могут правильно распознать встроенные роли вышеуказанных элементов. В этом случае вам необходимо вручную прописать роли, к примеру <header role="banner">.

Для большего понимания посмотрите эти две статьи: WordPress справочник об атрибуте ARIA и Примеры использования ARIA атрибутов.

3. Создание чёткой иерархии заголовков

Вам когда-нибудь приходилось читать длинную статью без заголовков?Вам было комфортно её читать? Мне, точно, нет. Заголовки позволяют пользователям быстро сканировать и тем самым понимать суть статьи. С другой стороны, заголовки позволяет пользователям АТ перемещаться по контенту и определять структуру страницы.

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

  • Используйте только один уникальный заголовок H1 на странице. Для многих тем, под страницей мы понимаем  запись, страница или архив.
  • Используйте все остальные заголовки от H2 до H6 для того чтобы идентифицировать блоки в странице, так как вы определяете виджеты.
  • Не перепрыгивайте через уровни в заголовках. Это означает, что после H2 должен идти заголовок H3, а не Н4.

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

Я использую следующие инструменты для проверки правильности расставленных заголовков.

4. Навигация по странице, используя Ассистивные Технологии

И так, мы успели с вами рассмотреть несколько способов навигации по странице: использование ссылок, заголовков и ориентиров.  Тоже самое касается и остальных элементов семантики в HTML, таких как списков, таблиц и изображений.

Пользователи, использующие АТ, могут перемещаться по странице используя эти элементы. Здесь вы сможете найти короткое видео, которое покажет вам скринридер Voiceover в действии. Используйте его для тестирования ваших страниц.

Почитать больше о Voiceover можно здесь или посмотреть схожую статью использование NVDA можно тут.

5. Не забывайте о Навигации при помощи Клавиатуры и Стилизации Фокусов

Правило номер один: не убирайте стили для свойства outline, используя :focus {outline:none;} !

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

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

Также заметьте: Иногда стили для outline свойства не является лучшим дизайнерским решением, потому что они не учитывают такие важные свойства элемента как закругление углов (border-radius). Поэтому альтернативой является использование box-shadow, но... стили для фокусов должны работать всегда и везде, даже в режиме высокой контрастности в Windows, который убирает все тени с элементов.

Вот небольшой трюк, который предлагает использовать прозрачный ободок (transparent outline) для режима высокой контрастности в Windows. 

Вы можете больше почитать про это в Gutenberg PR 5138 и Trac ticket 41286.

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

Очень часто бывает так, что пользователь не может перемещаться по подпунктам меню используя Tab или стрелочки. Базовая тема Underscores имеет встроенное решение, реализованное при помощи JavaScript, для таких случаев: каждый раз когда ссылка в меню получает фокус или наоборот теряет его, скрипт либо добавляет либо убирает класс .focus. Интересно? Тогда почитайте про функцию toggleFocus.

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

6. Проверка цветового контраста

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

Контраст между цветом фона и цветом контента должен иметь коэффициент контрастности 

Существует много инструментов для проверки цветового контраста, как к примеру проверщик коэффициента контрастности.

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

7. Помните о ссылках пропусках

Ссылка "перейти к контенту" позволяет пользователям быстро перепрыгнуть все дополнительные элементы и приступить сразу же к основному контенту. Вам наверно интересно почему блока <main> может быть недостаточно, ведь пользователи АТ могут легко переместиться к основному контенту используя именно его? Дело в том, что основная группа пользователей, которые используют ссылки-пропуски, являются пользователями, которые используют клавиатуру для навигации, и как правило они не используют никакие другие устройства АТ. Поэтому у них нет клавиш быстрого перехода к основному контенту или другим важным областям в контенте.

В любом случае, пользователи АТ до сих пор используют ссылки-пропуски. Согласно статистике скринридеров:  

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

Почитайте о том как использовать ссылки-пропуски в этой статье.

8. Избегайте повторяющихся ссылок

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

List of read more links doesnt help navigatingList of read more links doesnt help navigatingList of read more links doesnt help navigating
Список ссылок "читать далее", который вряд ли может помочь пользователям, использующих скринридеры

Тема 2017 является прекрасным примером как добавлять заголовок статьи в отрывок текста:

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

Класс screen-reader-text прячет заголовок текста и простой обыватель его не увидит. Но для пользователей скринридеров он остаётся на месте, так что они могут его использовать. Посмотрите последний пример кода для текста для скринридера в руководстве.

Заключение

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

Не забудьте почитать руководство по доступности в темах и советы, представленные в справочнике по доступности.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.