Изменение порядка контента

Порядок содержимого в вашем документе важен для доступности вашего сайта. Программа чтения с экрана считывает содержимое в соответствии с порядком документов, используя элементы 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, демонстрирующий запутанный порядок элементов.

Быстрый тест — навигация по странице с помощью клавиатуры. Сможешь ли ты добраться до всего? Нет ли при этом каких-нибудь странных прыжков?

Чтобы наглядно продемонстрировать изменение порядка контента, попробуйте средство проверки табуляции в расширении Accessibility Insights для Chrome. На снимке экрана показан пример CSS Grid в этом инструменте. Вы можете видеть, как фокус должен перемещаться по макету.

Изменение порядка контента и адаптивный веб-дизайн

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

В настоящее время не существует хорошего решения для этой конкретной проблемы. В большинстве ситуаций разработка «сначала для мобильных устройств» может помочь вам поддерживать исходный код и макет в порядке. Выбор, который вы делаете в отношении приоритета на мобильных устройствах, часто подходит для контента в целом. Главное — знать, когда существует возможность изменения порядка контента. Проверьте, чтобы конечный результат не был слишком резким в каждой точке останова.