Перевірено 31.08.2026 · https://www.heise.de/
4 критичний бар’єрn · додатково 3 до перевірки.
Як формується оцінка? (100 стартових балів)
| {n} з {total} зображень без атрибута alt | -18 |
| {n} полів форми без розпізнаваного підпису | -18 |
| {n} посилань без розпізнаваного імені в HTML | -18 |
| {n} кнопок без імені в HTML | -18 |
| У наданому HTML немає заголовка <h1> | -7 |
| {n} дубльованих атрибутів id | -7 |
| {n} правил{nPlural} CSS з, можливо, надто низьким контрастом тексту | -7 |
| Результат | 7 / 100 |
Сприйнятність
{n} з {total} зображень без атрибута alt
Зображення, завантажені через JavaScript, тут не враховуються.
img
Ось що слід зробити: Надайте кожному <img> атрибут alt: короткий опис для змістовних зображень, alt="" для суто декоративних.
{n} полів форми без розпізнаваного підпису
Перевірте, чи є aria-label, встановлений через JavaScript.
input, select, textarea
Ось що слід зробити: Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
{n} правил{nPlural} CSS з, можливо, надто низьким контрастом тексту
Потрібно: 4,5:1 (звичайний) або 3:1 (великий текст). За «припущеного тла сторінки» справжнє тло не вдалося визначити напевно — у разі сумніву перевірте у браузері. Знайдено, зокрема: {examples}
.text-ho-text, .text-yellow-50, .text-heisegrau-50, .text-green-50, .text-red-50
Ось що слід зробити: Затемніть колір тексту або освітліть тло, доки не буде досягнуто відповідного мінімального значення. Ніколи не використовуйте колір як єдину розрізнювальну ознаку.
Керованість
{n} посилань без розпізнаваного імені в HTML
Порожні посилання або лише піктограма/зображення без alt. aria-label, встановлений через JavaScript, тут не розпізнається.
a
Ось що слід зробити: Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
{n} кнопок без імені в HTML
Кнопки без тексту та без aria-label німі для зчитувачів екрана — якщо ім’я не встановлюється через JavaScript.
button
Ось що слід зробити: Додайте текст кнопки або встановіть aria-label.
У наданому HTML немає заголовка <h1>
Кожна сторінка має починатися рівно з одного h1. На сторінках, що будуються через JavaScript, h1 може виникати лише в браузері — тоді перевіряйте у відрендереному DOM.
body
Ось що слід зробити: Вставте змістовний <h1> як перший заголовок (бажано вже на боці сервера).
Надійність
{n} дубльованих атрибутів id
напр. {examples}. Порушує зв’язки label-for та aria.
[id]
Ось що слід зробити: Призначте унікальні id.
Наступні кроки
- {n} з {total} зображень без атрибута alt. Надайте кожному <img> атрибут alt: короткий опис для змістовних зображень, alt="" для суто декоративних.
- {n} полів форми без розпізнаваного підпису. Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
- {n} посилань без розпізнаваного імені в HTML. Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
- {n} кнопок без імені в HTML. Додайте текст кнопки або встановіть aria-label.
- У наданому HTML немає заголовка <h1>. Вставте змістовний <h1> як перший заголовок (бажано вже на боці сервера).
Щотижневе повторне сканування, з рендерингом JS, електронний лист про нові бар’єри — незабаром.
Створити декларацію про доступність →
Метод і межі
31.08.2026 було перевірено HTML, який www.heise.de надає під час першого відвідування без входу, а також до чотирьох пов’язаних файлів CSS з того самого домену. Перевірено: колірний контраст (з CSS), текстові альтернативи, підписи полів форм, назви елементів керування, структуру заголовків, заголовок сторінки та мову сторінки, блокування масштабування, дубльовані id, додатні значення tabindex, орієнтири.
Не перевірено: усе, що виникає через JavaScript, керованість з клавіатури, видимий фокус, порядок фокуса, оголошення зчитувачем екрана, вміст за входом, підсторінки. Автоматична перевірка виявляє приблизно 20–35% порушень WCAG — решта потребує ручної перевірки. Це знімок, а не юридичне рішення.
Віджети-оверлеї (кнопки доступності, що змінюють контраст чи шрифт) не роблять сайт відповідним вимогам — знайдені бар’єри треба усувати у вихідному коді. Чому оверлеї не допомагають