Доступність у дизайні для початківців: як робити інтерфейси для всіх

Крок 1

Зрозумійте, для кого це і що таке WCAG

За визначенням W3C, вебдоступність означає, що сайти й інструменти спроєктовано так, щоб ними могли користуватися люди з інвалідністю: сприймати, розуміти, переміщатися й взаємодіяти. Це стосується порушень слуху, зору, рухів, мовлення, когнітивних і неврологічних. А ще доступність допомагає людям без інвалідності: наприклад, тим, хто користується телефоном із маленьким екраном. Стандарт WCAG (Web Content Accessibility Guidelines) побудовано на чотирьох принципах:

• •сприйнятність — інформацію можна сприйняти: побачити, почути чи прочитати екранним читачем;
• •керованість — інтерфейсом можна користуватися, зокрема з клавіатури;
• •зрозумілість — і зміст, і поведінка інтерфейсу зрозумілі;
• •надійність — контент коректно працює з різними браузерами й допоміжними технологіями.

💡 Критерії WCAG мають три рівні: A, AA і AAA. Для відповідності рівню AA сторінка має виконувати всі критерії рівнів A і AA. Для початку орієнтуйтеся на AA.

Крок 2

Текст і колір

Типова проблема в макетах — блідий текст. Критерій WCAG 1.4.3 вимагає контрасту щонайменше 4.5:1 між текстом і фоном. Для великого тексту — від 18 пунктів або від 14 пунктів жирним — достатньо 3:1. Логотипи й суто декоративний текст під цю вимогу не підпадають. Окремий критерій 1.4.11 вимагає контрасту 3:1 для частин інтерфейсу, без яких елемент не впізнати, — меж полів, іконок-кнопок, станів чекбокса — і для важливих частин графіків.

• •перевіряйте кожну пару «текст — фон», зокрема текст на фото, градієнтах і кнопках;
• •не передавайте зміст лише кольором (критерій 1.4.1): помилку в полі позначайте ще й текстом, обов'язкові поля — ще й зірочкою;
• •закладайте місце для збільшеного тексту: за критерієм 1.4.4 текст має збільшуватися до 200% без втрати змісту чи функцій.

💡 Детальніше про підбір кольорів і перевірку палітри — у гайді Як підібрати палітру кольорів.

Крок 3

Кнопки, посилання й фокус

Люди з тремором рук чи ті, хто тримає телефон однією рукою, часто не влучають у дрібні кнопки. Критерій 2.5.8 (рівень AA, новий у WCAG 2.2) вимагає, щоб область натискання була щонайменше 24 × 24 CSS px або щоб навколо меншої кнопки було достатньо вільного місця. Ще одна вимога — видимий фокус (критерій 2.4.7): людина, яка користується клавіатурою, має бачити, на якому елементі вона зараз.

• •у компонентах кнопок, полів і посилань зробіть окремий варіант Focus — наприклад, з помітною обвідкою;
• •робіть посилання помітно іншими за звичайний текст, а не лише кольором;
• •однакові дії позначайте однаково на всіх екранах: однакова іконка й однаковий підпис.

Крок 4

Форми, зображення й структура

Для форм WCAG вимагає підписів або інструкцій там, де людина щось вводить (критерій 3.3.2). W3C радить розміщувати зрозумілий підпис поруч із полем — зазвичай над ним або зліва, а для чекбоксів і радіокнопок — справа, і не робити великий проміжок між підписом і полем. Для зображень потрібна текстова альтернатива (критерій 1.1.1): опис, який прочитає екранний читач.

• •для кожного важливого зображення в макеті додайте анотацію з альтернативним текстом — так розробники знатимуть, що написати;
• •для кнопок-іконок без тексту вкажіть назву дії, наприклад «Закрити» чи «Додати в кошик»;
• •перевірте, як макет поводиться на вузькому екрані: критерій 1.4.10 вимагає, щоб вміст читався без горизонтального прокручування при ширині, еквівалентній 320 CSS px.

💡 Повідомлення про помилку пишіть так, щоб було зрозуміло, що виправити: не «Помилка», а «Введіть номер телефону у форматі +380».

Крок 5

Перевірте макет у Figma

Багато проблем можна знайти ще до розробки. У палітрі кольорів Figma є кнопка Check color contrast: вона показує співвідношення контрасту, відповідність рівням AA чи AAA і може підібрати найближчий відповідний колір. Для перевірки з екранним читачем у Figma є accessible prototypes: прототип можна пройти з VoiceOver на Mac або JAWS чи NVDA на Windows — у браузері на комп'ютері чи в десктопному застосунку.

• •порядок переходу клавішею Tab у прототипі відповідає порядку шарів, а у фреймах з Auto layout — порядку розкладки: впорядкуйте шари логічно;
• •зображення-заливки читаються з назвою шару як альтернативним текстом, тож називайте шари змістовно, а не «Rectangle 12»;
• •вправа: візьміть свій старий макет, знайдіть у ньому п'ять порушень із цього гайду й виправте їх — це готовий розділ для кейсу «до і після».

💡 Покажіть макет у спільноті й попросіть перевірити щось конкретне: контраст другорядного тексту, розмір кнопок чи підписи полів. Конкретне питання дає корисну відповідь.