Порядок содержимого в вашем документе важен для доступности вашего сайта. Программа чтения с экрана считывает содержимое в соответствии с порядком документов, используя элементы HTML, чтобы придать этому содержимому дополнительное значение.
Человек, перемещающийся по сайту с помощью клавиатуры, а не сенсорного экрана или мыши, перемещается по документу с помощью табуляции. Они переходят от активного элемента к активному, переключаясь между ссылками и полями формы в том порядке, в котором элементы существуют в документе.
Поэтому начинать с хорошо структурированного документа и использовать правильные элементы HTML — это ключевая часть создания доступного сайта. Однако некоторые из этих хороших результатов можно свести на нет, когда вы начнете использовать CSS.
Исходный и визуальный порядок
Навигация по сайту часто размечается как список ссылок. Вы можете использовать Flexbox , чтобы превратить их в горизонтальную полосу. В следующем примере я создал этот часто используемый шаблон. Нажмите на пример и перейдите между ссылками. Фокус перемещается в логическом направлении слева направо, в том порядке, в котором мы читаем на английском языке.
Допустим, вы создали этот шаблон навигации, а затем вас попросили переместить «Свяжитесь с нами» , который находится вторым в исходном коде, в конец. Вы можете использовать свойство order Flexbox для перемещения его местоположения.
Попробуйте перемещаться по элементам в следующем примере, в котором для изменения порядка элементов используется свойство 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 и расположил элементы, используя номера строк, не учитывая, где они находятся в исходном коде.
Попробуйте прокрутить этот пример и посмотреть, как меняется фокус. Это очень сбивает с толку, особенно если это длинная страница.
Тестирование проблемы
Быстрый тест — навигация по странице с помощью клавиатуры. Сможешь ли ты добраться до всего? Нет ли при этом каких-нибудь странных прыжков?
Чтобы наглядно продемонстрировать изменение порядка контента, попробуйте средство проверки табуляции в расширении Accessibility Insights для Chrome. На снимке экрана показан пример CSS Grid в этом инструменте. Вы можете видеть, как фокус должен перемещаться по макету.
Изменение порядка контента и адаптивный веб-дизайн
Если у вас есть только одна презентация вашего контента, вы сможете поддерживать логически упорядоченный источник, который отражается в макете. Это может оказаться сложнее, если учесть макет на разных точках останова. Например, на небольших экранах может иметь смысл переместить элемент в нижнюю часть макета.
В настоящее время не существует хорошего решения для этой конкретной проблемы. В большинстве ситуаций разработка «сначала для мобильных устройств» может помочь вам поддерживать исходный код и макет в порядке. Выбор, который вы делаете в отношении приоритета на мобильных устройствах, часто подходит для контента в целом. Главное — знать, когда существует возможность изменения порядка контента. Проверьте, чтобы конечный результат не был слишком резким в каждой точке останова.