Решение проблемы несоответствия макета CSS и порядка источников

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

Rachel Andrew Technical Writer

Рабочая группа CSS работает над решением проблемы, когда метод макета может расположить элементы в порядке, не связанном с источником, а следовательно, с порядком чтения и фокуса документа. В этой статье описана проблема и предложенное решение. Мы будем рады вашим отзывам.

Проблема

Порядок чтения HTML-документа соответствует порядку исходного кода. Это означает, что программа чтения с экрана будет читать документ в том порядке, в котором он представлен в источнике, и пользователь, переходящий по документу с помощью клавиши Tab, также будет следовать этому порядку. Обычно это имеет смысл, и разумный порядок источников для документа жизненно важен для режима чтения, программ чтения с экрана и любого устройства с ограниченными возможностями CSS. Однако CSS, а также flexbox и grid в частности, могут создавать макеты, в которых макет определяет визуальный порядок чтения, отличный от базового источника.

Например, если использовать свойство order для flex-элементов, изменится порядок макета, но не порядок в источнике.

При использовании макета сетки порядок перехода между элементами может быть нарушен, например при использовании grid-auto-flow: dense, которое создает случайный порядок элементов.

Разработчик также может вызвать это несоответствие, разместив элементы в сетке в другом порядке, чем в источнике.

Предлагаемое решение

Рабочая группа CSS предлагает решение этой проблемы и будет рада получить отзывы разработчиков и специалистов по обеспечению доступности.

Следование случайным макетам с reading-order: auto

В ситуациях, когда порядок макета случайный, например при использовании плотной упаковки в макете сетки, вы, вероятно, хотите, чтобы браузер следовал макету, а не исходному порядку. Чтобы это произошло, у flex- или grid-элементов должно быть свойство reading-order со значением auto.

Приведенный ниже код CSS приведет к тому, что порядок чтения будет соответствовать расположению элементов, которые были плотно скомпонованы с помощью grid-auto-flow: dense.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

Следующие неслучайные макеты с reading-order-items

В некоторых макетах с сеткой и гибкой разметкой порядок элементов очевиден. Например, в гибкой разметке, где свойство order используется для изменения порядка элементов, очевиден порядок, заданный этим order свойством. В других макетах идеальный порядок макета менее очевиден, может быть несколько возможных вариантов. Поэтому, если вы используете неслучайные макеты, вам нужно добавить в контейнер свойство grid-order-items с ключевыми словами, объясняющими порядок элементов.

В следующем примере показана гибкая разметка с использованием row-reverse. У flex-элементов есть атрибут reading-order: auto, а у flex-контейнера – reading-order-items: flex flow. Это означает, что порядок чтения должен соответствовать направлению flex-flow, а не визуальному порядку (который можно было бы указать с помощью атрибута flex visual).

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

В следующем примере макет сетки создается с помощью grid-template-areas, а элементы размещаются в порядке, отличном от исходного. Свойство reading-order-items указывает, что мы должны следовать порядку макета, переходя к следующей строке только после того, как будет обработана текущая. (grid column – противоположное направление).

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

Значит ли это, что порядок источников не имеет значения?

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

При использовании этих свойств создавайте исходный документ в таком порядке, чтобы страница была понятна, если она будет отрисована без CSS. Добавляйте эти свойства только в тех местах и контрольных точках, где они необходимы.

Должны ли инструменты для создания контента применять эти свойства?

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

Поделитесь своим мнением об этом предложении

Мы будем рады получить ваши отзывы. Если вы считаете, что это решение не подходит для вашего случая или у вас есть опасения по поводу доступности, сообщите об этом рабочей группе CSS.

В этой теме вы найдете множество примеров использования и мнений о подходе. В этой цепочке можно оставлять комментарии и указывать на потенциальные проблемы с предложением. Обратите внимание, что текущее предложение сильно отличается от моего первоначального, с которого началась эта цепочка. Заинтересованным людям может понравиться вся дискуссия, которая привела нас к тому, что мы имеем сегодня, поскольку это хороший пример того, как предложения обрабатываются в рабочей группе CSS, чтобы стать чем-то, что можно реализовать в браузерах.

Уменьшенное изображение от Patrick Tomasso. Благодарим за отзывы и помощь в подготовке статьи Криса Харрелсона, Таба Аткинса и Иэна Килпатрика.