Многие используют клавиатуру — или программное обеспечение, или оборудование, имитирующее функциональность клавиатуры, например, переключатели клавиш — в качестве основного средства навигации. Это может быть связано с личными предпочтениями, удобством использования или неисправностью оборудования.
Люди с временными физическими ограничениями, такими как растяжение запястья или нарушения мелкой моторики, например, синдром запястного канала, могут использовать клавиатуру для навигации. Пользователи с ослабленным зрением или слепые могут использовать клавиатуру для навигации в сочетании с увеличением или программами чтения с экрана. Однако они могут использовать другие сочетания клавиш для навигации по экрану, чем зрячие пользователи.
Некоторые люди без инвалидности также могут предпочесть использовать клавиатуру для навигации.
Поддержка клавиатуры для всех этих ограничений и обстоятельств имеет решающее значение. Значительная часть доступности клавиатуры основана на фокусировке. Фокусировка относится к элементу на экране, активно принимающему ввод с клавиатуры.
В этом модуле мы сосредоточимся на структуре HTML и CSS-стилизации для элементов, активируемых клавиатурой и фокусировкой. Модуль JavaScript содержит дополнительную информацию об управлении фокусом и сочетаниях клавиш для интерактивных элементов.
Фокус-порядок
Элементы, к которым пользователь может перемещаться с помощью клавиатуры, называются фокусируемыми элементами. Порядок фокусировки , также называемый порядком перехода по вкладкам или порядком навигации, — это порядок, в котором элементы получают фокус. Порядок фокусировки по умолчанию должен быть логичным, интуитивно понятным и соответствовать визуальному порядку на странице.
Для большинства языков порядок фокусировки начинается вверху страницы и заканчивается внизу, слева направо. Однако некоторые языки читаются справа налево, поэтому для основного языка страницы порядок фокусировки может быть другим.
По умолчанию порядок фокусировки включает в себя элементы HTML, которые естественным образом поддаются фокусировке, такие как ссылки, флажки и текстовые поля ввода. К элементам HTML, которые естественным образом поддаются фокусировке, относятся встроенная поддержка порядка перехода по клавише Tab и базовая обработка событий клавиатуры.
Вы можете изменить порядок фокусировки, включив в него любые элементы, которые обычно не получают фокус, такие как неинтерактивные HTML-элементы, пользовательские компоненты или элементы с атрибутом ARIA , и переопределить естественную семантику фокусировки.
Табиндекс
Порядок фокусировки начинается с элементов, имеющих положительный атрибут tabindex (если таковые имеются), и движется от наименьшего положительного числа к наибольшему (например, 1, 2, 3). Затем он переходит к элементам с tabindex, равным нулю, в соответствии с их порядком в DOM. Любые элементы с отрицательным tabindex удаляются из естественного порядка фокусировки.
Когда к элементам, обычно не подлежащим фокусировке, применяется значение tabindex, равное нулю ( tabindex="0" ), они добавляются в естественный порядок фокусировки страницы в соответствии с тем, как они отображаются в DOM. Однако, в отличие от элементов HTML, которые по своей природе поддаются фокусировке, для обеспечения полной доступности таких элементов необходимо обеспечить дополнительную поддержку клавиатуры .
Аналогично, если у вас есть элемент, который обычно находится в фокусе, но неактивен — например, кнопка, которая не работает, пока не будет заполнено поле ввода, — вам следует добавить к этому элементу отрицательный tabindex ( tabindex="-1" ). Добавление отрицательного tabindex сигнализирует вспомогательным технологиям и клавиатурам о том, что эта кнопка должна быть удалена из естественного порядка фокусировки. Но не беспокойтесь — вы можете использовать JavaScript, чтобы вернуть фокус элементу, когда это потребуется.
В этом примере атрибут tabindex был добавлен к элементам, которые обычно не получают фокус. Порядок элементов был изменен с помощью tabindex , чтобы проиллюстрировать, насколько сильно он может влиять на порядок фокусировки. Это пример того, чего делать не следует!
Пропустить ссылки
Сегодня большинство веб-сайтов имеют длинный список ссылок в меню в главном заголовке страницы, одинаковый для всех страниц. Это отлично подходит для общей навигации, но может затруднить пользователям, использующим только клавиатуру, доступ к основному содержимому сайта без необходимости многократно нажимать клавишу Tab.
Один из способов обойти избыточные или бесполезные группы ссылок — добавить ссылку-переход . Ссылки-переходы — это якорные ссылки, которые перенаправляют пользователя на другой раздел той же страницы, используя идентификатор этого раздела, вместо того, чтобы отправлять его на другую страницу веб-сайта или на внешний ресурс. Ссылки-переходы обычно добавляются в качестве первого элемента, на который пользователь нацеливается при посещении веб-сайта, и могут быть видимыми или визуально скрытыми до тех пор, пока пользователь не перейдет к ним с помощью клавиши Tab, в зависимости от требований дизайна.
Когда пользователь нажимает клавишу Tab и активна ссылка «Пропустить», фокус клавиатуры переходит к этой ссылке. Пользователь может щелкнуть ссылку «Пропустить» и перейти к следующему разделу заголовка и основной навигации. Если он решит не щелкать ссылку «Пропустить» и продолжит перемещаться по DOM-дереву с помощью клавиши Tab, он будет перенаправлен к следующему элементу, доступному для фокусировки.
Как и в случае со всеми ссылками, важно, чтобы ссылка «Пропустить» содержала контекст о своем назначении. Добавление фразы «Пропустить к основному содержимому» позволяет пользователю понять, куда ведет ссылка. Существует множество вариантов кода для добавления дополнительного контекста к вашим ссылкам, например, aria-labelledby , aria-label или добавление его в текстовое содержимое элемента <a> , как показано в примере.
Индикатор фокусировки
Как вы только что узнали, порядок фокусировки — важный аспект доступности клавиатуры. Также важно решить, как будет оформлена эта фокусировка. Ведь даже если порядок фокусировки превосходен, как пользователь сможет понять, где он находится на странице, без соответствующего оформления?
Видимый индикатор фокуса имеет решающее значение для информирования пользователей о том, где они находятся на странице в любой момент времени. Это особенно важно для зрячих пользователей, использующих только клавиатуру. Параметр «Фокус не скрыт (минимум)» гарантирует, что индикатор фокуса не будет скрыт под другими компонентами.
Настройки стиля браузера по умолчанию
Сегодня каждый современный веб-браузер имеет свой собственный визуальный стиль по умолчанию, который применяется к элементам на вашем веб-сайте или в приложении, которые могут быть сфокусированы, причем некоторые из них лучше видны, чем другие. Когда пользователь перемещается по странице с помощью клавиши Tab, этот стиль применяется по мере того, как элемент получает фокус с клавиатуры.
Если вы позволяете браузеру самостоятельно управлять стилями индикатора фокуса, важно проверить свой код, чтобы убедиться, что ваша тема не переопределяет стили браузера по умолчанию. Переопределение часто обозначается как "outline: 0" или "outline: none" в вашей таблице стилей. Этот небольшой фрагмент кода может удалить стили индикатора фокуса по умолчанию, что значительно затруднит навигацию по вашему веб-сайту или приложению для пользователей.
Не рекомендуется — нет плана.
a:focus { outline: none; /* don't do this! */ }
Рекомендуется — стилизованный план
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Пользовательские стили
Конечно, вы можете выйти за рамки стандартного стиля браузера и создать собственный индикатор фокусировки, который будет дополнять вашу тему. При создании собственного индикатора фокусировки у вас есть большая свобода для творчества!
Индикатор фокуса может принимать множество форм: контур, рамка, подчеркивание, прямоугольник, изменение фона или какое-либо другое очевидное стилистическое изменение, которое не зависит исключительно от цвета для обозначения того, что фокус клавиатуры активен на данном элементе.
Вы можете изменить стиль индикатора фокуса, чтобы он был виден. Например, если страница имеет белый фон, вы можете установить синий фон для индикатора фокуса кнопки. Если страница имеет синий фон, вы можете установить тот же стиль индикатора фокуса кнопки на белый фон.
Вы можете изменять стиль элемента, находящегося в фокусе, в зависимости от его типа. Например, для ссылок в теле документа можно использовать пунктирное подчеркивание, а для кнопки — закругленную границу.
Нет строгих правил относительно количества стилей индикаторов фокусировки на одной странице, но старайтесь не превышать разумное число, чтобы избежать ненужной путаницы.