♿ Нова категорія: Доступність та WCAG

Сьогодні ми запускаємо нову категорію: Доступність та WCAG — 11 безкоштовних інструментів для дизайнерів, розробників та авторів контенту, які хочуть будувати більш інклюзивні продукти.

🛠️ Що входить у категорію

• WCAG Contrast Checker — введення hex/rgb/hsl, рівні AA/AAA для тексту, великого тексту та UI-компонентів. Включає функцію підбору «найближчого допустимого кольору».
• Non-Text Contrast Checker — перевіряє контраст 3:1 для рамок, іконок, кілець фокусу та меж кнопок (WCAG 1.4.11).
• Heading Structure Auditor — вставте HTML або Markdown і миттєво побачте ієрархію заголовків. Виявляє пропущені рівні, кілька H1 та порожні заголовки.
• Link Text Quality Checker — знаходить «натисніть тут», «читати далі», дублікати посилань з різними URL та посилання-зображення без alt-тексту.
• Alt-Text Linter — перевіряє кожен тег <img> у вашому HTML. Виявляє відсутній alt, зайві префікси «зображення…», надто довгі описи та дублікати.
• Form Accessibility Validator — перевіряє мітки, aria-describedby, позначення обов'язкових полів, групування fieldset та загальний текст кнопки відправлення.
• Keyboard Navigation Checklist — оберіть тип компонента (модальне вікно, випадаючий список, вкладки, карусель…) і отримайте повний QA-чеклист з критеріями WCAG.
• Accessible Color Palette Generator — введіть фірмовий колір і отримайте шкалу з 9 відтінків (50–900) з попередньо розрахованими коефіцієнтами контрастності.
• Readability & Plain Language Analyzer — оцінки Flesch-Kincaid, Gunning Fog, SMOG, Coleman-Liau плюс виявлення пасивного стану та довгих речень.
• Accessibility Statement Builder — заповніть форму та згенеруйте готову до публікації заяву про доступність (вимога Директиви ЄС про веб-доступність).
• A11y Issue Triage Board — додайте результати аудиту, оцініть за критичністю/зусиллями/впливом, автоматично відсортуйте у чергу пріоритетів, експортуйте у CSV або Markdown.

🎯 Для кого ці інструменти?

Фронтенд-розробники що хочуть виявляти проблеми до QA, UX-дизайнери що валідують кольорові системи, автори контенту що перевіряють читабельність, та продуктові команди що готуються до аудитів або відповідності вимогам ЄС. Всі інструменти працюють повністю у браузері — без реєстрації, без відправки даних.

⚡ Особлива фіча: A11y Triage Board

Дошка тріажу — це те, чого ми не бачили як безкоштовного standalone-інструменту раніше. Вставте результати аудиту, вкажіть критичність (критична/серйозна/помірна/незначна), зусилля та вплив на користувачів — і система автоматично розраховує оцінку пріоритету, щоб ви завжди знали що виправляти першим. Експорт у CSV для Jira або Markdown для GitHub Issues.

🔮 Що далі

• Валідатор ARIA-ролей — вставте HTML з власними віджетами та перевірте правильність role/атрибутів.
• Симулятор кольорової сліпоти — перегляньте будь-який дизайн у режимах Дейтеранопія, Протанопія та Тританопія.
• Візуалізатор порядку фокусу — вставте HTML та побачте послідовність Tab пронумеровану на сторінці.

Доступність — це не пташка у чеклисті, це практика. Ці інструменти створені щоб зробити цю практику швидшою та менш болісною. Спробуйте і розкажіть нам що думаєте через Feedback. 💬