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

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

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

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

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