Модуль 6 · Урок 24
Images, contrast і accessibility audit
Якісний audit поєднує code inspection, keyboard, zoom/reflow, contrast, accessibility tree і реальну task-oriented перевірку. Automated tool знаходить частину patterns, але не знає purpose image, якість accessible name чи зрозумілість user journey.
Alt залежить від purpose і context
| Purpose | Рішення | Приклад |
|---|---|---|
| Informative | Стисло передати потрібну інформацію | alt="Графік: конверсія зросла з 2% до 4%" |
| Decorative | Порожній alt | alt="" |
| Functional | Назвати дію/призначення | alt="Завантажити звіт" у linked image |
| Text in image | Передати текст, якщо image справді необхідне | Краще звичайний HTML text |
Filename, «image» або повтор сусіднього caption не допомагають. Одна й та сама картинка може мати різний alt у різному context; рішення документується в alt-decision record.
Color не є єдиним сигналом
Позначення «помилка = червоне поле» потребує text/icon/pattern, який передає той самий зміст. Для WCAG 2.2 AA normal text перевіряйте ratio щонайменше 4.5:1, large text — 3:1. Візуальна інформація, потрібні boundaries controls і component states зазвичай потребують 3:1 non-text contrast із adjacent color.
Що ratio не доводить
Один успішний color pair не доводить contrast усіх states, gradients, focus indicators або text поверх image. Фіксуйте selector/state, sampled colors, tool/version і screenshot/evidence.
Manual audit stack
Issue register і release decision
- Summary називає defect, а не criterion.
- User impact пояснює, хто і що не може зробити.
- Reproduction містить URL/component, environment і точні кроки.
- Evidence показує actual role/name/state, focus або measured pair.
- Recommendation усуває cause й не маскує symptom.
- Retest закриває issue лише після повторення всього сценарію.
Audit report завжди перелічує scope, methods, environments і known limitations. Не пишіть «100% accessible» або «WCAG certified» на підставі одного automated scan.
Лабораторна
BookFlow Accessibility Audit Lab
17 локальних safe-файлів: flawed/reference page, assets, inventories, keyboard/form/alt/contrast worksheets, screen-reader task, issue register і manual release checklist.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.