Стандарти · WCAG 2.2

SC 1.3.2 Ниво A WCAG 2.0

Смислена последователност

Когато редът на четене на съдържанието е важен за разбирането, редът в DOM трябва да съответства на визуалния ред. CSS позициониране и float, които разбъркват последователността, нарушават работата на екранните четци и навигацията с клавиатура.

Какво изисква

Ако смисълът на съдържанието зависи от реда, в който се чете — инструкции, разказ, стъпка по стъпка процес — този ред трябва да бъде запазен в DOM. Екранните четци и механизмите за пренаредба на съдържанието обхождат документа в реда на изходния код; ако CSS order, position: absolute, flex-direction: row-reverse или разполагането в мрежа разбърква визуалния ред спрямо DOM реда, потребителското изживяване се разпада.

Как да се изпълни

  • Пишете DOM в реда, в който съдържанието трябва да се чете; използвайте CSS за визуално позициониране, а не за измисляне на последователността.
  • Проверете всяка употреба на flex-direction: row-reverse, CSS order или grid-area, която премества съдържание извън позицията му в изходния код.
  • При многоколонни оформления разполагайте колоните в DOM в реда на четене, а не в реда на визуалните колони.
  • Тествайте, като изключите CSS (инструменти за разработчици в браузъра, „преглед на реда на изходния код”) — неоформеният поток трябва да остане разбираем.
  • Преминете страницата с екранен четец и отбележете всеки момент, в който редът на обявяване ви изненадва.

Чести грешки

  • Странична лента, визуално позиционирана вдясно, но поставена първа в DOM — екранните четци чуват реклами, свързани връзки и покани за действие преди основната статия.
  • flex-direction: row-reverse в навигационно меню — зрящите потребители виждат Начало / За нас / Контакти, а екранните четци чуват Контакти / За нас / Начало.
  • CSS order на полета на формуляр, преподреждащ визуалния ред спрямо DOM реда, така че табулирането прескача непредсказуемо.
  • Връзка „Към съдържанието” поставена след навигацията в DOM, но абсолютно позиционирана визуално в горната част — клавиатурните потребители достигат навигацията пръв.
  • Карти в мрежа, визуално наредени отляво надясно, но поставени в DOM отдолу нагоре заради ловък трик с мрежата.

Защо е важно

Грешките в смислената последователност са коварни — страницата изглежда наред, валидира се и преминава повечето автоматизирани проверки. Те се проявяват едва когато реален потребител с екранен четец се опита да чете страницата от горе до долу. Повечето поправки са малки пренаредби в DOM, но диагностичните разходи за намиране на проблема са значителни.