Модуль 7 · урок 9 з 10
Перевірка a11y
Тепер перевірка. Доступність — рідкісна тема, де є інструменти, які знаходять проблеми автоматично. Але автоматика ловить приблизно третину; решта — це пʼять хвилин ручного прогону, які ти вже вмієш робити.
Порядок перевірки
- Lighthouse → Accessibility. Вбудований у Chrome, дає число й список проблем. Швидкий загальний зріз.
- axe DevTools. Розширення, знаходить більше й пояснює кожну проблему з посиланням на правило.
- Клавіатурний прогін. Пʼять хвилин без миші — те, чого не бачить жоден інструмент.
- Перевірка контрасту. Обидві теми, включно з приглушеним текстом і фокусом.
- Скрінрідер. Найдовше, але дає найбільше розуміння.
Інструмент бачить, що в кнопки немає імені, або що контраст 3.2:1. Але він не знає,
чи aria-label="Кнопка 1" щось означає для людини, чи логічний порядок фокуса,
чи зрозуміла помилка. Тому число в Lighthouse — це не мета, а перший фільтр.
Чекліст для нашого застосунку
| Перевірка | Як |
|---|---|
| Кожна іконкова кнопка має імʼя | axe або Tab із увімкненим скрінрідером |
| Поля повʼязані з підписами | Клік по підпису має ставити курсор у поле |
| Помилки повʼязані з полями | aria-describedby у DevTools |
Таблиця має th і scope | Перевірити розмітку |
| Сортування оголошується | aria-sort на заголовку |
| Модалка тримає фокус | Tab по колу, Escape закриває |
| Фокус видно завжди | Прогін Tab по всьому екрану |
| Контраст обох тем | Lighthouse у світлій і темній |
| Статуси не лише кольором | Подивитись у чорно-білому режимі |
| Анімації вимикаються | DevTools → Rendering → prefers-reduced-motion |
Емуляція в DevTools
// Chrome DevTools → Rendering (⋮ → More tools → Rendering)
Emulate CSS media feature prefers-reduced-motion // анімації мають зникнути
Emulate CSS media feature prefers-color-scheme // перевірити обидві теми
Emulate vision deficiencies → Protanopia // червоно-зелена сліпота
Emulate vision deficiencies → Blurred vision // перевірка розмірів і контрастуРежим Protanopia — найшвидший спосіб побачити проблему зі статусами: якщо після переключення бейджі «готово» і «заблоковано» стали однаковими, значить колір у тебе носій змісту, а не підсилення.
Скрінрідер за десять хвилин
macOS: VoiceOver — Cmd+F5
Windows: NVDA — безкоштовний, найпоширенішийНе треба вчити всі команди. Достатньо трьох речей: увімкнути, пройти сторінку Tab-ом і послухати, що озвучується. Найпоказовіше — відкрити модалку й спробувати зрозуміти на слух, що це за вікно й що в ньому робити.
- Кнопка з текстом: «Зберегти, кнопка».
- Поле з підписом: «Код задачі, поле вводу».
- Заголовки: можна стрибати між розділами.
- Таблиця з
th: «Статус, колонка».
- «Кнопка» — без імені, іконка без
aria-label. - «Посилання, посилання, посилання» — однаковий текст «Детальніше».
- Тиша після натискання «Зберегти» — немає живої області.
- Читання скелетона як порожніх елементів.
- Модалка, яка не оголошує себе — немає заголовка.
Що показати ліду
«Прогнав Lighthouse — Accessibility 100, але це лише перший фільтр. Далі пройшов основний сценарій без миші: пошук, сортування, відкриття модалки, збереження. Фокус видно скрізь, із модалки не виходить, після закриття повертається на кнопку. Контраст перевірив в обох темах, найслабше місце було в приглушеному тексті — підняв до 4.6. Статуси не лише кольором: у режимі протанопії вони й далі розрізняються, бо є текст і іконка.»
Ця відповідь працює краще за будь-яке число, бо показує розуміння межі інструментів. І майже ніхто з кандидатів такого не робить — тож запамʼятовується.