Пренареждане

Какво изисква критерият

Когато прозорецът е с ширина 320 CSS пиксела — което съответства на десктоп с резолюция 1280px при 400% мащабиране или на малко мобилно устройство — съдържанието трябва да се пренарежда в единична колона без необходимост от хоризонтален скрол. Потребителят никога не трябва да превърта едновременно хоризонтално и вертикално, за да прочете последователно съдържание. Допустими изключения са налице: таблици с данни, сложни карти, примери с програмен код и презентации, при които двумерният скрол е неотделима характеристика на съдържанието.

Как да се постигне съответствие

• Изграждайте оформлението с принципа „mobile-first” с flexbox / CSS grid, което се сгъва в единична колона при малки ширини.
• Тествайте при точно 320px широчина на прозореца — или при 400% мащабиране на браузъра на прозорец с ширина 1280px — и проверявайте всяка страница.
• Използвайте max-width: 100% за изображения, видеа и вградени медии, за да се свиват заедно с прозореца.
• За навигацията — сгъвайте хоризонталната навигация на десктоп в вертикално мобилно меню при правилната точка на прекъсване.
• За таблици с данни — позволявайте хоризонтален скрол вътре в обвиващ елемент с overflow-x: auto; самата таблица е изключена, но нейният контейнер не трябва да разширява страницата хоризонтално.
• Не използвайте фиксирани ширини в пиксели за контейнери на страницата или за модални прозорци.

Чести грешки

• Хиро-секции с фиксирана ширина (width: 1200px), излизащи извън прозореца при 320px и налагащи хоризонтален скрол.
• Модални диалогови прозорци с размери в vw / px, надхвърлящи 320px ширина и изрязващи се на малки екрани.
• Примери с програмен код в блокове <pre> без пренасяне или контейнер за скрол, разширяващи страницата хоризонтално.
• Маркетингови страници с абсолютно позиционирани декоративни елементи, без отчитане на тесни прозорци.
• Закрепени елементи, препокриващи съдържанието при 400% мащабиране, тъй като са оразмерени за прозорец с пълна ширина.
• Таблици без обвиващ контейнер с overflow, поради което цялата страница се превърта хоризонтално вместо само таблицата.

Защо е важно

Пренареждането е критерият, улавящ повечето „адаптивни, но не наистина адаптивни” сайтове — оформление, което се чупи при 320 CSS пиксела, е оформление, което се чупи при 400% мащабиране за слабовиждащ потребител на десктоп. Двата случая са математически еквивалентни. Поправката на пренареждането обикновено означава укрепване на адаптивния дизайн, който вече е бил почти завършен, което го прави сред WCAG корекциите с най-висока ефективност.