Перейти к содержимомуПерейти к содержимому

🗣️ Простой язык • По состоянию на 27 мая 2026 г. |  ← Обычный язык

Mit der Tab-Taste kann man sich auf der Seite bewegen. Dabei sieht man immer, wo man ist. Die Markierung verschwindet nicht.

Der Fokus-Anzeiger zeigt, auf welchem Teil der Seite man mit der Tastatur ist. Am Anfang ist das oft eine dünne, blaue Linie. Manche Designs nehmen diese Linie weg, weil sie sie nicht schön finden. Dann kann man die Seite nicht mehr mit der Tastatur benutzen.

Es gibt eine Regel, die klare Markierungen verlangt. Die Markierung muss mindestens 2 Mal so dick sein wie ein Punkt auf dem Bildschirm. Es muss ein starker Kontrast zum Hintergrund da sein. Ohne diese Markierung weiß man nicht, wohin man springt. Auch wichtig: Der Mauszeiger braucht keine Markierung, die Tastatur schon.

Wir bieten ein erstes Gespräch an. Wir finden heraus, ob das Thema wichtig für Ihre Seite ist. Weitere Infos: Übersicht über Barrierefreiheit, unsere Leistungen, Förderung, Antworten auf häufige Fragen.

WCAG 2.4.11 · Модуль WCAG

Видимый индикатор фокусировки

Пользователи, использующие вкладки для навигации, всегда знают, где они находятся. Никакого исчезающего контура.

Что это такое?

Что означает "индикатор видимой фокусировки"?

Индикатор фокуса — это видимый маркер, показывающий, какой элемент в данный момент выбран с помощью клавиатуры. По умолчанию в браузере это обычно тонкая синяя рамка. Многие темы удаляют эту рамку („она выглядит некрасиво"), что нарушает навигацию с клавиатуры для тех, кто не использует мышь.

Почему это важно?

Обязательства и выгоды — WCAG 2.4.11.

WCAG 2.4.11 (Внешний вид фокуса) Требуется индикатор фокуса с четким визуальным выделением — толщиной не менее 2 пикселей CSS и коэффициентом контрастности 3:1 по отношению к окружающему пространству. Без видимого фокуса навигация с помощью клавиатуры практически невозможна (вы не знаете, куда вас приведет нажатие клавиши Enter). Также требуется: :focus-visible Разделяет щелчок мыши (контур не требуется) и фокусировку на вкладке (контур требуется) — удобный пользовательский интерфейс.

Наша реализация

Как именно мы это решим.

  • Глобальный стиль фокусировки: 3 пикселя сплошного фирменного цвета + 3 пикселя смещения, радиус скругления углов 6 пикселей — высокая заметность, контрастность AAA.
  • :focus-visible вместо :фокус При щелчке мыши контур не отображается, в отличие от фокусировки на вкладке Tab.
  • Никогда не был глобальным план: отсутствует без замены.
  • Пользовательским компонентам (карусели, пользовательские выпадающие списки) явно присваиваются собственные состояния фокуса.
  • Проверка: Пошаговое руководство по работе с клавиатурой — каждый интерактивный элемент должен быть четко различим в фокусе.
Другие модули WCAG

Соответствующие структурные элементы нашего модульного комплекса

Все модули в обзоре BFSG →

Вам нужен именно этот модуль?

Первичная консультация (15 минут) — мы выясним, насколько она актуальна для вашего сайта.

Запишитесь на первичную консультацию

Дополнительная информация:
Обзор BFSG ·
Обзор производительности ·
Финансирование BAFA ·
Часто задаваемые вопросы

Обычный язык