Проверено 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 — остальное требует ручной проверки. Это снимок, а не юридическое решение.
Виджеты-оверлеи (кнопки доступности, меняющие контраст или шрифт) не делают сайт соответствующим требованиям — найденные барьеры нужно устранять в исходном коде. Почему оверлеи не помогают