Порядок содержимого документа важен для доступности вашего сайта. Программа чтения с экрана озвучивает содержимое в соответствии с порядком в документе, используя HTML-элементы для придания ему дополнительной смысловой нагрузки.
Пользователь, перемещающийся по сайту с помощью клавиатуры, а не сенсорного экрана или мыши, перемещается по документу с помощью табуляции. Он переходит от одного активного элемента к другому, переключаясь между ссылками и полями форм в том порядке, в котором элементы находятся в документе.
Таким образом, создание хорошо структурированного документа и использование правильных HTML-элементов — ключевой этап создания доступного сайта. Однако использование CSS может свести на нет некоторые результаты этой работы.
Источник против визуального порядка
Навигация по сайту часто размечается в виде списка ссылок. Вы можете использовать Flexbox , чтобы превратить их в горизонтальную панель. В следующем примере я создал этот распространённый шаблон. Щёлкните по нему и переключайтесь между ссылками клавишей Tab. Фокус перемещается в логическом направлении слева направо, в порядке, в котором мы читаем в английском языке.
Допустим, вы создали этот шаблон навигации, а затем вас попросили переместить раздел «Связаться с нами» , который находится вторым в исходном коде, в конец. Вы можете использовать свойство order Flexbox, чтобы переместить его местоположение.
Попробуйте перемещаться по элементам с помощью клавиши Tab в следующем примере, в котором для изменения порядка элементов используется свойство order .
Фокус переходит на последний элемент, а затем возвращается обратно. С точки зрения порядка табуляции этот элемент — второй. Однако визуально он последний.
Этот пример демонстрирует проблему, с которой мы сталкиваемся при переупорядочивании контента с помощью CSS. Правильным решением этой проблемы является изменение порядка ссылок в исходном коде, а не имитация этого изменения с помощью CSS.
Какие свойства CSS могут вызвать изменение порядка?
Любой метод вёрстки, позволяющий перемещать элементы, может вызвать эту проблему. Следующие свойства CSS обычно вызывают проблемы с переупорядочиванием контента:
- Использование
position: absoluteи визуальное исключение элемента из потока. - Свойство
orderв макетах Flexbox и Grid. - Значения
row-reverseиcolumn-reverseдляflex-directionв Flexbox. -
denseзначение дляgrid-auto-flowв Grid Layout. - Любое позиционирование по имени или номеру строки или с помощью
grid-template-areasв Grid Layout.
В следующем примере я создал макет с использованием CSS Grid и расположил элементы с использованием номеров строк, не учитывая их местонахождение в исходном коде.
Попробуйте перемещаться по этому примеру с помощью клавиши Tab и посмотрите, как фокус переключается. Это создаёт очень запутанную ситуацию, особенно если страница длинная.
Тестирование на наличие проблемы
Быстрый тест: попробуйте перемещаться по странице с помощью клавиатуры. Удаётся ли вам добраться до всего? Возникают ли при этом какие-либо странные скачки?
Для наглядной демонстрации переупорядочивания контента попробуйте инструмент проверки Tab Stop в расширении Chrome Accessibility Insights . На снимке экрана показан пример CSS Grid в этом инструменте. Вы можете видеть, как фокус перемещается по макету.
Изменение порядка контента и адаптивный веб-дизайн
Если у вас только одно представление контента, вам следует поддерживать логически упорядоченный исходный код, отражающий макет. Это может быть сложнее, если учитывать макет в разных точках перехода. Например, на небольших экранах может иметь смысл переместить элемент в нижнюю часть макета.
На данный момент для этой конкретной проблемы нет подходящего решения. В большинстве случаев разработка с учётом мобильных устройств поможет вам поддерживать порядок в исходном коде и макете. Правильная расстановка приоритетов для мобильных устройств часто подходит и для всего контента. Важно понимать, когда существует вероятность изменения порядка контента. Протестируйте, чтобы убедиться, что конечный результат не будет слишком резким на каждой контрольной точке.