Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: Aria-hidden='true' darf nicht für den < body> des Dokumentes verwendet werden (WCAG 1.3.1 + 4.1.2)

aria-hidden-body

Stellt sicher, dass aria-hidden="true" nicht am <body>-Element des Dokumentes verwendet wird.

Das bedeutet

Wird aria-hidden="true" am <body> gesetzt, wird die gesamte Seite für Screenreader ausgeblendet. Assistive Technologien sehen keinen zugänglichen Inhalt mehr – Navigation und Kontext gehen verloren.

Auswirkung

Seite wirkt für Nutzerinnen und Nutzer mit Screenreader leer oder unbenutzbar; Fokus- und Lesereihenfolge brechen. Das führt zu Abbrüchen und einem klaren WCAG-Verstoß.

Empfehlung

  • Nie aria-hidden am <body> verwenden.
  • Nur gezielte Bereiche ausblenden (z. B. Hintergrundinhalt bei geöffnetem Dialog).
  • Für Modale: dem Hintergrundbereich (z. B. <main>) temporär aria-hidden="true" (und optional inert) geben; dem Dialog role="dialog" + aria-modal="true" setzen.
  • Nach Schließen Zustände zurücksetzen.

Beispiel

Problematisch

<body aria-hidden="true">
  <main>…Inhalt…</main>
</body>

Besser

<body>
  <main id="page-content" aria-hidden="true">…Inhalt…</main> <!-- z.B. während Modal -->
  <div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
    <h2 id="dlg-title">Hinweis</h2>
    …
  </div>
</body>

Verknüpftes WCAG-Kriterium:
WCAG 1.3.1 - Info und Beziehungen
WCAG 4.1.2 - Name, Rolle, Wert