Важность порядка DOM по умолчанию
Работа с нативными элементами – отличный способ узнать о поведении фокуса, поскольку они автоматически вставляются в порядок табуляции в зависимости от их положения в DOM.
Например, у вас может быть три элемента кнопки, расположенных друг за другом в DOM. Нажимая Tab, вы будете по очереди переходить к каждой кнопке. Попробуйте нажать на блок кода ниже, чтобы переместить начальную точку навигации, а затем нажмите Tab, чтобы переместить фокус на кнопки.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Однако важно отметить, что с помощью CSS можно сделать так, чтобы элементы существовали в одном порядке в DOM, но отображались в другом порядке на экране. Например, если вы используете свойство CSS, такое как float, чтобы переместить одну кнопку вправо, кнопки будут отображаться на экране в другом порядке. Но поскольку их порядок в DOM остается прежним, то же самое происходит и с порядком табуляции. Когда пользователь переходит по странице, кнопки получают фокус в неинтуитивном порядке. Попробуйте нажать на блок кода ниже, чтобы переместить начальную точку навигации, а затем нажмите Tab, чтобы переместить фокус на кнопки.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Будьте осторожны, когда меняете визуальное положение элементов на экране с помощью CSS. Это может привести к тому, что порядок вкладок будет прыгать, казалось бы, случайным образом, сбивая с толку пользователей, которые полагаются на клавиатуру. Поэтому в контрольном списке Web AIM в разделе 1.3.2 указано, что порядок чтения и навигации, определяемый порядком кода, должен быть логичным и интуитивно понятным.
Рекомендуется время от времени проверять порядок перехода по страницам, чтобы убедиться, что он не нарушен. Это хорошая привычка, которая не требует больших усилий.
Контент за пределами экрана
Что делать, если у вас есть контент, который в данный момент не отображается, но все же должен быть в DOM, например адаптивная боковая панель навигации? Когда у вас есть такие элементы, которые получают фокус, когда они находятся за пределами экрана, может показаться, что фокус исчезает и снова появляется, когда пользователь переходит по вкладкам на странице — явно нежелательный эффект. В идеале нужно сделать так, чтобы панель не могла получить фокус, когда она находится за пределами экрана, и могла получить его, только когда пользователь может с ней взаимодействовать.
Иногда вам нужно провести небольшое детективное расследование, чтобы выяснить, куда делся фокус. Чтобы узнать, какой элемент сейчас в фокусе, можно использовать document.activeElement в консоли.
Определив, на каком элементе за пределами экрана фокусируется программа чтения, вы можете задать для него значение display: none или visibility: hidden, а затем вернуть значение display:
block или visibility: visible, прежде чем показывать его пользователю.
В целом мы рекомендуем разработчикам перед каждой публикацией проверять порядок табуляции на своих сайтах, чтобы убедиться, что он не исчезает и не выходит за рамки логической последовательности. Если это так, убедитесь, что вы правильно скрываете контент за пределами экрана с помощью display: none или visibility: hidden или что вы переставили физические позиции элементов в DOM, чтобы они находились в логическом порядке.