html-einfach.de

Ressourcen

Snippet-Bibliothek

Von Zuletzt geändert am

Es gibt eine Handvoll Muster, die ich in praktisch jedem Projekt wieder brauche: einen Skip-Link, eine „nur für Screenreader“-Klasse, ein zugänglich beschriftetes Icon. Damit ich sie nicht jedes Mal neu aus dem Kopf schreibe, sammle ich sie hier – kopierfertig und auf das Wesentliche reduziert. Die ausführliche Begründung steht jeweils im verlinkten Artikel; das hier ist die Kurzfassung zum Mitnehmen.

Ein Snippet ist allerdings ein Startpunkt, keine Garantie. Gerade bei ARIA gilt: blind kopieren ist genau der Weg, auf dem schlechte Auszeichnung in die Welt kommt. Ich empfehle, jedes Muster einmal zu verstehen, bevor es ins eigene Projekt wandert.

Native HTML zuerst. Die meisten Snippets hier kommen ohne JavaScript und mit so wenig ARIA wie möglich aus – das ist Absicht. Warum das die robustere Wahl ist, steht unter Die erste Regel von ARIA.

Nur-für-Screenreader-Klasse (.visually-hidden)

Diese kleine Utility-Klasse fehlt bei mir in keinem Projekt: Sie blendet Text visuell aus, lässt ihn aber für Screenreader lesbar – ideal für zusätzliche Beschriftungen. Wichtig ist, dafür nicht display: none oder visibility: hidden zu nehmen, denn das nimmt den Text auch dem Screenreader.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

Der erste fokussierbare Link der Seite, normalerweise unsichtbar, bei Tastaturfokus sichtbar. Er springt direkt zum Hauptinhalt und erspart Tastatur-Nutzenden, sich durch die komplette Navigation zu tabben. Diese Website nutzt genau dieses Muster.

<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<!-- … Header / Navigation … -->
<main id="inhalt" tabindex="-1">…</main>
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
}

Details und Stolperfallen unter Skip-Links.

Icon-Button mit zugänglichem Namen

Ein Button, der nur ein Icon zeigt, braucht trotzdem einen Namen. Das SVG bekommt aria-hidden, der eigentliche Name kommt als visuell verstecktes <span>.

<button type="button" class="icon-button">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M3 6h18M3 12h18M3 18h18" fill="none" stroke="currentColor"
          stroke-width="2" stroke-linecap="round" />
  </svg>
  <span class="visually-hidden">Menü öffnen</span>
</button>

Mehr dazu unter Icons & SVGs und Buttons vs. Links.

Akkordeon ohne JavaScript (<details>)

Für einfaches Auf- und Zuklappen braucht es kein Skript und kein ARIA – <details> und <summary> bringen Tastaturbedienung und Zustand von Haus aus mit. Mein Standardgriff, wann immer es passt.

<details>
  <summary>Versand &amp; Lieferzeit</summary>
  <p>Wir liefern innerhalb von 2–4 Werktagen innerhalb Deutschlands.</p>
</details>

Wann das reicht und wann nicht: Akkordeons.

Dialog mit <dialog>

Das native <dialog> mit showModal() bringt Fokus-Falle, Schließen per Esc und einen Backdrop von selbst mit – Dinge, die man sonst mühsam nachbaut. Das <form method="dialog"> schließt den Dialog beim Absenden.

<button type="button" data-dialog-open="hinweis">Hinweis öffnen</button>

<dialog id="hinweis">
  <form method="dialog">
    <h2>Cookies</h2>
    <p>Diese Seite nutzt nur technisch notwendige Cookies.</p>
    <button>Verstanden</button>
  </form>
</dialog>
document.querySelectorAll('[data-dialog-open]').forEach((btn) => {
  btn.addEventListener('click', () => {
    document.getElementById(btn.dataset.dialogOpen).showModal();
  });
});

Hintergrund und Fallstricke: Dialoge / Modals.

Eingabefeld mit Label und Fehlermeldung

Jedes Feld bekommt ein echtes <label for>. Die Fehlermeldung wird über aria-describedby verknüpft, damit ein Screenreader sie zum Feld vorliest. aria-invalid setze ich erst, wenn wirklich ein Fehler vorliegt – nicht vorsorglich.

<label for="email">E-Mail-Adresse</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  aria-describedby="email-fehler"
  aria-invalid="true"
/>
<p id="email-fehler" class="fehler">
  Bitte gib eine gültige E-Mail-Adresse ein (z. B. name@beispiel.de).
</p>

Mehr unter Labels & Beschriftungen und Fehlermeldungen barrierefrei.

Eine Breadcrumb ist eine Liste in einem benannten <nav>. Die aktuelle Seite wird mit aria-current="page" markiert. Genau so ist die Breadcrumb dieser Website aufgebaut.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/index.html">Start</a></li>
    <li><a href="/ressourcen.html">Ressourcen</a></li>
    <li><a href="/ressourcen/snippet-bibliothek.html" aria-current="page"
      >Snippet-Bibliothek</a></li>
  </ol>
</nav>

Warum <ol> und warum aria-current: Breadcrumbs.

Statusmeldung (Live-Region)

Wenn sich nach einer Aktion etwas ändert, ohne dass der Fokus springt – „gespeichert“, „3 Treffer“ –, gehört die Meldung in eine Live-Region. Wichtig: Der Container muss schon im DOM stehen, bevor man Text hineinschreibt.

<p id="status" role="status" aria-live="polite" class="visually-hidden"></p>
document.getElementById('status').textContent = 'Formular gespeichert.';

Wann polite, wann assertive: Live-Regionen.

Fazit

Diese Sammlung wächst mit der Praxis – sie deckt die Muster ab, die mir am häufigsten unterkommen. Wer lieber zuerst das Warum versteht, folgt den Links in die barrierefreien Komponenten. Zum schnellen Nachschlagen passen außerdem die Cheat-Sheets & Checklisten, das Glossar und die kommentierte Tool-Sammlung.