Фокус клавиатуры

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

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

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

В этом модуле мы сосредотачиваемся на HTML-структуре и CSS-стилизации для клавиатуры и фокусируемых элементов. Модуль JavaScript включает дополнительную информацию об управлении фокусом и нажатиях клавиш для интерактивных элементов.

Порядок фокуса

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

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

По умолчанию порядок фокуса включает естественно фокусируемые HTML-элементы, такие как ссылки, флажки и текстовые поля ввода. Естественно фокусируемые HTML-элементы включают встроенную поддержку порядка табуляции и базовую обработку событий клавиатуры.

Вы можете обновить порядок фокуса, чтобы включить любые элементы, которые обычно не получают фокус, такие как неинтерактивные HTML-элементы, пользовательские компоненты или элементы с ARIA, которые переопределяют естественную семантику фокуса.

Ваша клавиша Tab перемещает фокус клавиатуры вверх по DOM. Shift+Tab перемещает фокус вниз по DOM.

Tabindex

Порядок фокуса начинается с элементов, которые имеют положительный атрибут tabindex (если они есть), и перемещается от наименьшего положительного числа к наибольшему (например, 1, 2, 3). Затем он проходит через элементы с tabindex равным нулю согласно их порядку в DOM. Любые элементы с отрицательным tabindex удаляются из естественного порядка фокуса.

Когда tabindex равный нулю (tabindex="0") применяется к обычно не фокусируемым элементам, они добавляются в естественный порядок фокуса страницы согласно тому, как они появляются в DOM. Однако, в отличие от естественно фокусируемых HTML-элементов, вы должны предоставить дополнительную поддержку клавиатуры для их полной доступности.

Аналогично, если у вас есть элемент, который обычно фокусируем, но неактивен — например, кнопка, которая не работает, пока поле ввода не заполнено — вы должны добавить отрицательный tabindex (tabindex="-1") к этому элементу. Добавление отрицательного tabindex сигнализирует технологиям помощи и клавиатурам, что эта кнопка должна быть удалена из естественного порядка фокуса. Но не беспокойтесь — вы можете использовать JavaScript, чтобы вернуть фокус к элементу, когда это необходимо.

В этом примере атрибут tabindex был добавлен к элементам, которые естественно не получают фокус. Порядок элементов был изменен с помощью tabindex, чтобы проиллюстрировать силу, которую он может иметь на порядок фокуса. Это пример того, чего не следует делать!

<a href="#" tabindex="1">Ссылка 1</a>
<div tabindex="2">Div 2</div>
<button tabindex="3">Кнопка 3</button>

---

<a href="#">Ссылка 1</a>
<div>Div 2</div>
<button>Кнопка 3</button>

Осторожно

Как общее правило, вы должны избегать положительных tabindex. Предоставление фокуса неинтерактивным элементам и нарушение нормального порядка фокуса может запутать и расстроить ваших пользователей. Должно быть редкостью, когда обстоятельства требуют добавления положительного tabindex (tabindex="1") к не фокусируемому элементу.

Пропускные ссылки

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

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

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

Как и все ссылки, важно, чтобы пропускная ссылка включала контекст о назначении ссылки. Добавление фразы "Перейти к основному содержимому" позволяет пользователю знать, куда ведет ссылка. Есть много вариантов кода на выбор при предоставлении дополнительного контекста вашим ссылкам, таких как aria-labelledby, aria-label или добавление его к текстовому содержимому элемента <a>, как показано в примере.

<a href="#main-content" class="skip-link">
  Перейти к основному содержимому
</a>

<header>
  <!-- Навигация -->
</header>

<main id="main-content">
  <!-- Основное содержимое -->
</main>

Индикатор фокуса

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

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

Новый критерий успеха WCAG 2.2, Фокус не скрыт (Минимум), обеспечит, чтобы индикатор фокуса не был скрыт под другими компонентами.

Стилизация браузера по умолчанию

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

Если вы позволяете браузеру обрабатывать стилизацию фокуса, важно просмотреть ваш код, чтобы подтвердить, что ваша тема не переопределит стилизацию браузера по умолчанию. Переопределение часто записывается как "outline: 0" или "outline: none" в вашей таблице стилей. Этот крошечный кусок кода может удалить стилизацию индикатора фокуса браузера по умолчанию, что делает очень трудным для пользователей навигацию по вашему веб-сайту или приложению.

a:focus {
  outline: none; /* не делайте этого! */
}

---

a:focus {
    outline: auto 5px Highlight; /* для не-webkit браузеров */
    outline: auto 5px -webkit-focus-ring-color; /* для webkit браузеров */
}

Пользовательские стили

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

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

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

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

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

Мы рекомендуем придерживаться соотношения цветового контраста 3:1 для всех индикаторов фокуса. Это будет соответствовать Внешнему виду фокуса (Минимум) WCAG 2.2.

/* Стиль для ссылок */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Стиль для кнопок */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Стиль для полей ввода */
input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-color: #0066cc;
}

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

Заключение

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

Источник — https://web.dev/learn/accessibility/focus

Комментарии