WCAG 1.3.2 Значуща послідовність

Критерій успіху 1.3.2 потрібен для того, щоб вміст ішов в осмисленому порядку, коли програма зчитування з екрана читає сторінку згори донизу або коли сторінку показано без стилів. Це рівень A, і він входить до EN 301 549 (пункт 9.1.3.2; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Коли послідовність, у якій подано вміст, впливає на його зміст, правильну послідовність читання можна визначити програмно — на практиці порядок елементів у HTML (порядок DOM) має передавати цей зміст.

Варто знати дві речі:

• критерій застосовується лише там, де порядок важливий. Навігація, основний вміст і бічна панель можуть іти в будь-якому порядку; вміст усередині статті, форми чи блоку з ціною має залишатися впорядкованим;
• достатньо щонайменше однієї осмисленої послідовності. Вона не мусить бути єдино можливою.

Типові помилки в інтернет-магазині

• CSS order, flex-direction: row-reverse або розміщення в grid візуально ставить ціну перед назвою товару, а код читає їх інакше;
• блок «було / стало», де код зачитує нову ціну як «було»;
• таблиця розмірів чи порівняння, розкладена в колонки за допомогою пробілів або div, яка при читанні по рядках перетворюється на нісенітницю;
• таблиця для верстки, яка втрачає сенс, коли її комірки читають одну за одною;
• банер cookie чи спливне вікно, вставлене в кінці коду, але показане вгорі, тож його контекст зачитується останнім.

Як перевірити

Автоматично: жодне автоматичне правило нашого сканера не відповідає цьому критерію. Інструмент бачить порядок DOM, але не бачить, чи змінюється зміст. Тут потрібна ручна перевірка.

Вручну: вимкніть CSS (наприклад, розширенням браузера або в режимі читання) і прочитайте сторінку згори донизу: чи кожен блок усе ще має сенс? Або прослухайте її програмою зчитування з екрана в режимі читання. Особливу увагу приділіть цінам, характеристикам товару, формам і багатоколонковим макетам.

Як виправити

• Пишіть HTML у тому порядку, у якому його мають читати, а CSS використовуйте лише для верстки, не для зміни змісту.
• Уникайте зміни порядку через CSS для вмісту, порядок якого важливий; якщо на мобільних потрібен інший порядок, змініть розмітку.
• Для табличних даних використовуйте справжні таблиці, а не пробіли чи позиціоновані блоки.
• Вставляйте діалоги й банери в DOM там, де їм логічно місце, і переміщуйте фокус у модальні діалоги.

Пов'язані критерії

• 1.3.1 Інформація та взаємозв'язки — структура, розмічена в коді.
• 1.3.3 Сенсорні характеристики — інструкції, що спираються на розташування.
• Чек-лист WCAG 2.2 — зокрема 2.4.3 «Порядок переміщення фокуса».

Часті запитання

Чи має порядок у коді збігатися з візуальним?

Лише там, де порядок впливає на зміст. Незалежні блоки, як-от навігація й основний вміст, можуть іти в будь-якому порядку; кроки рецепта, ціна та її підпис чи назва товару та його характеристики мають залишатися в осмисленій послідовності.

Чи є зміна порядку через CSS flex або grid порушенням?

Не автоматично. Порушенням вона стає, коли змінена візуальна послідовність несе зміст, якого не передає порядок у коді, наприклад коли «стара ціна» і «нова ціна» міняються місцями.

Чи 1.3.2 — це те саме, що порядок фокуса?

Ні. 1.3.2 стосується порядку читання вмісту. Порядок, у якому рухається фокус клавіатури, регулює 2.4.3 «Порядок переміщення фокуса», хоча обидві проблеми зазвичай виправляють однаково.