CSS reading-flow

Вслед за анонсом от Edge, Рейчел Эндрю из команды Chrome поделилась новой функцией для улучшения доступности. Она будет доступна с выходом Chrome 137.

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

Элементы flex-контейнера можно разворачивать значениями row-reverse и column-reverse свойства flex-direction. Порядок конкретных элементов можно менять через свойство order.

В grid-контейнере возможностей больше. Порядок элементов задаётся по номерам или именам grid-линий, именованными областями или как решит браузер (grid-auto-flow).

Эти возможности меняют только визуальный порядок, но не порядок в DOM, что приводит к проблемам с доступностью. Новые CSS-свойства reading-flow и reading-order должны решить эти проблемы.

reading-flow управляет порядком элементов flex и grid-контейнеров, который передаётся дереву доступности. Можно включить соответствие визуальному порядку элементов, а не их порядку в DOM.

reading-order позволяет переопределить порядок конкретного элемента для дерева доступности, подобно тому, как order меняет положение конкретного элемента внутри flex-контейнера.

<style>
  .box {
    display: flex;
    flex-direction: row-reverse;
    reading-flow: flex-visual;
  }

  .box :nth-child(1) {
    order: 2;
  }
</style>

<div class="box">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

<!--
 Визуальный порядок: 
 1 3 2
-->

Без reading-flow порядок фокусировки ссылок был бы как в DOM: 1, 2, 3. Это не соответствует тому, что отображается на экране. Значение flex-visual передаёт порядок в соответствии с визуальным расположением элементов: 1, 3, 2.

flex-flow передаёт дереву доступности порядок, соответствующий текущему расположению элементов согласно потоку flex-контейнера с учётом row-reverse: 2, 3, 1.

Есть значения grid-rows и grid-columns для передачи порядка по строкам или по столбцами для grid-контейнеров. На специальной странице предлагаются разные примеры использования новых свойств. Там же есть ссылки, где можно оставить обратную связь.

#css #a11y