Важность порядка 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. Это может привести к тому, что порядок табуляции будет меняться, по-видимому, случайно, что сбивает с толку пользователей, которые полагаются на клавиатуру. По этой причине в разделе 1.3.2 контрольного списка Web AIM указано, что порядок чтения и навигации, определенный порядком кода, должен быть логичным и интуитивно понятным.
Как правило, старайтесь время от времени переходить по страницам, просто чтобы убедиться, что вы случайно не нарушили порядок табуляции. Это хорошая привычка, которая не требует особых усилий.
Закадровый контент
Что делать, если у вас есть контент, который в данный момент не отображается, но все равно должен находиться в DOM, например адаптивная боковая навигация? Когда у вас есть такие элементы, которые получают фокус, когда они находятся за пределами экрана, может показаться, что фокус исчезает и появляется снова, когда пользователь перемещается по странице — явно нежелательный эффект. В идеале мы должны запретить панели получать фокус, когда она находится за пределами экрана, и разрешать ей фокусироваться только тогда, когда пользователь может с ней взаимодействовать.
Иногда вам нужно немного поработать детективом, чтобы выяснить, куда делся фокус. Вы можете использовать document.activeElement из консоли, чтобы выяснить, какой элемент в данный момент находится в фокусе.
Как только вы узнаете, какой заэкранный элемент находится в фокусе, вы можете установить для него значение display: none или visibility: hidden , а затем снова установить для него display: block или visibility: visible прежде чем показывать его пользователю.
В общем, мы рекомендуем разработчикам просматривать свои сайты с помощью табуляции перед каждой публикацией, чтобы убедиться, что порядок табуляции не исчезает и не выскакивает из логической последовательности. Если это так, вам следует убедиться, что вы правильно скрываете закадровый контент с помощью display: none или visibility: hidden или что вы меняете физические положения элементов в DOM, чтобы они находились в логическом порядке.