Макет сетки и доступность

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

В спецификации есть раздел, посвящённый переупорядочению и доступности. Введение в этот раздел содержит информацию о том, что спецификация ожидает от браузеров при визуальном переупорядочении содержимого с помощью макета сетки.

Макет сетки даёт авторам большие возможности перестановки документа. Однако они не заменяют правильный порядок исходного кода документа. Свойство order и размещение сетки не влияют на порядок в невизуальных носителях (например, в речи). Аналогично, визуальное переупорядочение элементов сетки не влияет на порядок прохода по умолчанию для последовательных режимов навигации (например, прохода по ссылкам, см., например, tabindex HTML5).

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

Спецификация предупреждает авторов (термин CSSWG для веб-разработчиков) об избегании такого переупорядочения.

Авторы должны использовать свойства order и grid-placement только для визуального, а не логического переупорядочения содержимого. Стили, использующие эти возможности для выполнения логического переупорядочения, не соответствуют спецификации.

Что это означает для разработки с использованием макета сетки на практике?

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

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1;
  grid-row: 2;
}

<div class="wrapper">
  <div class="box box1"><a href="">One</a></div>
  <div class="box box2"><a href="">Two</a></div>
  <div class="box box3"><a href="">Three</a></div>
  <div class="box box4"><a href="">Four</a></div>
  <div class="box box5"><a href="">Five</a></div>
</div>

Спецификация гласит, что в этом случае, если ящик 1 действительно логически соответствует этому положению, нам следует вернуться к исходному коду и внести изменения там, а не переупорядочивать с помощью макета сетки. Вот что подразумевается под визуальным и логическим переупорядочением; логический порядок важен для смысла и структуры нашего документа, и мы должны следить за сохранением этой структуры.

Из спецификации мы знаем, что нам нужно убедиться, что наш документ сохраняет логический порядок нашего содержимого. Как нам следует разработать, чтобы гарантировать сохранение доступности для разных пользователей и способов взаимодействия с нашими страницами?

Начните с структурированного и доступного документа

Макет сетки должен означать, что нам не нужно изменять исходный код документа, чтобы получить желаемый макет. Поэтому отправной точкой вашей страницы должен быть хорошо структурированный и доступный исходный документ. Как отмечается в спецификации CSS-сетки, это часто даёт вам хорошую структуру и для ваших устройств с самыми маленькими экранами. Если пользователь прокручивает длинный документ на мобильном устройстве, приоритеты этого пользователя часто соответствуют тому, что должно быть приоритетным в исходном коде.

Создайте адаптивную и ответственный сетку

Имея надёжный документ, вы можете начать добавлять свой макет; скорее всего, вы будете использовать средства запроса медиа, чтобы создать дополнительные столбцы и внести изменения для разных размеров экрана и устройств. Сетка может быть здесь очень полезной; элементы, которые имеют низкий приоритет в мобильном порядке исходного кода, могут быть перемещены в боковую панель в макете для настольного компьютера, например. Ключ здесь состоит в постоянном тестировании. Очень простой тест — переход по элементам с помощью табуляции. Этот порядок по-прежнему имеет смысл? Проверьте, не происходит ли скачкообразного перехода с верхнего края макета на нижний. Если это так, это означает, что вам нужно устранить несоответствия в макете.

Возвращение к исходному коду

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

Ещё одна проблема, о которой следует помнить при работе с макетом CSS-сетки, и в меньшей степени с CSS flexbox, — это искушение сгладить разметку. Как мы выяснили, для того, чтобы элемент стал элементом сетки, он должен быть прямым потомком контейнера сетки. Таким образом, если у вас есть элемент <ul> внутри контейнера сетки, он ul становится элементом сетки — дочерние элементы <li> нет.

Значение subgrid для grid-template-columns и grid-template-rows решит эту проблему, когда будет широко реализовано. Это позволит наследоваться сеткой для элементов сетки и передаваться по дереву.

Учитывая ограниченную межбраузерную поддержку subgrid, существует определённое искушение при разработке сайта с использованием макета CSS-сетки — сгладить разметку, убрать семантические элементы, чтобы упростить создание макета. Примером может служить ситуация, когда некоторый контент семантически помечен как список, но вы решаете использовать набор элементов <div> вместо этого, чтобы элемент мог быть прямым потомком контейнера, установленного в display: grid. Будьте внимательны к этому искушению и находите способы разработать свой дизайн без удаления разметки. Начать с хорошо структурированного документа — очень хороший способ избежать этой проблемы, поскольку вы будете знать, что удаляете семантические элементы, чтобы макет работал, если вам действительно нужно вносить изменения в документ!

Существует не так много материалов, посвященных доступности и макету CSS Grid. Многие проблемы аналогичны проблемам, поднятым в отношении CSS flexbox, который также предоставляет методы переупорядочения содержимого с помощью flex-direction и свойства order.

Концепция визуального отображения, следующего за порядком исходного кода документа, подробно описана в Методах WCAG для критериев успеха - Метод C27.

В качестве способа начать размышлять об этих проблемах, используя макет CSS Grid, я бы посоветовал прочитать статью Flexbox & the Keyboard Navigation Disconnect Леоньи Уотсон. Также полезен видеозапись презентации Леоньи с ffconf, чтобы больше узнать о том, как программы для чтения с экрана работают с визуальным представлением элементов в CSS. Адриан Росселли также опубликовал материал о порядке табуляции в различных браузерах — хотя это было до того, как поддержка сетки была полностью реализована в Firefox.