Достъпност за дизайнери: Създаване на приобщаващ визуален и интерактивен дизайн

Достъпният уебсайт започва с достъпен дизайн. Много от най-честите дефекти в достъпността — недостатъчен цветови контраст, неясна навигация, объркващи оформления, липсващи индикатори за фокус — произтичат от решения, взети във фазата на проектиране. След като кодът е написан, тези проблеми са вградени и коригирането им изисква препроектиране, а не просто промени в кода.

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

Цветови контраст

Недостатъчният цветови контраст е един от най-разпространените проблеми с достъпността в уеб. WCAG изисква минимално контрастно съотношение от 4,5:1 между текста и неговия фон за нормален текст и 3:1 за голям текст (дефиниран като 18pt нормален или 14pt получер). На ниво AAA изискването се увеличава до 7:1 за нормален текст и 4,5:1 за голям текст.

Тези съотношения съществуват, защото хората с намалено зрение, стареещи очи или цветова слабост се нуждаят от достатъчен контраст, за да различат текста от фона. Светлосив текст на бял фон може да изглежда елегантно в дизайн макет, но става нечетим за значителен процент от потребителите.

Нетекстовите елементи също имат изисквания за контраст. Компоненти на потребителския интерфейс — бутони, полета за формуляри, икони, индикатори за фокус — и значими графични обекти трябва да поддържат поне 3:1 контрастно съотношение спрямо съседните цветове.

Използвайте инструменти за проверка на контраста през целия процес на проектиране, не само в края. Инструменти като WebAIM Contrast Checker или Colour Contrast Analyser ви позволяват да проверите контрастните съотношения, преди да фиксирате цветова палитра.

Цвят като информация

Цветът никога не трябва да бъде единственото визуално средство за предаване на информация. Ако използвате червено за грешки и зелено за успех, потребители с цветна слепота може да не могат да разграничат двете състояния. Винаги допълвайте цвета с допълнителни индикатори — икони, текстови етикети, шарки или подчертаване.

Типография и размер на текста

Целият текст на вашия уебсайт трябва да може да бъде увеличен до 200% без загуба на съдържание или функционалност. Това означава проектиране с гъвкави, относителни единици вместо фиксирани пикселни размери и гарантиране, че оформленията ви се адаптират елегантно при увеличаване на текста.

WCAG 2.2 съдържа и изисквания за разстоянието на текста. Потребителите трябва да могат да настроят височината на реда до поне 1,5 пъти размера на шрифта, разстоянието между абзаците до 2 пъти, разстоянието между буквите до 0,12 пъти и разстоянието между думите до 0,16 пъти размера на шрифта — без загуба на съдържание или функционалност.

Дизайн на връзки

Връзките трябва да се отличават визуално от околния текст. Те трябва да бъдат описателни и кратки и да казват на потребителите какво ще намерят, когато последват връзката. Никога не използвайте „кликнете тук" или „прочетете повече" като текст на връзка без допълнителен контекст.

Навигация и последователност

Навигацията трябва да бъде последователна на всички страници на вашия сайт. Потребителите, които разчитат на клавиатурна навигация или екранни четци, изграждат ментален модел на структурата на сайта ви, а неочаквани промени нарушават този модел. WCAG изисква навигационните механизми, които се появяват на множество страници, да се показват в един и същ относителен ред всеки път.

Индикатори за фокус

Когато потребител навигира вашия сайт с клавиатура, трябва да има видим индикатор, показващ кой елемент в момента има фокус. Този индикатор за фокус трябва да е ясно видим — WCAG 2.2 изисква да не бъде скрит от друго съдържание (SC 2.4.11).

Проектирайте индикатори за фокус съзнателно. Стандартното очертание на браузъра често е недостатъчно или бива премахнато от CSS нулирания. Проектирайте персонализиран стил за фокус, който има достатъчен контраст и е визуално забележим.

Размери на целите за докосване

Интерактивните елементи трябва да бъдат достатъчно големи, за да бъдат активирани без затруднение. WCAG 2.2 изисква интерактивните цели да бъдат поне 24×24 CSS пиксела (SC 2.5.8). На ниво AAA изискването се увеличава до 44×44 пиксела (SC 2.5.5). Това облагодетелства потребители с двигателни увреждания, тремор или ограничена сръчност, както и всички, които използват мобилно устройство в нестабилна среда.

Дизайн на формуляри

Формулярите са една от най-критичните области за достъпен дизайн. Всяко поле на формуляр изисква ясно видим етикет. Съобщенията за грешки трябва да бъдат конкретни, видими и поставени близо до полето, за което се отнасят. Давайте инструкции, където е необходимо, и избягвайте да използвате само текст-заместител като етикет.

Проектирайте за предотвратяване на грешки. Давайте на потребителите възможност да прегледат и коригират въведеното преди подаване, особено при действия с важни последствия като финансови транзакции или правни споразумения.

Движение и анимация

Някои потребители изпитват пристъпи, мигрена или замаяност от анимирано или мигащо съдържание. Нищо на вашия уебсайт не трябва да мига повече от три пъти в секунда. Осигурете контроли за поставяне на пауза, спиране или скриване на съдържание, което се движи, мига или скролва повече от пет секунди. Уважавайте настройката на операционната система „prefers-reduced-motion".

Изображения на текст

Избягвайте да използвате изображения на текст на вашия уебсайт. Истинският текст може да бъде увеличен, преформатиран и прочетен от помощни технологии. Изображенията на текст не могат. Единствените изключения са логотипи и ситуации, в които конкретно визуално представяне на текста е от решаващо значение.

Чеклист за достъпност на дизайнера

Преди да предадете дизайн за разработка, проверете: контрастните съотношения отговарят на изискванията за целия текст и всички интерактивни елементи; цветът никога не е единственият индикатор за информация; състоянията на фокус са проектирани за всички интерактивни елементи; целите за докосване отговарят на минималните изисквания за размер; навигацията е последователна на всички страници; състоянията за грешки и съобщенията са ясно проектирани; текстът може да бъде увеличен без разрушаване на оформлението; анимациите уважават потребителските предпочитания; и за цялото нетекстово съдържание са планирани текстови алтернативи.