Advertisement
  1. Web Design
  2. Accessibility

Доступность с клавиатуры, используя HTML и CSS

by
Length:MediumLanguages:

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

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

A11y с начала

Эти советы являются частью материала Web Accessibility: the Complete Learning Guide, где мы собрали руководства, статьи, курсы и книги, которые помогут вам понять основы веб-доступности.

Что такое доступность с клавиатуры?

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

Кому нужна доступность с клавиатуры?

Вот основные целевые группы, которым нужна доступность с клавиатуры:

  • Пользователи с нарушениями опорно-двигательного аппарата, которым трудно использовать мышь, сенсорное устройство или кликать по мелким штукам.
  • Слепые или слабовидящие пользователи часто предпочитают перемещаться по сайтам с помощью специальных клавиатур Брайля.
  • Лица с ампутированными конечностями или лица с врождённой ампутацией (рождённые без конечности или конечностей, особенно рук в этом случае) часто используют специальные аппаратные средства, замещающие клавиатуру.
  • Любой, у кого просто нет доступа к работающей мыши или «тачпада».

1. Протестируйте ваш сайт на доступность с клавиатуры

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

Navigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab keyNavigating quick links in the Tuts footer with the Tab key
Переход по быстрым ссылкам внизу сайта Tuts+ с помощью клавиши Tab

Пронаблюдайте, насколько просто или сложно добраться до главного содержимого, кликнуть по главному меню, заполнить форму, использовать боковую панель или добраться до того места на странице, на котором вы сейчас находитесь. Также, можете попробовать обратное направление, используя комбинацию клавиш Shift+Tab.

2. Создайте приметный стиль для :focus

В CSS есть псевдо-класс :focus, который включается когда пользователь кликает или нажимает на элемент, или выделяет его при помощи клавиши Tab. Состояние :focus применяется только к фокусируемым элементам, а именно <a>, <button>, <input>, <textarea>, <select>, и <area>.

Каждый браузер использует свой стиль по умолчанию для :focus, обычно это рамочка вокруг элемента из чёрных точек, или размытое свечение. Однако, это не нравится многим дизайнерам, и они полностью убирают это. Это самая распространённая ошибка, которая убивает доступность с клавиатуры на web-страницах. Если тебе не нравится стиль по умолчанию, Используй тот, который сочетается с дизайном твоего сайта.

focus styles in Google Chrome browserfocus styles in Google Chrome browserfocus styles in Google Chrome browser
Стиль :focus по умолчанию в браузере Google Chrome

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

3. Используйте указатели для ссылок, без собственного цвета

Гиперссылки не должны выделяться только по цвету. Такой подход обычно советуется в визуальной доступности, так как людям с низким зрением трудно различить разницу между определёнными цветами. Однако, чётко видимые ссылки также важны и для доступности из клавиатуры. Пользователи, использующие только клавиатуру, должны без затруднений понять где ссылка. Это помогает им просканировать страницу и понять, как перейти к интересующей их части.

Наподобие со стилями :focus, у браузеров также есть стандартное оформление для гиперссылок, в большинстве случаев — это нижнее подчёркивание и голубой цвет. Однако, дизайнеры часто убирают нижнее подчёркивание, оставляя только цвета для обозначения ссылки. Если вы убираете стандартное подчёркивание, всегда используйте другой указатель без цвета (имеется ввиду, что он не будет отличаться цветом, т.е. не иметь своего определённого цвета), который соответствует дизайну вашего сайта, наподобие границ, значков, или подсвечивания.

Clear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visitedClear links on govuk 1 hyperlink 2 focused 3 visited
Ясные ссылки на gov.uk: (1) гиперссылка (2) в фокусе (3) посещённая.

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

Лучше делайте вот так:

WCAG 2.0 также предупреждает о проблемах доступности атрибута title. Либо используйте его с осторожностью, либо не используйте его вообще.

4. Используйте обычные элементы управления

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

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

  • <button>
  • <input>
  • <textarea>
  • <select>
  • <option>

Например, вы можете создать ползунок с доступом с клавиатуры, используя следующий HTML:

Пользователи могут сначала навести фокус на этот элемент, используя клавишу Tab, а затем перемещать его вверх и вниз, используя Пробел.

Если вам почему-то нужно использовать не фокусируемый HTML-тег для интерактивного элемента, вы можете сделать его сфокусированным с помощью атрибута tabindex="0". Например, вот <div> превращается в фокусируемую кнопку:

Атрибут role="button" в примере кода выше — это ролевой ориентир ARIA. Хотя пользователи, использующие только клавиатуру, в нём не нуждается, он незаменим для пользователей, использующих экранного диктора и зрительной доступности.

Даже если необычная кнопка было сделано фокусируемой, она по-прежнему уступает её стандартному аналогу, с точки зрения доступности с клавиатуры. Вы сразу это поймёте, когда попытаетесь добавить обработчик события к такой кнопке. Вот как выглядит слушатель событий нажатия, для обычного элемента <button>:

А вот аналог, с использованием div кнопки.

Если вы нажмёте на эти кнопки используя мышь или сенсорную панель, то вы увидите оба всплывающих сообщения. Однако, если вы доберётесь до каждой из кнопок с помощью клавиши Tab и нажмёте Enter, то увидите только первое сообщение, принадлежащее стандартной кнопке.  Чтобы заставить нестандартную кнопку реагировать на ввод с клавиатуры, вам потребуется задать обработчик события на нажатия с клавиатуры:

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

5. Добавьте ссылку «Перейти к главному»

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

Чтобы создать рабочую ссылку для пропуска навигации, вам необходимо привязать её к основному контенту с использованием HTML атрибутов id и href следующим образом:

Вам также необходимо добавить атрибут tabindex="-1" в контейнер основного содержимого. Это тот же самый tabindex, который мы использовали раньше, чтобы сделать нестандартную кнопку с фокусом. Атрибут tabindex используется для изменения порядка навигации по умолчанию. При значении 0 он делает не фокусируемые элементы фокусируемыми. При значении -1, он так же делает элементы фокусируемыми, но они становятся недоступными для обычной навигации с клавиатуры. Для некоторых браузеров, таких как Chrome и IE, требуется наличие tabindex="-1" на том, куда ведет ссылка для пропуска навигации, поэтому никогда не пренебрегайте этим.

Отобразите ссылку перехода для пользователей, использующих только клавиатуру

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

Вы можете увидеть этот эффект в действии, на таких сайтах как: webaim.orgwww.w3.org, и (конечно же) www.gov.uk:

Reveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard UsersReveal the Skip Link Only to Keyboard Users
Вы когда-нибудь видели эту ссылку раньше?

Следующий CSS является упрощённой версией кода для пропуска навигации из справочника университета штата Нью-Йорк IT Accessibility Handbook:

Когда пользователь нажимает клавишу Tab, элементу .skip-main придаётся состояние фокуса, и на экране появляется ссылка для пропуска навигации.

Вы можете быстро проверить, как это работает, если нажмёте на самую верхнюю часть демо ниже, а затем клавишу Tab. Возможно, вам будет проще, если откроете демо в полноэкранном режиме.

Следующие шаги

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

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

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.