5 хв читанняВідповідність

Доступність QR-кодів: WCAG, контрастність і альтернативи

QR-код - це зображення без текстової альтернативи та ціль, до якої ніхто не може перейти клавішею Tab. Чого вимагають правила доступності і як друкований резервний варіант вирішує більшість проблем.

Sasha Ehrlich
Compliance · EU residency
QR-код на постері з надрукованим під ним коротким URL, позначеним як доступна альтернатива для людей, які не можуть його сканувати

QR-код - це зображення посилання. Щоб ним скористатися, людина повинна знати, що він тут є, знайти його в просторі, навести камеру і триматися нерухомо. Кожен, хто не може виконати ці чотири дії, взагалі не має шляху до інформації, тому кожна серйозна настанова з доступності розглядає код як один із шляхів, а не єдиний.

Зобов'язання чітко розділяються. На екрані код - це зображення, і до нього безпосередньо застосовуються Настанови з забезпечення доступності веб-контенту (WCAG). У друкованому вигляді жодна настанова не сягає паперу, і відповідальність переходить на те, що ви розміщуєте поруч із кодом. В обох випадках саме сторінка призначення є місцем, де насправді зосереджений основний юридичний ризик. Про те, що збирає сканування, коли воно спрацьовує, читайте у статті QR-коди та GDPR - вона розкриває аспект даних того самого квадрата.

Три бар'єри, а не один

Команди часто виправляють видимий бар'єр і залишають інші два без уваги.

Знайти код. Надрукований код заявляє про себе лише візуально. Незряча людина не знає, що на постері є код, що табличка на столі його містить чи що лист включає такий код, - якщо про це не сказано текстом. Саме тому напис «скануйте код» дрібним шрифтом під символом сам по собі нічого не вирішує.

Відсканувати код. Наведення на код потребує придатного центрального зору та відносно твердих рук. Слабкий зір, тремор, обмежене хапання та користувач інвалідного візка перед кодом, розміщеним на висоті людського зросту, - це окремі проблеми з однаковим результатом. Код за склом або над прилавком додає дистанцію, яку має враховувати арифметика розміру.

Скористатися тим, що відкривається. Сторінка за кодом - це звичайна вебсторінка, і саме на ній зосереджені обов'язкові до виконання вимоги. Код, що сканується, але веде на PDF-меню без текстового шару, лише перемістив бар'єр, а не усунув його.

Чого вимагає WCAG

Чотири положення трапляються знову й знову, і жодне з них не є обтяжливим.

Код, показаний як зображення, потребує текстової альтернативи, що описує пункт призначення, - згідно з правилом про нетекстовий контент. Атрибут alt «QR-код» - це змарнована можливість; «QR-код, що веде до форми запису на прийом» - це вже інформація. Якщо URL також надруковано текстом на тій самій сторінці, код цілком можна позначити як декоративний.

Контрастність - це те, що дизайнери порушують найчастіше. Вимога щодо контрастності нетекстового вмісту встановлює мінімум 3:1 для частин графіки, необхідних для її розуміння, що для QR-коду означає модулі відносно фону. Фотографічні фони, поєднання брендових кольорів із низькою контрастністю та інвертовані візерунки не проходять ані настанову, ані - часто - сканер. Дизайн брендованих QR-кодів розповідає, наскільки далеко можна зайти зі стилізацією, перш ніж візерунок перестане розпізнаватися.

Мета посилання також має значення. Коли код розміщено поруч із посиланням, видимий текст повинен повідомляти, куди він веде, і саме це вимагає положення про мету посилання в контексті. «Натисніть тут» не проходить перевірку з тієї ж причини, що й непідписаний код.

І тиха зона - вільне поле навколо візерунка - є питанням доступності не менше, ніж питанням друку. Обрізання цього поля заради макета ускладнює зчитування коду для всіх і робить його неможливим для деяких.

Чотири бар'єри доступності, створені QR-кодом, кого кожен із них стосується та як їх усунути

Де діє Європейський акт про доступність

Директива (ЄС) 2019/882 застосовується з 28 червня 2025 року, і вона змінює розрахунок для приватних організацій, які раніше вважали доступність турботою виключно державного сектору.

Три моменти визначають, чи стосується вона вас. Вона охоплює визначені продукти та орієнтовані на споживача послуги, включно з електронною комерцією, споживчими банківськими послугами, пасажирським транспортом та електронними книгами. Вона стосується самої послуги, а це означає, що сторінка, яку відкриває код, підпадає під дію, навіть якщо надрукований квадрат - ні. І вона транспонується на національному рівні, тож орган нагляду, штрафи та деталі винятку для мікропідприємств у сфері послуг залежать від держави-члена, у якій ви продаєте.

Практичний висновок для маркетингової команди: якщо сканування веде до покупки, бронювання чи банківської взаємодії зі споживачами в ЄС, розглядайте сторінку призначення як регульовану поверхню і тестуйте її відповідно. Державні органи вже підпадають під дію попередніх правил вебдоступності та стандарту EN 301 549 - цю територію детальніше висвітлює стаття сервіси скорочення посилань для державного сектору.

Я б радше бачив команду, що виправила сторінку призначення та надрукувала URL, ніж таку, що витратила тиждень на естетику коду. Саме перші дві речі цікавлять орган нагляду.

Надрукований короткий URL - це і є функція доступності

Це найцінніша зміна з усього списку, і коштує вона лише один рядок тексту.

Короткий URL, надрукований під кодом, - це та сама текстова альтернатива, яку друк інакше не може передати. Він слугує людині, що користується екранним збільшенням і може прочитати текст, але не може навести камеру. Він слугує тому, у чийого телефону не працює додаток камери, тому, хто користується позиченим пристроєм, і тому, хто хоче відкрити сторінку пізніше на ноутбуці. Він також слугує зрячій більшості в конкретному випадку, коли код не сканується через освітлення чи глянець.

Зробіть його придатним для переписування:

  1. Тримайте шлях у межах кількох символів, щоб його можна було утримати в пам'яті між прочитанням і введенням.
  2. Використовуйте лише нижній регістр і уникайте пар символів, які неоднозначно виглядають у друку.
  3. Надавайте перевагу слову, а не випадковому рядку. Кастомна кінцівка посилання, що читається як слово, переживе погану ксерокопію, а випадкова - ні.
  4. Встановіть такий розмір шрифту, який можна прочитати з відстані, з якої сканують код, а не найменший, який допускає макет.
  5. Розмістіть попереду власний домен. Впізнаваний домен - це сигнал довіри для всіх, і стаття що таке брендоване посилання пояснює, чому це має більше значення на друкованих матеріалах, ніж на екрані.

Потрібно генерувати коди з читабельним друкованим резервним варіантом для кожного? Функції QR-кодів Elido створюють код і коротке посилання разом, тож надрукована альтернатива завжди відповідає коду поруч із нею.

Чотирикроковий чекліст для доступного розміщення QR-коду: друкована альтернатива, контрастність, підписи та тестування сторінки призначення

Протестуйте це очима іншої людини

П'ять перевірок, і перші три займуть десять хвилин.

Прогоніть сторінку призначення через скрінрідер. Не інструмент-чекліст, а справжній скрінрідер - і слухайте, чи доступна та підписана основна дія. Настанови США щодо Section 508 про впровадження QR-кодів - компактний довідник щодо того, на що звертати увагу.

Вимірюйте контрастність надрукованого зразка, а не файлу. Чорнило на непокритому папері втрачає контрастність, яку прикрашає попередній перегляд на екрані.

Скануйте код із позиції, яку насправді займе реальна людина: сидячи, на фактичній висоті кріплення, за реального освітлення приміщення. Код на висоті 1,6 метра - зовсім інший об'єкт для користувача інвалідного візка, ніж для дизайнера, який його розмістив.

Спробуйте набрати надрукований URL вручну, на клавіатурі телефона, не дивлячись на код. Якщо потрібно три спроби, слаг обрано невдало.

Потім перевірте сторінку за кодом за тим самим стандартом, що й ваш основний сайт. Саме там живе зобов'язання, і саме цю перевірку пропускають найчастіше.

Читайте серію основних матеріалів

Ця стаття входить у кластер відповідності (compliance). GDPR для сервісів скорочення посилань - основний матеріал для частини цієї теми, що стосується захисту даних, а QR-коди та GDPR розповідає, що насправді збирає сканування.

Пов'язане в блозі

Поширені запитання

Чи доступні QR-коди?

Самі по собі - ні. Сканування вимагає зору, щоб знайти код, твердої руки, щоб навести камеру, і пристрою з камерою. Жодну з цих умов не можна вважати гарантованою, тому рекомендації з доступності розглядають QR-код як додатковий шлях до інформації, а не єдиний. Надрукуйте поруч короткий URL - і більшість бар'єру зникає.

Чи потрібен QR-коду альтернативний текст?

Так, коли він з'являється як зображення на вебсторінці або в документі. Описуйте, куди він веде, а не що це таке: користувач скрінрідера нічого не отримає з повідомлення, що тут є QR-код, але отримає все, дізнавшись, що код відкриває сторінку бронювання. На друкованих матеріалах альтернативного тексту немає, тож текстовою альтернативою стає сам URL, надрукований читабельним шрифтом.

Яка контрастність потрібна QR-коду?

Щонайменше 3:1 між темними модулями та світлим фоном за правилом WCAG про контрастність нетекстового вмісту, а на практиці - більше, оскільки сканерам потрібен запас, якого мінімальний поріг відповідності не гарантує. Тримайте темне на світлому, уникайте фотографічних фонів і ніколи не інвертуйте візерунок заради дизайнерського ефекту.

Чи поширюється Європейський акт про доступність на QR-коди?

Він поширюється на сервіс, до якого веде код. Директива (ЄС) 2019/882 охоплює орієнтовані на споживача послуги, такі як електронна комерція, банківські послуги, транспорт та електронні книги, і застосовується з 28 червня 2025 року. Якщо код відкриває меню, квиток чи оформлення замовлення, зобов'язання щодо доступності стосується саме цієї сторінки, а не надрукованого квадрата.

Яким має бути друкований резервний варіант?

Коротким, у нижньому регістрі та однозначним при прочитанні вголос чи переписуванні від руки. Уникайте символів, які легко сплутати в друкованому вигляді, тримайте шлях у межах кількох символів і зробіть шрифт достатньо великим, щоб його міг переписати хтось, хто користується збільшенням. Тут допомагає брендований короткий домен, бо читач одразу розуміє, куди саме він збирається перейти.

Чи є NFC хорошою альтернативою QR-коду?

Це радше корисне доповнення, ніж заміна. Дотик повністю усуває проблему наведення, що допомагає людям зі слабким зором або обмеженою дрібною моторикою, але потребує сумісного телефону та фізичної мітки. Найінклюзивніша комбінація на друкованій поверхні - це код, мітка, якщо дозволяє бюджет, і надрукований URL під обома.

Спробуйте Elido

Вставте URL - отримайте коротке посилання

Без реєстрації. Посилання живе 30 днів. Зареєструйтесь, щоб зберегти назавжди.

Безкоштовно, без реєстрації · 2 на день

Спробуйте Elido

URL-скорочувач із хостингом у ЄС: власні домени, глибока аналітика, відкритий API. Безкоштовний тариф - без кредитної картки.

Теги
qr code accessibility
wcag
european accessibility act
alt text
non-text contrast
short url fallback

Читати далі