WCAG 2.0, 2.4.1, A

Blöcke umgehen

  • WCAG: 2.0
  • Stufe: A
  • Thema: Tastaturbedienbarkeit

Sich auf jeder Seite wiederholende Elemente (etwa der Kopfbereich) müssen übersprungen werden können (etwa mit einem Link "Zum Inhalt springen"). Dies ermöglicht die sofortige Interaktion mit dem Inhalt der Seite, ohne dass zuvor langwierig dahin navigiert werden muss.

Verstehen

Verschiedene Benutzergruppen sind auf Bedienungshilfen angewiesen zur Navigation auf Webseiten mit umfangreichem Inhalt. Eine Tastaturnutzerin etwa benötigt am Anfang jeder Seite einen Sprunglink «Zum Inhalt springen», um nicht nach jedem Neuladen durch die ganzen Elemente davor (Kopfbereich, Navigation, Breadcrumbs, usw.) tabben zu müssen. Dieser Link kann visuell versteckt und nur bei Fokus eingeblendet werden.

Techniken, um das Überspringen solcher Elemente für bestimmte assistierende Technologien weiter zu vereinfachen, sind gut strukturierte Überschriften (siehe 1.3.1a) sowie accesskey-Attribute. Sprunglinks und Accesskeys werden idealerweise miteinander kombiniert.

Tipp: Ein einzelner Sprunglink zum Inhalt reicht zur Erfüllung dieses Erfolgskriteriums.

Verantwortlichkeiten

  • Das Designteam definiert ein visuelles Design für Sprunglinks.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.

WCAG-Text

Es gibt einen Mechanismus, um Inhaltsblöcke zu umgehen, die auf verschiedenen Webseiten wiederholt werden.

Code-Beispiel

<style>
  /* Schiebt die Links aus dem sichtbaren Bereich des Bildschirms, ohne sie tatsächlich zu entfernen */
  .skip-links a {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Setzt bei Fokus die Position der Links zurück */
  .skip-links a:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
  }
</style>

<body>
  <ul class="skip-links">
   <li><a href="#menu" accesskey="1">Navigation</a></li><!-- Link innerhalb Seite -->
   <li><a href="#content" accesskey="2">Inhalt</a></li><!-- Link innerhalb Seite -->
   <li><a href="contact.html" accesskey="5">Suche</a></li><!-- Link zu einer eigenen Seite -->
  </ul>

  <nav id="menu"></nav>
    <!-- Navigation -->
  </nav>
  <main id="content">
    <!-- Inhalt -->
  </main>
</body>