🎨 Дизайн поза зоною комфортуПро що ви думаєте, коли отримуєте задачу, до якої не знаєте, як підійти? 🤔Як перетворюєте умову на конкретні дії?Саме тут починається шлях у невідоме 🧭 — який відкриває нові погляди на знайомі речі.Переді мною стояла задача — провести Accessibility Audit для сторінки сайту. ♿Accessibility (вебдоступність) — це підхід до створення цифрових продуктів, якими можуть користуватися всі 🌍, незалежно від здібностей чи тимчасових або постійних порушень зору, слуху, мовлення, моторики або когнітивних особливостей.Accessibility Audit — це перевірка продукту на відповідність стандартам Web Content Accessibility Guidelines (WCAG), що базуються на чотирьох принципах:• Інформація, доступна для сприйняття 👁️• Інтерфейс, придатний до керування 🖱️• Контент, легкий для розуміння 💬• Продукт, сумісний з допоміжними технологіями 🧩Насправді, Accessibility Audit — це не лише перевірка стандартів ✅, а й можливість побачити продукт очима людей, які користуються ним інакше.Саме в цей момент відбувається особистісний вихід із зони комфорту — своєрідна «примірка чужого взуття» 👟.Як користуватися продуктом лише з клавіатури? ⌨️Де знаходиться фокус і з чим можна взаємодіяти?Заплющити очі й пройти сторінку зі screen reader: слухати некоректні або беззмістовні alt-тексти зображень (або зрозуміти, що їх просто немає). 🙈Побачити за допомогою плагінів, як люди з порушеннями зору сприймають контент. 🧠Частині accessibility-проблем можна запобігти вже на етапі дизайну ✏️:• Перевіряти контрастність тексту та іконок відповідно до WCAG (AA — базовий рівень) → світло-сірий текст на білому фоні не проходить перевірку ⚠️• Будувати ієрархію контенту → заголовки мають йти по порядку (H1 → H2 → H3), а не за візуальним розміром 📚• Передбачати стани елементів (focus, hover, active) → користувач має бачити, де знаходиться фокус під час навігації з клавіатури ✨• Робити тексти кнопок зрозумілими з контексту → «Надіслати форму» замість «OK» або «Далі» 🪶• Передавати альтернативний текст для зображень → якщо зображення щось пояснює, screen reader має це озвучити 🔊• Використовувати додаткові маркери для передачі інформації → помилки, успішні дії та попередження мають зчитуватися без кольору 🎯• Проєктувати клікабельні елементи за базовими стандартами → достатній розмір клікабельної зони та зрозумілий стан наведення 🖲️Accessibility — це завжди про людей ❤️ і про ширші можливості взаємодії з продуктом — і для тих, хто його створює, і для тих, хто ним користується.#НотаткиДжуна ✍️