Подивіться на останню акцію, яку ви поставили на головну. «ЛІТНІЙ РОЗПРОДАЖ - ЗНИЖКА 40%» на всю обкладинку. Прайс, який дизайнер надіслав охайною картинкою. Години роботи всередині гарного фірмового прямокутника. Для вас це читається як текст, бо очі без зусиль перетворюють пікселі назад на слова. Для екранного читача й для клієнта, який збільшує сторінку до 300%, багато що з цього «тексту» зовсім не текст, а картинка з текстом, і ця різниця - саме те, на чому бізнес в Онтаріо спотикається, навіть не помічаючи. У WCAG є для цього назва, і, на відміну від деяких нових правил, це вже перебуває всередині стандарту, якого вимагає провінція.
Ключові факти
- 1.4.5 «Зображення тексту» - критерій успіху рівня AA у WCAG (Web Content Accessibility Guidelines) 2.0, яку W3C опублікував у 2008 році. Він проголошує: якщо технологія дає змогу отримати той самий візуальний результат, для передавання інформації використовуйте справжній текст, а не зображення тексту (W3C).
- Є два вузькі винятки: логотип (текст, що є частиною логотипа чи назви бренду) і текст, який користувач може повністю налаштувати, або випадки, коли конкретне представлення необхідне для сенсу (W3C).
- Розділ 14 IASR Онтаріо (Регламент про інтегровані стандарти доступності, O. Reg. 191/11) вимагає WCAG 2.0 рівня AA, куди входить 1.4.5, від організацій із 50 і більше працівниками (ontario.ca).
- Наступний ACR (звіт про відповідність вимогам доступності) треба подати до 31 грудня 2026 року організаціям із 20 і більше працівниками (ontario.ca).
- В AODA (Accessibility for Ontarians with Disabilities Act) немає права приватного позову; шлях для приватної особи - скарга до HRTO (Трибунал із прав людини Онтаріо) за Кодексом прав людини Онтаріо (ontario.ca).
Що вважається «зображенням тексту» і чому це провал?
Справжній текст - це символи, які браузер малює з HTML і оформлює через CSS. Їх можна виділити курсором, екранний читач може їх прочитати, інструмент перекладу може їх перекласти, і вони лишаються чіткими за будь-якого збільшення. Зображення тексту - це картинка, JPG, PNG чи зведена графіка, де літери намальовано в пікселях. На вашому екрані воно має такий самий вигляд, а всередині поводиться зовсім не як текст.
Звичайні порушники на сайті малого бізнесу передбачувані:
- Банер у шапці, де заголовок і пропозицію вдруковано в зображення.
- Прайс, меню чи таблиця годин роботи, вивантажені однією картинкою, бо так «мало охайніший вигляд».
- Інфографіка чи промоплитка з абзацами тексту всередині, часто та сама картинка, що пішла в соцмережі.
- Відгук чи цитата, збережені як знімок екрана.
Ось чому це ламається для реальних людей. Екранний читач читає текст, а не пікселі, тож без допомоги повідомлення просто мовчить. Людина зі слабким зором, збільшуючи сторінку, бачить справжній текст чітким, а зображення тексту перетворюється на пляму - та сама проблема, що стоїть за зміною розміру тексту й перекомпонуванням. Той, кому потрібен певний шрифт, більший інтервал чи висококонтрастна тема, може переналаштувати справжній текст, але не ваш JPG. А переклад у браузері, яким тихо користується багато клієнтів в Онтаріо, працює з текстом і пропускає слова, замкнені в картинці. Фото вашої вітрини - нормально: правило стосується тексту, поданого як зображення, а не зображень загалом.
Чи вимагає цього Онтаріо насправді?
Зазвичай тут я додаю застереження, бо кілька критеріїв, про які варто писати, - доповнення WCAG 2.2, яких Онтаріо поки не вимагає. Але не цей. 1.4.5 належить до рівня AA у WCAG 2.0, а це саме та версія, на яку вказує IASR. Для організації, на яку поширюється регламент, подання інформації картинкою з текстом, коли підійшов би справжній текст, перебуває всередині стандарту, якого провінція вже вимагає, а не на якійсь майбутній планці найкращої практики.
Чесний зворотний бік у тому, що правило вужче, ніж здається спершу, тож не впадайте в паніку. Ваш логотип гаразд: логотип прямо звільнено. Текст, який справді можна налаштувати, чи випадки, коли точне візуальне представлення необхідне для сенсу, теж звільнені. Лишається звичайне: ваша пропозиція, ціни, години роботи, основний текст, і це має бути справжнім текстом. А сенс зробити це правильно не в номері критерію. Ніхто не подає скарги до HRTO з посиланням на «1.4.5»; реальний клієнт з екранним читачем натрапляє на ваш банер «РОЗПРОДАЖ» чи години роботи й не може прочитати жодного слова, і процес скарг - саме про цю людину.
Як це знайти й виправити?
Знайти безкоштовно, і це займає хвилину. Спробуйте виділити слова курсором. Якщо літери виділяються по одній, це справжній текст; якщо весь блок виділяється як одна картинка, текст вдруковано. Потім збільште сторінку до 200-400% і подивіться, що розпливається, і пройдіть розділ екранним читачем, щоб почути, що насправді оголошується. Сканер упіймає частину цього, але рішення «це зображення тексту чи законна графіка» - одна з причин, чому справжній аудит кращий за голе сканування.
Виправлення - рішення на рівні розробки, а не віджет. Перезберіть банер як справжній HTML-текст поверх фонового зображення чи CSS-градієнта, щоб заголовок був справжнім заголовком, оформленим через CSS: вебшрифти дають будь-яку гарнітуру без сплющування літер у пікселі. Де справді графічний матеріал неминучий, дайте йому точний alt-текст і переконайтеся, що контраст витримує перевірку, але вважайте alt-текст мінімумом, а не ліками. Він дає змогу екранному читачеві оголосити повідомлення, але картинка однаково не збільшуватиметься чисто, не переналаштовуватиметься під читача й не перекладатиметься. Оверлей доступності теж не може перетворити пікселі JPG назад на текст: це живе у вашій розмітці й таблиці стилів, тому витримує саме робота на рівні вихідного коду.
Коли внесете зміну, збережіть датовану нотатку про те, що ви замінили з картинки на текст. Цей запис, включений до звіту про відповідність вимогам доступності, вартий набагато більше, ніж значок, якщо скарга колись прийде.
Хочете дізнатися, на яких ваших банерах екранний читач замовкає, раніше за клієнта? Безкоштовний звіт Vayle, приблизно 30 секунд: vayle.art. Він виявляє віджети-оверлеї, показує реальні порушення WCAG і точно каже, що юридично стосується вашої організації в Онтаріо. Без зобов'язань.
Vayle працює віддалено й займається інженерною доступністю сайтів для бізнесу Онтаріо. Загальна інформація, а не юридична консультація.