Перевірено 24.09.2026 · https://www.heise.de/
5 критичний бар’єрn · додатково 2 до перевірки.
Від попереднього сканування: без змін.
Як формується оцінка? (100 стартових балів)
| 40 з 517 зображень без атрибута alt | -18 |
| 4 полів форми без розпізнаваного підпису | -18 |
| 16 посилань без розпізнаваного імені в HTML | -18 |
| 6 кнопок без імені в HTML | -18 |
| 5 правилn CSS з, можливо, надто низьким контрастом тексту | -18 |
| У наданому HTML немає заголовка <h1> | -7 |
| 6 дубльованих атрибутів id | -7 |
| Результат | 0 / 100 |
Сприйнятність
40 з 517 зображень без атрибута alt
Зображення, завантажені через JavaScript, тут не враховуються.
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3377" height="1898"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="1920" height="1079"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="3200" height="1798"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2" width="300" height="250">
Ось що слід зробити: Надайте кожному <img> атрибут alt: короткий опис для змістовних зображень, alt="" для суто декоративних.
4 полів форми без розпізнаваного підпису
Перевірте, чи є aria-label, встановлений через JavaScript.
<input type="text" name="q" placeholder="Suchen"><input type="text" name="q" placeholder="Suchen"><select name="in"><input type="text" name="fs" placeholder="Im Preisvergleich suchen">
Ось що слід зробити: Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
5 правилn CSS з, можливо, надто низьким контрастом тексту
Потрібно: 4,5:1 (звичайний) або 3:1 (великий текст). За «припущеного тла сторінки» справжнє тло не вдалося визначити напевно — у разі сумніву перевірте у браузері. Знайдено, зокрема: `.dark a-gift-link dialog`: #e0e0e0 auf #fff (Vorfahren-Hintergrund) = 1.32:1 · `.a-android-native-app-prompt__close-banner`: #323232 auf rgba(0,0,0,0) = 1.64:1 · `a-opt-in[is-active] .opt-in__footnote`: #959595 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 3.00:1 · `.a-android-native-app-prompt__load-app`: #fff auf #27a209 = 3.36:1 · `a-topic .topic-label`: #fff auf #ed3725 = 4.06:1
.dark a-gift-link dialog, .a-android-native-app-prompt__close-banner, a-opt-in[is-active] .opt-in__footnote, .a-android-native-app-prompt__load-app, a-topic .topic-label
Ось що слід зробити: Затемніть колір тексту або освітліть тло, доки не буде досягнуто відповідного мінімального значення. Ніколи не використовуйте колір як єдину розрізнювальну ознаку.
Керованість
16 посилань без розпізнаваного імені в HTML
Порожні посилання або лише піктограма/зображення без alt. aria-label, встановлений через JavaScript, тут не розпізнається.
<a-click-performance><a name="topnavi.ho.magazine-nav.ct" class="hover:bg-brand dark:hover:<a name="topnavi.ho.magazine-nav.ix" class="hover:bg-brand-alternative<a name="topnavi.ho.magazine-nav.foto" class="hover:bg-brand dark:hove
Ось що слід зробити: Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
6 кнопок без імені в HTML
Кнопки без тексту та без aria-label німі для зчитувачів екрана — якщо ім’я не встановлюється через JavaScript.
<button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text"><button class="scroll-left text-ho-text"><button class="scroll-right text-ho-text">
Ось що слід зробити: Додайте текст кнопки або встановіть aria-label.
У наданому HTML немає заголовка <h1>
Кожна сторінка має починатися рівно з одного h1. На сторінках, що будуються через JavaScript, h1 може виникати лише в браузері — тоді перевіряйте у відрендереному DOM.
body
Ось що слід зробити: Вставте змістовний <h1> як перший заголовок (бажано вже на боці сервера).
Надійність
6 дубльованих атрибутів id
напр. heisetopnavi_search, HEI_M_Incontent-2-label, HEI_M_Incontent-2, circle. Порушує зв’язки label-for та aria.
[id]
Ось що слід зробити: Призначте унікальні id.
Наступні кроки
- 40 з 517 зображень без атрибута alt. Надайте кожному <img> атрибут alt: короткий опис для змістовних зображень, alt="" для суто декоративних.
- 4 полів форми без розпізнаваного підпису. Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
- 16 посилань без розпізнаваного імені в HTML. Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
- 6 кнопок без імені в HTML. Додайте текст кнопки або встановіть aria-label.
- 5 правилn CSS з, можливо, надто низьким контрастом тексту. Затемніть колір тексту або освітліть тло, доки не буде досягнуто відповідного мінімального значення. Ніколи не використовуйте колір як єдину розрізнювальну ознаку.
Щотижневе повторне сканування, з рендерингом JS, електронний лист про нові бар’єри — незабаром.
Створити декларацію про доступність →
Метод і межі
24.09.2026 було перевірено HTML, який www.heise.de надає під час першого відвідування без входу, а також до чотирьох пов’язаних файлів CSS з того самого домену. Перевірено: колірний контраст (з CSS), текстові альтернативи, підписи полів форм, назви елементів керування, структуру заголовків, заголовок сторінки та мову сторінки, блокування масштабування, дубльовані id, додатні значення tabindex, орієнтири.
Не перевірено: усе, що виникає через JavaScript, керованість з клавіатури, видимий фокус, порядок фокуса, оголошення зчитувачем екрана, вміст за входом, підсторінки. Автоматична перевірка виявляє приблизно 20–35% порушень WCAG — решта потребує ручної перевірки. Це знімок, а не юридичне рішення.
Віджети-оверлеї (кнопки доступності, що змінюють контраст чи шрифт) не роблять сайт відповідним вимогам — знайдені бар’єри треба усувати у вихідному коді. Чому оверлеї не допомагають