Проверено на 1.09.2026 г. · https://www.spiegel.de/
1 критична бариера · допълнително 4 за проверка.
Как се получава оценката? (100 начални точки)
| 21 бутона без име в HTML | -18 |
| 1 полета на формуляр без разпознаваем етикет | -7 |
| 3 връзки без разпознаваемо име в HTML | -7 |
| Няма заглавие <h1> в доставения HTML | -7 |
| 5 CSS правилn с вероятно твърде нисък контраст на текста | -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 CSS правилn с вероятно твърде нисък контраст на текста
Необходимо: 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.
Няма заглавие <h1> в доставения HTML
Всяка страница трябва да започва с точно едно h1. При страници, изграждани чрез JavaScript, h1 може да възникне едва в браузъра — тогава провери в рендирания DOM.
body
Ето какво трябва да направиш: Вмъкни смислено <h1> като първо заглавие (по възможност вече от страна на сървъра).
Вече решено правилно
- Текстови алтернативи: няма автоматично разпознаваеми проблеми
- Връзка за прескачане към съдържанието е налична
- Ориентир <main> е наличен
Следващи стъпки
- 21 бутона без име в HTML. Добави текст на бутона или задай aria-label.
- 1 полета на формуляр без разпознаваем етикет. Свържи всяко поле с елемент <label for> или задай aria-label / aria-labelledby. Само placeholder не е достатъчен.
- 3 връзки без разпознаваемо име в HTML. Добави видим текст на връзката или при връзки с икона използвай aria-label, съответно изображение с alt.
- Няма заглавие <h1> в доставения HTML. Вмъкни смислено <h1> като първо заглавие (по възможност вече от страна на сървъра).
- 5 CSS правилn с вероятно твърде нисък контраст на текста. Затъмни цвета на текста или изсветли фона, докато се достигне съответната минимална стойност. Никога не използвай цвета като единствен отличителен признак.
Седмично повторно сканиране, с JS-рендиране, имейл при нови бариери — идва скоро.
Създаване на декларация за достъпност →
Метод & граници
На 1.09.2026 г. беше проверен HTML-ът, който www.spiegel.de доставя при първо извикване без вход, плюс до четири свързани CSS файла от същия домейн. Проверено: цветови контраст (от CSS), текстови алтернативи, етикети на формуляри, имена на елементите за управление, структура на заглавията, заглавие и език на страницата, блокиране на мащабирането, дублирани id, положителни стойности на tabindex, ориентири.
Непроверено: всичко, което възниква чрез JavaScript, оперативността с клавиатура, видимият фокус, редът на фокуса, оповестяването от екранния четец, съдържанието зад вход, подстраниците. Автоматичният тест открива приблизително 20–35 % от нарушенията на WCAG — останалото изисква ръчна проверка. Моментна снимка, не правно решение.