Скроллеры с фокусировкой на клавиатуре

Начиная с Chrome 124, скроллеры по умолчанию доступны для фокусировки с клавиатуры, если у них нет дочерних элементов, доступных для фокусировки с клавиатуры.

Фон

Скроллеры есть везде. Вы можете найти его в поле «Правила и условия», где вам нужно прокрутить его до конца, чтобы нажать кнопку «Отправить». Или вы можете столкнуться с вертикальной строкой меню, полной значков на выбор.

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

Рекомендации по обеспечению специальных возможностей рекомендуют, чтобы все функции были доступны с помощью клавиатуры. Таким образом, каждый сможет использовать Интернет так, как ему удобнее.

2.1.1 Клавиатура: Все функции контента доступны через интерфейс клавиатуры , не требуя определенного времени для отдельных нажатий клавиш, за исключением случаев, когда базовая функция требует ввода, который зависит от пути движения пользователя, а не только от конечных точек. (Уровень А)

До этого изменения фокусироваться на скроллерах

До этого изменения элемент скроллера мог быть сфокусирован на табуляции только в том случае, если для tabindex явно установлено значение 0 или выше. Например, используйте следующие CSS и HTML. Затем попробуйте перейти от первой кнопки к элементу скроллера.

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Скроллер можно фокусировать благодаря положительному табиндексу.

При использовании отрицательного табиндекса, как в следующем HTML, скроллер будет пропущен.

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Скроллер пропускается из-за отрицательного значения tabindex.

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

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
У скроллера нет tabindex.

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

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Скроллер является фокусируемым, поскольку содержит фокусируемые дочерние элементы.

Из Chrome 124 с фокусируемыми скроллерами

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

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
У скроллера нет табиндекса или фокусируемых дочерних элементов, но он по-прежнему доступен для фокусировки.

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

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Скроллер имеет tabindex 0.

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