Перевірка доступності сайту – WCAG

Перевірка доступності сайту за WCAG 2.2: контраст кольорів, alt-текст, заголовки, порядок фокуса, симулятор дальтонізму.

🔍 Перевірка доступності сайту за WCAG 2.0, 2.1 і 2.2 Перевірка доступності сайту перетворює будь-яку вкладку браузера на робоче місце аудитора. Відкрий бічну панель, проскануй сторінку і читай кожну помилку, згруповану за правилом, із виміряним значенням поруч із потрібною межею, з причиною, з виправленням і з прикладом коду, готовим до вставки. Під капотом ця перевірка доступності сайту запускає axe-core 4.13 та ще власний шар правил для тих критеріїв WCAG 2.2, які майже жоден інструмент досі не покриває: розмір цілі, фокус не перекрито, доступна автентифікація, міжлітерні інтервали та перекомпонування. Більшість встановлює інструмент для перевірки доступності сайту через одне питання перед релізом: що саме не пройде і де. Відповідь зʼявляється за дві секунди, на сторінці, яка й так відкрита, без кроку збирання і без черги до хмарного робота. ✅ Що охоплює кожне сканування ➤ Контраст звичайного тексту, великого тексту й нетекстових елементів ➤ Альтернативні тексти, декоративні та описані деінде зображення ➤ Структура заголовків, орієнтири, мова сторінки й заголовок документа ➤ Підписи полів, тексти посилань, таблиці, субтитри та відеозаміни ➤ Порядок табуляції, індикатор фокуса, пастки клавіатури, розмір цілі 📐 Стандарти, які він знає Знахідка допомагає лише тоді, коли називає правило, за яким тебе оцінюватимуть, тож кожна знахідка несе свій критерій успіху, рівень і версію. 1. WCAG 2.0, 2.1 і 2.2 на рівнях A, AA та AAA 2. ДСТУ EN 301 549 для українських державних ресурсів 3. European Accessibility Act і вимоги ринку ЄС 4. Section 508, ADA Title III та AODA у Північній Америці 🎨 Контраст, виміряний двома способами Візьми два кольори піпеткою, правь їх наживо і стеж за коефіцієнтом WCAG поруч зі значенням APCA Lc. Калькулятор контрасту виносить вирок для звичайного тексту, великого тексту й нетекстових елементів одразу, тож результат WCAG 2.1 AA лежить за один погляд від суворішого результату WCAG AAA. APCA це новіший метод довкола WCAG 3.0. 🕶 Симуляції зору на живій сторінці 1️⃣ Вісім типів кольорового зору, від протанопії до ахроматопсії 2️⃣ Слабкий зір, катаракта і глаукома поверх справжньої верстки 3️⃣ Режим труднощів читання для тексту, який не стоїть на місці Симулятор дальтонізму працює на самій сторінці, ніколи на знімку екрана, тож до огляду потрапляють і стани hover, графіки та обкладинки відео. 🧭 Знайди проблему, не читаючи DOM - Locate чіпляє табличку з критерієм просто на хибний елемент - Карти заголовків і орієнтирів малюють справжню структуру згори - Порядок фокуса нумерується вздовж реального шляху клавіатури - Альтернативний текст показано біля кожного зображення 📄 Документи, якими завершується аудит Тестування це половина роботи. Усе нижче виходить з одного сканування, тож звіт про доступність, який ти віддаєш, збігається з вкладкою, яку ти перевірив. 📊 Фірмовий звіт HTML, друкується просто в PDF 🧾 CSV і JSON для задач, дощок та конвеєрів ✍ Чернетка декларації про доступність власного сайту 📋 Таблиця у стилі VPAT для закупівель і тендерів У понеділок це генератор декларації про доступність, у пʼятницю джерело звіту про відповідність. 🌐 Тестування доступності сайту далі за одну сторінку Обійди сторінки того самого origin за один прохід, збережи історію і порівняй два запуски, щоб побачити, що зламалося і що полагодили. Разовий огляд стає регресійним тестуванням доступності сайту перед кожним релізом, саме те, чого чекають від інструмента моніторингу. ✦ Чому ця панель лишається закріпленою ✦ Кожна знахідка показує вимір, а не туманне слово про вагу ✦ Підказка пояснює виправлення, а не лише назву правила ✦ Усе експортується, ніхто не збирає звіт руками ✦ Панель проходить власний аудит на рівні WCAG 2.2 AA 🔒 Приватно за будовою Ані вміст сторінки, ані адреси, ані результати не залишають компʼютер. Сканер без мережевих викликів дістає туди, куди хмарні сканери не заглядають: staging, інтранет і внутрішні збірки. Без облікового запису, без реєстрації і без мережі. 👥 Зроблено для всієї команди Розробники прибирають до ревʼю коду, дизайнери перевіряють рішення щодо кольору, QA веде тестування доступності сайту всередині спринту, агенції готують документи клієнту, редактори вирішують, чи сторінка виходить. Пасує будь-яка відмальована сторінка. ⚡ Три кроки до готового документа → Натисни Alt+Shift+A і дай скануванню відпрацювати → Розбери список, знайди елемент, виправ і повтори перевірку → Вивантаж звіт, декларацію або таблицю відповідності ⚖ Чесно про обмеження Автоматичні інструменти дістають приблизно третину критеріїв успіху WCAG, і кожна оцінка та кожна чернетка кажуть про це прямо. Швидко закрий те, що бачить машина, а години лиши на судження, яких не дасть жоден автоматичний інструмент. Допомога аудиту, але не сертифікат. ⌨ Готово за десять секунд Закріпи розширення, відкрий будь-яку сторінку і натисни Alt+Shift+A. Без збирання, без навчання і без таймера пробного періоду. Панель говорить пʼятнадцятьма мовами.