Перевірено 24.09.2026 · https://www.spiegel.de/
1 критичний бар’єр · додатково 4 до перевірки.
Від попереднього сканування: без змін.
Як формується оцінка? (100 стартових балів)
| 21 кнопок без імені в HTML | -18 |
| 1 полів форми без розпізнаваного підпису | -7 |
| 3 посилань без розпізнаваного імені в HTML | -7 |
| У наданому HTML немає заголовка <h1> | -7 |
| 5 правилn CSS з, можливо, надто низьким контрастом тексту | -7 |
| Результат | 54 / 100 |
Сприйнятність
1 полів форми без розпізнаваного підпису
Перевірте, чи є aria-label, встановлений через JavaScript.
<input name="suchbegriff" id="search-input-field" placeholder="Seite durchsuchen ...">
Ось що слід зробити: Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
5 правилn CSS з, можливо, надто низьким контрастом тексту
Потрібно: 4,5:1 (звичайний) або 3:1 (великий текст). За «припущеного тла сторінки» справжнє тло не вдалося визначити напевно — у разі сумніву перевірте у браузері. Знайдено, зокрема: `.text-shade-base`: #989694 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 2.95:1 · `.debug.svelte-1x5iokp`: red auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.00:1 · `.text-effi-primary-base`: #e64415 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-shade-dark`: #807e7c auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.04:1 · `.text-elf-primary-base`: #3c8771 auf #ffffff (Standard) (Seitenhintergrund, angenommen) = 4.29:1
.text-shade-base, .debug.svelte-1x5iokp, .text-effi-primary-base, .text-shade-dark, .text-elf-primary-base
Ось що слід зробити: Затемніть колір тексту або освітліть тло, доки не буде досягнуто відповідного мінімального значення. Ніколи не використовуйте колір як єдину розрізнювальну ознаку.
Керованість
21 кнопок без імені в HTML
Кнопки без тексту та без aria-label німі для зчитувачів екрана — якщо ім’я не встановлюється через JavaScript.
<button class="bg-white flex items-center justify-around bg-white d><button class="bg-white flex items-center justify-around bg-white d><button><button class="flex items-center justify-center my-auto rounded-cir>
Ось що слід зробити: Додайте текст кнопки або встановіть aria-label.
3 посилань без розпізнаваного імені в HTML
Порожні посилання або лише піктограма/зображення без alt. aria-label, встановлений через JavaScript, тут не розпізнається.
<a target="_self" class="block svelte-1x5iokp"><a target="_self" class="flex flex-col text-black dark:text-shade-ligh<a target="_self" class="text-black dark:text-shade-lightest block">
Ось що слід зробити: Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
У наданому HTML немає заголовка <h1>
Кожна сторінка має починатися рівно з одного h1. На сторінках, що будуються через JavaScript, h1 може виникати лише в браузері — тоді перевіряйте у відрендереному DOM.
body
Ось що слід зробити: Вставте змістовний <h1> як перший заголовок (бажано вже на боці сервера).
Уже вирішено правильно
- Текстові альтернативи: немає проблем, які можна розпізнати автоматично
- Є посилання для переходу до вмісту
- Є орієнтир <main>
Наступні кроки
- 21 кнопок без імені в HTML. Додайте текст кнопки або встановіть aria-label.
- 1 полів форми без розпізнаваного підпису. Пов’яжіть кожне поле з елементом <label for> або встановіть aria-label / aria-labelledby. Самого placeholder недостатньо.
- 3 посилань без розпізнаваного імені в HTML. Додайте видимий текст посилання або використайте aria-label чи зображення з alt для піктограмних посилань.
- У наданому HTML немає заголовка <h1>. Вставте змістовний <h1> як перший заголовок (бажано вже на боці сервера).
- 5 правилn CSS з, можливо, надто низьким контрастом тексту. Затемніть колір тексту або освітліть тло, доки не буде досягнуто відповідного мінімального значення. Ніколи не використовуйте колір як єдину розрізнювальну ознаку.
Щотижневе повторне сканування, з рендерингом JS, електронний лист про нові бар’єри — незабаром.
Створити декларацію про доступність →
Метод і межі
24.09.2026 було перевірено HTML, який www.spiegel.de надає під час першого відвідування без входу, а також до чотирьох пов’язаних файлів CSS з того самого домену. Перевірено: колірний контраст (з CSS), текстові альтернативи, підписи полів форм, назви елементів керування, структуру заголовків, заголовок сторінки та мову сторінки, блокування масштабування, дубльовані id, додатні значення tabindex, орієнтири.
Не перевірено: усе, що виникає через JavaScript, керованість з клавіатури, видимий фокус, порядок фокуса, оголошення зчитувачем екрана, вміст за входом, підсторінки. Автоматична перевірка виявляє приблизно 20–35% порушень WCAG — решта потребує ручної перевірки. Це знімок, а не юридичне рішення.
Віджети-оверлеї (кнопки доступності, що змінюють контраст чи шрифт) не роблять сайт відповідним вимогам — знайдені бар’єри треба усувати у вихідному коді. Чому оверлеї не допомагають