Komponenten-Baukasten

Vorschau

Code

HTML

<button type="button" class="bk-btn" data-dialog-open="dialog-nativ">
  Termin absagen
</button>

<dialog id="dialog-nativ" class="bk-dialog" aria-labelledby="dialog-nativ-titel">
  <p class="bk-dialog-titel" id="dialog-nativ-titel">Termin wirklich absagen?</p>
  <p>Die Absage lässt sich nicht rückgängig machen.</p>
  <div class="bk-dialog-aktionen">
    <button type="button" class="bk-btn bk-btn-quiet" data-dialog-close>Zurück</button>
    <button type="button" class="bk-btn" data-dialog-close>Absagen</button>
  </div>
</dialog>

CSS

.bk-dialog {
  max-width: 26rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #dcd8d0;
  border-radius: 0.75rem;
}
.bk-dialog::backdrop {
  background: rgb(27 31 39 / 0.55);
}
.bk-dialog-aktionen {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

JavaScript

const dialog = document.getElementById('dialog-nativ');

document
  .querySelector('[data-dialog-open="dialog-nativ"]')
  .addEventListener('click', () => dialog.showModal());

dialog.querySelectorAll('[data-dialog-close]').forEach((button) => {
  button.addEventListener('click', () => dialog.close());
});

Testprotokoll

1. Tab bis zum Auslöser „Termin absagen“ – er bekommt einen sichtbaren Fokusrahmen.
2. Enter öffnet den Dialog. Der Fokus springt in den Dialog, ohne dass du dich darum kümmerst.
3. Tab wandert nur zwischen „Zurück“ und „Absagen“ – der Browser legt alles dahinter still.
4. Esc schließt den Dialog. Dafür steht keine Zeile in deinem Code.
5. Der Fokus liegt wieder auf „Termin absagen“ – genau dort, wo du losgegangen bist.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.1.2 Keine Tastaturfalle
• Vertiefung Dialoge und Modals

Vorschau

Code

HTML

<button type="button" class="bk-btn" data-aria-open>Termin absagen</button>

<div id="dialog-aria" class="bk-dialog bk-dialog-aria" role="dialog" aria-modal="true"
     aria-labelledby="dialog-aria-titel" hidden>
  <p class="bk-dialog-titel" id="dialog-aria-titel">Termin wirklich absagen?</p>
  <p>Die Absage lässt sich nicht rückgängig machen.</p>
  <div class="bk-dialog-aktionen">
    <button type="button" class="bk-btn bk-btn-quiet" data-aria-close>Zurück</button>
    <button type="button" class="bk-btn" data-aria-close>Absagen</button>
  </div>
</div>

CSS

.bk-dialog-aria[hidden] {
  display: none;
}
.bk-dialog-aria {
  position: relative;
  max-width: 26rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #dcd8d0;
  border-radius: 0.75rem;
}

JavaScript

const box = document.getElementById('dialog-aria');
const oeffner = document.querySelector('[data-aria-open]');
let zuletztFokussiert = null;

function fokussierbare() {
  return box.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
}

function oeffnen() {
  zuletztFokussiert = document.activeElement;
  box.hidden = false;
  fokussierbare()[0].focus();          // 1. Fokus hinein
  document.addEventListener('keydown', taste);
}

function schliessen() {
  box.hidden = true;
  document.removeEventListener('keydown', taste);
  if (zuletztFokussiert) zuletztFokussiert.focus();  // 4. Fokus zurück
}

function taste(event) {
  if (event.key === 'Escape') return schliessen();   // 3. Esc selbst
  if (event.key !== 'Tab') return;
  const liste = fokussierbare();
  const erster = liste[0];
  const letzter = liste[liste.length - 1];
  if (event.shiftKey && document.activeElement === erster) {
    event.preventDefault();
    letzter.focus();                  // 2. Fokusfalle selbst
  } else if (!event.shiftKey && document.activeElement === letzter) {
    event.preventDefault();
    erster.focus();
  }
}

oeffner.addEventListener('click', oeffnen);
box.querySelectorAll('[data-aria-close]').forEach((b) => b.addEventListener('click', schliessen));

Testprotokoll

1. Tab bis zum Auslöser „Termin absagen“.
2. Enter öffnet. Der Fokus springt nur dann hinein, wenn dein Code ihn setzt – Zeile 12.
3. Tab kreist zwischen „Zurück“ und „Absagen“, weil die Fokusfalle in Zeile 27 greift.
4. Der Hintergrund ist nicht inertisiert: Ein Screenreader kann im virtuellen Modus weiter darin lesen.
5. Esc schließt – aber nur, weil Zeile 24 es abfängt.
6. Der Fokus kehrt zum Auslöser zurück, weil Zeile 20 ihn zurückgibt.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.1.2 Keine Tastaturfalle
• Vertiefung Dialoge und Modals

Vorschau

Code

HTML

<div class="bk-akkordeon">
  <details class="bk-panel" name="akk-nativ">
    <summary>Wie lange dauert eine Prüfung?</summary>
    <p>Für eine Website mit fünf Seitentypen rechne mit zwei bis drei Tagen.</p>
  </details>
  <details class="bk-panel" name="akk-nativ">
    <summary>Brauche ich dafür einen Screenreader?</summary>
    <p>Für die Hälfte der Prüfpunkte reichen Tastatur und Browser.</p>
  </details>
</div>

CSS

.bk-panel {
  border: 1px solid #ebe8e2;
  border-radius: 0.5rem;
  background: #fff;
}
.bk-panel + .bk-panel {
  margin-top: 0.5rem;
}
.bk-panel > summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.bk-panel > p {
  margin: 0;
  padding: 0 1rem 1rem;
}

Kein JavaScript nötig. Diese Variante funktioniert allein mit HTML und CSS – das ist ihr eigentliches Argument.

Testprotokoll

1. Tab bis zur ersten Frage – die Zusammenfassung ist von sich aus fokussierbar.
2. Enter oder Leertaste klappt auf. Der Zustand steht im DOM als open-Attribut.
3. Tab führt in den geöffneten Inhalt, danach zur nächsten Frage.
4. Das Attribut name="akk-nativ" sorgt dafür, dass immer nur ein Bereich offen ist – ohne eine Zeile JavaScript.
5. Enter auf derselben Zusammenfassung klappt wieder zu.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Akkordeons

Vorschau

Code

HTML

<div class="bk-akkordeon">
  <div class="bk-panel">
    <button type="button" class="bk-akk-btn"
            aria-expanded="false" aria-controls="akk-aria-1">
      Wie lange dauert eine Prüfung?
    </button>
    <div class="bk-akk-inhalt" id="akk-aria-1" hidden>
      <p>Für eine Website mit fünf Seitentypen rechne mit zwei bis drei Tagen.</p>
    </div>
  </div>
  <div class="bk-panel">
    <button type="button" class="bk-akk-btn"
            aria-expanded="false" aria-controls="akk-aria-2">
      Brauche ich dafür einen Screenreader?
    </button>
    <div class="bk-akk-inhalt" id="akk-aria-2" hidden>
      <p>Für die Hälfte der Prüfpunkte reichen Tastatur und Browser.</p>
    </div>
  </div>
</div>

CSS

.bk-akk-btn {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.bk-akk-btn::after {
  content: "+";
}
.bk-akk-btn[aria-expanded="true"]::after {
  content: "−";
}
.bk-akk-inhalt > p {
  margin: 0;
  padding: 0 1rem 1rem;
}

JavaScript

document.querySelectorAll('.bk-akk-btn').forEach((button) => {
  button.addEventListener('click', () => {
    const offen = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!offen));
    document.getElementById(button.getAttribute('aria-controls')).hidden = offen;
  });
});

Testprotokoll

1. Tab bis zur ersten Frage – der Button ist fokussierbar, weil es ein echter Button ist.
2. Der Screenreader sagt „zugeklappt“, weil aria-expanded="false" gesetzt ist.
3. Enter oder Leertaste klappt auf, aria-expanded springt auf true – das ist die Ansage „aufgeklappt“.
4. Der Inhalt verliert sein hidden-Attribut und ist erst dadurch für alle erreichbar.
5. Ohne die Zeile mit setAttribute bliebe es beim alten Zustand: sichtbar offen, angesagt zugeklappt.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Akkordeons

Vorschau

Code

HTML

<div class="bk-tabs" data-tabs="auto">
  <div class="bk-tablist" role="tablist" aria-label="Prüfwege">
    <button type="button" role="tab" id="tab-auto-1" aria-controls="panel-auto-1"
            aria-selected="true" tabindex="0">Tastatur</button>
    <button type="button" role="tab" id="tab-auto-2" aria-controls="panel-auto-2"
            aria-selected="false" tabindex="-1">Screenreader</button>
    <button type="button" role="tab" id="tab-auto-3" aria-controls="panel-auto-3"
            aria-selected="false" tabindex="-1">Zoom</button>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-auto-1" aria-labelledby="tab-auto-1" tabindex="0">
    <p>Tab, Umschalt+Tab, Enter, Leertaste – findet in fünf Minuten mehr als jeder Scanner.</p>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-auto-2" aria-labelledby="tab-auto-2" tabindex="0" hidden>
    <p>NVDA unter Windows, VoiceOver auf dem Mac – beide kostenlos verfügbar.</p>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-auto-3" aria-labelledby="tab-auto-3" tabindex="0" hidden>
    <p>200 Prozent Browserzoom und 320 Pixel Breite decken die meisten Reflow-Fehler auf.</p>
  </div>
</div>

CSS

.bk-tablist {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #dcd8d0;
}
.bk-tablist [role="tab"] {
  padding: 0.6rem 1rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bk-tablist [aria-selected="true"] {
  border-bottom-color: #2563eb;
  color: #1e4fd0;
}
.bk-tabpanel {
  padding: 1rem 0.25rem;
}

JavaScript

const tabs = [...document.querySelectorAll('[data-tabs="auto"] [role="tab"]')];

function aktivieren(tab) {
  tabs.forEach((t) => {
    const aktiv = t === tab;
    t.setAttribute('aria-selected', String(aktiv));
    t.tabIndex = aktiv ? 0 : -1;             // Roving Tabindex
    document.getElementById(t.getAttribute('aria-controls')).hidden = !aktiv;
  });
  tab.focus();
}

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => aktivieren(tab));
  tab.addEventListener('keydown', (event) => {
    const schritt = { ArrowRight: 1, ArrowLeft: -1, Home: -i, End: tabs.length - 1 - i }[event.key];
    if (schritt === undefined) return;
    event.preventDefault();
    aktivieren(tabs[(i + schritt + tabs.length) % tabs.length]);
  });
});

Testprotokoll

1. Tab führt genau einmal in die Tab-Leiste – die übrigen Tabs haben tabindex="-1".
2. Pfeil rechts wechselt zum nächsten Tab und schaltet den Inhalt sofort mit um.
3. Pos1 und Ende springen zum ersten beziehungsweise letzten Tab.
4. Der nächste Tab-Druck führt in den Panel-Inhalt, weil das Panel tabindex="0" hat.
5. Umschalt+Tab führt zurück auf den aktiven Tab, nicht auf den ersten der Leiste.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.1.1 Tastatur
• Vertiefung Tabs

Vorschau

Code

HTML

<div class="bk-tabs" data-tabs="manuell">
  <div class="bk-tablist" role="tablist" aria-label="Prüfwege (manuell)">
    <button type="button" role="tab" id="tab-man-1" aria-controls="panel-man-1"
            aria-selected="true" tabindex="0">Tastatur</button>
    <button type="button" role="tab" id="tab-man-2" aria-controls="panel-man-2"
            aria-selected="false" tabindex="-1">Screenreader</button>
    <button type="button" role="tab" id="tab-man-3" aria-controls="panel-man-3"
            aria-selected="false" tabindex="-1">Zoom</button>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-man-1" aria-labelledby="tab-man-1" tabindex="0">
    <p>Tab, Umschalt+Tab, Enter, Leertaste – findet in fünf Minuten mehr als jeder Scanner.</p>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-man-2" aria-labelledby="tab-man-2" tabindex="0" hidden>
    <p>NVDA unter Windows, VoiceOver auf dem Mac – beide kostenlos verfügbar.</p>
  </div>
  <div class="bk-tabpanel" role="tabpanel" id="panel-man-3" aria-labelledby="tab-man-3" tabindex="0" hidden>
    <p>200 Prozent Browserzoom und 320 Pixel Breite decken die meisten Reflow-Fehler auf.</p>
  </div>
</div>

CSS

.bk-tablist [role="tab"]:focus-visible {
  outline: 3px solid #0b3d91;
  outline-offset: -3px;
}

JavaScript

const tabs = [...document.querySelectorAll('[data-tabs="manuell"] [role="tab"]')];

function fokussieren(tab) {
  tabs.forEach((t) => (t.tabIndex = t === tab ? 0 : -1));
  tab.focus();                                  // nur Fokus, keine Auswahl
}

function auswaehlen(tab) {
  tabs.forEach((t) => {
    const aktiv = t === tab;
    t.setAttribute('aria-selected', String(aktiv));
    document.getElementById(t.getAttribute('aria-controls')).hidden = !aktiv;
  });
}

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => { fokussieren(tab); auswaehlen(tab); });
  tab.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      return auswaehlen(tab);
    }
    const schritt = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
    if (schritt === undefined) return;
    event.preventDefault();
    fokussieren(tabs[(i + schritt + tabs.length) % tabs.length]);
  });
});

Testprotokoll

1. Tab führt in die Tab-Leiste, auf den zuletzt ausgewählten Tab.
2. Pfeil rechts bewegt den Fokus – der Inhalt bleibt stehen. Der Screenreader sagt „nicht ausgewählt“.
3. Enter oder Leertaste wählt aus, erst jetzt wechselt das Panel.
4. Damit erfüllst du 3.2.1: Reiner Fokus löst keine Kontextänderung aus.
5. Umschalt+Tab führt zurück auf den fokussierten – nicht zwingend den ausgewählten – Tab.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.1.1 Tastatur
• Vertiefung Tabs

Vorschau

Code

HTML

<p class="bk-feld">
  <label for="cb-nativ">Bundesland</label>
  <input type="text" id="cb-nativ" name="bundesland" list="cb-nativ-liste"
         autocomplete="address-level1">
  <datalist id="cb-nativ-liste">
    <option value="Baden-Württemberg"></option>
    <option value="Bayern"></option>
    <option value="Berlin"></option>
    <option value="Brandenburg"></option>
    <option value="Bremen"></option>
  </datalist>
</p>

CSS

.bk-feld {
  display: grid;
  gap: 0.35rem;
  max-width: 22rem;
}
.bk-feld label {
  font-weight: 600;
}
.bk-feld input {
  padding: 0.55rem 0.7rem;
  border: 1px solid #dcd8d0;
  border-radius: 0.5rem;
  font: inherit;
}

Kein JavaScript nötig. Diese Variante funktioniert allein mit HTML und CSS – das ist ihr eigentliches Argument.

Testprotokoll

1. Tab in das Feld – der Screenreader sagt Name und Rolle des Feldes an.
2. Ein Buchstabe tippen: Der Browser öffnet die gefilterte Liste von selbst.
3. Pfeil ab wandert durch die Vorschläge, jeder wird vorgelesen.
4. Enter übernimmt den Vorschlag in das Feld.
5. Esc schließt die Liste, ohne die Eingabe zu verwerfen.
6. Freie Eingaben bleiben möglich – die Liste schlägt vor, sie schreibt nicht vor.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 1.3.5 Eingabezweck bestimmen
• Vertiefung Comboboxen und Autocomplete

Vorschau

Code

HTML

<div class="bk-cb" data-cb>
  <p class="bk-feld">
    <label for="cb-aria">Bundesland</label>
    <input type="text" id="cb-aria" role="combobox" aria-expanded="false"
           aria-controls="cb-aria-liste" aria-autocomplete="list" autocomplete="off">
  </p>
  <ul class="bk-cb-liste" id="cb-aria-liste" role="listbox" aria-label="Vorschläge" hidden></ul>
  <p class="bk-cb-status" role="status" aria-live="polite"></p>
</div>

CSS

.bk-cb {
  position: relative;
  max-width: 22rem;
}
.bk-cb-liste {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid #dcd8d0;
  border-radius: 0.5rem;
}
.bk-cb-liste [role="option"] {
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.bk-cb-liste [aria-selected="true"] {
  background: #eef3ff;
  color: #1e4fd0;
}
.bk-cb-status {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #5a6473;
}

JavaScript

const daten = ['Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen'];
const feld = document.getElementById('cb-aria');
const liste = document.getElementById('cb-aria-liste');
const status = document.querySelector('[data-cb] .bk-cb-status');
let markiert = -1;

function zeichnen() {
  const treffer = daten.filter((w) => w.toLowerCase().includes(feld.value.toLowerCase()));
  liste.innerHTML = treffer
    .map((w, i) => `<li role="option" id="cb-aria-o${i}" aria-selected="false">${w}</li>`)
    .join('');
  liste.hidden = treffer.length === 0;
  feld.setAttribute('aria-expanded', String(!liste.hidden));
  markiert = -1;
  feld.removeAttribute('aria-activedescendant');
  status.textContent = treffer.length + ' Vorschläge';   // 4.1.3
}

function markieren(index) {
  const optionen = [...liste.querySelectorAll('[role="option"]')];
  if (!optionen.length) return;
  markiert = (index + optionen.length) % optionen.length;
  optionen.forEach((o, i) => o.setAttribute('aria-selected', String(i === markiert)));
  feld.setAttribute('aria-activedescendant', optionen[markiert].id);  // virtueller Fokus
}

feld.addEventListener('input', zeichnen);
feld.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowDown') { event.preventDefault(); markieren(markiert + 1); }
  if (event.key === 'ArrowUp') { event.preventDefault(); markieren(markiert - 1); }
  if (event.key === 'Escape') { liste.hidden = true; feld.setAttribute('aria-expanded', 'false'); }
  if (event.key === 'Enter' && markiert > -1) {
    event.preventDefault();
    feld.value = liste.querySelectorAll('[role="option"]')[markiert].textContent;
    liste.hidden = true;
    feld.setAttribute('aria-expanded', 'false');
  }
});

Testprotokoll

1. Tab in das Feld – der Screenreader sagt „Bundesland, Kombinationsfeld, zugeklappt“.
2. Ein Buchstabe tippen öffnet die Liste, aria-expanded springt auf true.
3. Die Live-Region meldet die Trefferzahl – das ist der Teil, den fast alle Umsetzungen vergessen.
4. Pfeil ab markiert den ersten Vorschlag. Der Fokus bleibt im Eingabefeld, nur aria-activedescendant wandert.
5. Enter übernimmt den markierten Vorschlag und klappt die Liste zu.
6. Esc schließt die Liste, ohne die Eingabe zu löschen.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Comboboxen und Autocomplete

Vorschau

Code

HTML

<label class="bk-switch">
  <input type="checkbox" role="switch" name="benachrichtigungen" checked>
  <span class="bk-switch-spur" aria-hidden="true"></span>
  <span>E-Mail-Benachrichtigungen</span>
</label>

CSS

.bk-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.bk-switch input {
  position: absolute;
  opacity: 0;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
}
.bk-switch-spur {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: #6e6a60;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.bk-switch-spur::after {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 1.125rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.bk-switch input:checked + .bk-switch-spur {
  background: #16643f;
}
.bk-switch input:checked + .bk-switch-spur::after {
  transform: translateX(1.25rem);
}
.bk-switch input:focus-visible + .bk-switch-spur {
  outline: 3px solid #0b3d91;
  outline-offset: 2px;
}

Kein JavaScript nötig. Diese Variante funktioniert allein mit HTML und CSS – das ist ihr eigentliches Argument.

Testprotokoll

1. Tab bis zum Schalter – die Checkbox ist von sich aus fokussierbar.
2. Der Screenreader sagt „E-Mail-Benachrichtigungen, Schalter, an“.
3. Leertaste kippt den Zustand. Enter tut hier bewusst nichts – so verhalten sich Checkboxen.
4. Die Ansage wechselt zu „aus“, ohne dass eine Zeile JavaScript beteiligt ist.
5. Beim Absenden geht der Zustand als Formularwert mit – genau dafür ist die Checkbox da.
6. Der Zustand ist nicht nur an der Farbe erkennbar, sondern auch an der Position des Knopfs (1.4.1).

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Toggle-Switches und Custom-Checkboxen

Vorschau

Code

HTML

<button type="button" class="bk-btn bk-toggle-btn" aria-pressed="false" data-toggle-btn>
  Kompaktansicht
</button>
<p class="bk-hinweis" data-toggle-echo>Zustand: aus</p>

CSS

.bk-toggle-btn[aria-pressed="true"] {
  background: #16643f;
}
.bk-toggle-btn[aria-pressed="true"]::after {
  content: " ✓";
}
.bk-hinweis {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: #5a6473;
}

JavaScript

const schalter = document.querySelector('[data-toggle-btn]');
const echo = document.querySelector('[data-toggle-echo]');

schalter.addEventListener('click', () => {
  const an = schalter.getAttribute('aria-pressed') === 'true';
  schalter.setAttribute('aria-pressed', String(!an));
  echo.textContent = 'Zustand: ' + (an ? 'aus' : 'an');
});

Testprotokoll

1. Tab bis zum Schalter – ein echter Button, also von sich aus fokussierbar.
2. Der Screenreader sagt „Kompaktansicht, Umschaltfläche, nicht gedrückt“.
3. Enter und Leertaste kippen beide – so verhalten sich Buttons.
4. aria-pressed wechselt auf true, die Ansage wird zu „gedrückt“.
5. Die Beschriftung bleibt „Kompaktansicht“ und wandert nicht mit: Sonst hieße es „Kompaktansicht aus, gedrückt“ – und niemand wüsste, was jetzt gilt.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Toggle-Switches und Custom-Checkboxen

Vorschau

Code

HTML

<nav class="bk-menue" aria-label="Ressourcen" data-menue="disclosure">
  <button type="button" class="bk-btn" aria-expanded="false" aria-controls="menue-disc-liste">
    Ressourcen
  </button>
  <ul class="bk-menue-liste" id="menue-disc-liste" hidden>
    <li><a href="/ressourcen/snippet-bibliothek.html">Snippet-Bibliothek</a></li>
    <li><a href="/ressourcen/kontrast-check.html">Kontrast-Check</a></li>
    <li><a href="/ressourcen/glossar.html">Glossar</a></li>
  </ul>
</nav>

CSS

.bk-menue {
  position: relative;
  display: inline-block;
}
.bk-menue-liste {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.3rem;
  min-width: 14rem;
  background: #fff;
  border: 1px solid #dcd8d0;
  border-radius: 0.5rem;
}
.bk-menue-liste a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 0.35rem;
  text-decoration: none;
  color: #1d4ed8;
}
.bk-menue-liste a:hover {
  background: #eef3ff;
}

JavaScript

const wrapper = document.querySelector('[data-menue="disclosure"]');
const knopf = wrapper.querySelector('button');
const liste = wrapper.querySelector('ul');

function setzen(offen) {
  knopf.setAttribute('aria-expanded', String(offen));
  liste.hidden = !offen;
}

knopf.addEventListener('click', () => setzen(knopf.getAttribute('aria-expanded') === 'false'));

// Esc schließt und gibt den Fokus zurück, ein Klick daneben schließt still.
wrapper.addEventListener('keydown', (event) => {
  if (event.key !== 'Escape') return;
  setzen(false);
  knopf.focus();
});
document.addEventListener('click', (event) => {
  if (!wrapper.contains(event.target)) setzen(false);
});

Testprotokoll

1. Tab bis „Ressourcen“ – der Screenreader sagt „Ressourcen, Schaltfläche, zugeklappt“.
2. Enter klappt auf, aria-expanded springt auf true.
3. Tab führt der Reihe nach durch die Links – ganz normale Tab-Reihenfolge, keine Sonderregel.
4. Esc schließt und legt den Fokus zurück auf den Auslöser.
5. Ein Klick außerhalb schließt ebenfalls, ohne den Fokus zu verschieben.
6. In der Linkliste des Screenreaders tauchen alle drei Ziele auf – bei role="menu" wäre das nicht so.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.2 Name, Rolle, Wert
• Vertiefung Menüs und Dropdowns

Vorschau

Code

HTML

<div class="bk-menue" data-menue="aria">
  <button type="button" class="bk-btn" aria-haspopup="true" aria-expanded="false"
          aria-controls="menue-aria-liste">
    Bearbeiten
  </button>
  <ul class="bk-menue-liste" id="menue-aria-liste" role="menu" aria-label="Bearbeiten" hidden>
    <li role="none"><button type="button" role="menuitem" tabindex="-1">Rückgängig</button></li>
    <li role="none"><button type="button" role="menuitem" tabindex="-1">Ausschneiden</button></li>
    <li role="none"><button type="button" role="menuitem" tabindex="-1">Einfügen</button></li>
  </ul>
</div>

CSS

.bk-menue-liste [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: none;
  border: 0;
  border-radius: 0.35rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bk-menue-liste [role="menuitem"]:focus-visible {
  outline: 3px solid #0b3d91;
  outline-offset: -3px;
}

JavaScript

const wrapper = document.querySelector('[data-menue="aria"]');
const knopf = wrapper.querySelector('button[aria-haspopup]');
const liste = wrapper.querySelector('[role="menu"]');
const eintraege = [...liste.querySelectorAll('[role="menuitem"]')];

function oeffnen(index = 0) {
  liste.hidden = false;
  knopf.setAttribute('aria-expanded', 'true');
  eintraege[index].focus();
}

function schliessen(zurueck = true) {
  liste.hidden = true;
  knopf.setAttribute('aria-expanded', 'false');
  if (zurueck) knopf.focus();
}

knopf.addEventListener('click', () => (liste.hidden ? oeffnen() : schliessen()));
knopf.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowDown') { event.preventDefault(); oeffnen(0); }
  if (event.key === 'ArrowUp') { event.preventDefault(); oeffnen(eintraege.length - 1); }
});

liste.addEventListener('keydown', (event) => {
  const i = eintraege.indexOf(document.activeElement);
  const schritt = { ArrowDown: 1, ArrowUp: -1, Home: -i, End: eintraege.length - 1 - i }[event.key];
  if (schritt !== undefined) {
    event.preventDefault();
    eintraege[(i + schritt + eintraege.length) % eintraege.length].focus();
  }
  if (event.key === 'Escape' || event.key === 'Tab') schliessen(event.key === 'Escape');
});

Testprotokoll

1. Tab bis „Bearbeiten“ – die Ansage lautet „Bearbeiten, Schaltfläche, hat Untermenü, zugeklappt“.
2. Pfeil ab öffnet das Menü und setzt den Fokus auf den ersten Eintrag. Enter tut dasselbe.
3. Pfeil ab und auf wandern durch die Einträge und laufen am Ende um.
4. Pos1 springt zum ersten, Ende zum letzten Eintrag.
5. Tab schließt das Menü und verlässt es – im Menü selbst gibt es keine Tab-Reihenfolge.
6. Esc schließt und gibt den Fokus an den Auslöser zurück.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.1.1 Tastatur
• Vertiefung Menüs und Dropdowns

Vorschau

Code

HTML

<section class="bk-karussell" aria-roledescription="Karussell" aria-label="Kundenstimmen"
         data-karussell="manuell">
  <div class="bk-slides" aria-live="polite">
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="1 von 3">
      <p>„Die Umstellung hat drei Tage gedauert – nicht drei Monate.“</p>
    </div>
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="2 von 3" hidden>
      <p>„Endlich versteht die Redaktion, warum Alt-Texte kein Pflichtfeld sind.“</p>
    </div>
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="3 von 3" hidden>
      <p>„Der Prüfbericht war zum ersten Mal für alle im Team lesbar.“</p>
    </div>
  </div>
  <div class="bk-karussell-nav">
    <button type="button" class="bk-btn bk-btn-quiet" data-slide="-1">Vorherige Folie</button>
    <button type="button" class="bk-btn bk-btn-quiet" data-slide="1">Nächste Folie</button>
  </div>
</section>

CSS

.bk-karussell {
  border: 1px solid #ebe8e2;
  border-radius: 0.6rem;
  background: #fff;
  padding: 1rem 1.25rem;
}
.bk-slide p {
  margin: 0;
  font-size: 1.05rem;
}
.bk-karussell-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

JavaScript

const wurzel = document.querySelector('[data-karussell="manuell"]');
const folien = [...wurzel.querySelectorAll('.bk-slide')];
let aktuell = 0;

function zeigen(index) {
  aktuell = (index + folien.length) % folien.length;
  folien.forEach((f, i) => (f.hidden = i !== aktuell));
}

wurzel.querySelectorAll('[data-slide]').forEach((button) => {
  button.addEventListener('click', () => zeigen(aktuell + Number(button.dataset.slide)));
});

Testprotokoll

1. Tab führt in die Folie – der Screenreader sagt „Kundenstimmen, Karussell“ und „1 von 3, Folie“.
2. Tab weiter zu „Vorherige Folie“ und „Nächste Folie“ – beide Namen benennen die Handlung.
3. Enter wechselt die Folie. Die Live-Region liest den neuen Text vor, weil sie aria-live="polite" trägt.
4. „Polite“ ist hier richtig: Die Ansage wartet, bis der Screenreader den aktuellen Satz beendet hat.
5. Nichts bewegt sich von selbst – es gibt nichts zu pausieren.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 4.1.3 Statusmeldungen
• Vertiefung Slider und Karussells

Vorschau

Code

HTML

<section class="bk-karussell" aria-roledescription="Karussell" aria-label="Aktionen"
         data-karussell="auto">
  <button type="button" class="bk-btn bk-btn-quiet" data-pause aria-pressed="false">
    Automatischen Wechsel anhalten
  </button>
  <div class="bk-slides" data-live aria-live="off">
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="1 von 3">
      <p>Frühbucher: 20 Prozent bis 31. August 2026.</p>
    </div>
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="2 von 3" hidden>
      <p>Neu: Werkstattkurs Barrierefreiheit, zwei Tage.</p>
    </div>
    <div class="bk-slide" role="group" aria-roledescription="Folie" aria-label="3 von 3" hidden>
      <p>Prüfbericht inklusive Nachprüfung nach acht Wochen.</p>
    </div>
  </div>
  <div class="bk-karussell-nav">
    <button type="button" class="bk-btn bk-btn-quiet" data-slide="-1">Vorherige Folie</button>
    <button type="button" class="bk-btn bk-btn-quiet" data-slide="1">Nächste Folie</button>
  </div>
</section>

CSS

.bk-karussell [data-pause] {
  margin-bottom: 0.75rem;
}
.bk-karussell [data-pause][aria-pressed="true"]::before {
  content: "▶ ";
}
.bk-karussell [data-pause][aria-pressed="false"]::before {
  content: "⏸ ";
}

JavaScript

const wurzel = document.querySelector('[data-karussell="auto"]');
const folien = [...wurzel.querySelectorAll('.bk-slide')];
const buehne = wurzel.querySelector('[data-live]');
const pause = wurzel.querySelector('[data-pause]');
let aktuell = 0;
let timer = null;

function zeigen(index) {
  aktuell = (index + folien.length) % folien.length;
  folien.forEach((f, i) => (f.hidden = i !== aktuell));
}

function starten() {
  buehne.setAttribute('aria-live', 'off');   // kein Dazwischenreden im Automatikbetrieb
  timer = window.setInterval(() => zeigen(aktuell + 1), 5000);
  pause.setAttribute('aria-pressed', 'false');
  pause.textContent = 'Automatischen Wechsel anhalten';
}

function anhalten() {
  window.clearInterval(timer);
  timer = null;
  buehne.setAttribute('aria-live', 'polite');  // ab jetzt bedient der Mensch
  pause.setAttribute('aria-pressed', 'true');
  pause.textContent = 'Automatischen Wechsel fortsetzen';
}

pause.addEventListener('click', () => (timer ? anhalten() : starten()));
wurzel.querySelectorAll('[data-slide]').forEach((button) => {
  button.addEventListener('click', () => {
    if (timer) anhalten();                     // Bedienung schlägt Automatik
    zeigen(aktuell + Number(button.dataset.slide));
  });
});

// Wer Bewegung abbestellt hat, bekommt gar keine erst.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) anhalten();
else starten();

Testprotokoll

1. Tab führt zuerst auf „Automatischen Wechsel anhalten“ – der Schalter steht vor dem Inhalt, wie 2.2.2 es verlangt.
2. Der Screenreader sagt „Umschaltfläche, nicht gedrückt“ – die Automatik läuft.
3. Enter hält an. Die Beschriftung wechselt zu „fortsetzen“, aria-pressed auf true.
4. Erst jetzt wird die Bühne zur Live-Region: Im Automatikbetrieb stand aria-live auf off.
5. Tab weiter zu den Folien-Schaltern; ein Klick dort hält die Automatik ebenfalls an.
6. Mit prefers-reduced-motion startet die Automatik gar nicht erst.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.2.2 Pausieren, beenden, ausblenden
• Vertiefung Slider und Karussells

Vorschau

Code

HTML

<form class="bk-wizard" action="/anmeldung/schritt-2" method="post">
  <p class="bk-wizard-fortschritt">Schritt 1 von 3: Kontaktdaten</p>

  <fieldset class="bk-fieldset">
    <legend>Kontaktdaten</legend>
    <p class="bk-feld">
      <label for="wz-name">Name</label>
      <input type="text" id="wz-name" name="name" autocomplete="name" required>
    </p>
    <p class="bk-feld">
      <label for="wz-mail">E-Mail-Adresse</label>
      <input type="email" id="wz-mail" name="email" autocomplete="email" required>
    </p>
  </fieldset>

  <button type="submit" class="bk-btn">Weiter zu Schritt 2</button>
</form>

CSS

.bk-wizard-fortschritt {
  margin: 0 0 0.75rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563eb;
}
.bk-fieldset {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid #ebe8e2;
  border-radius: 0.5rem;
}
.bk-fieldset legend {
  padding: 0 0.4rem;
  font-weight: 700;
}

Kein JavaScript nötig. Diese Variante funktioniert allein mit HTML und CSS – das ist ihr eigentliches Argument.

Testprotokoll

1. Der Seitentitel lautet „Schritt 1 von 3: Kontaktdaten – Anmeldung“. Screenreader lesen ihn beim Laden vor – die Verortung ist damit erledigt.
2. Tab führt durch die Felder; jedes hat ein verknüpftes label.
3. Der Fortschritt steht als Text da, nicht nur als Balkengrafik.
4. „Weiter zu Schritt 2“ benennt das Ziel – nicht bloß „Weiter“.
5. Nach dem Absenden lädt eine neue Seite: Der Fokus steht am Anfang, der neue Titel wird vorgelesen.
6. Die Zurück-Taste des Browsers führt zurück zu Schritt 1, mit erhaltenen Eingaben.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.4.2 Seitentitel
• Vertiefung Mehrstufige Formulare und Wizards

Vorschau

Code

HTML

<form class="bk-wizard" data-wizard novalidate>
  <p class="bk-wizard-fortschritt" role="status" aria-live="polite" data-wizard-status>
    Schritt 1 von 2: Kontaktdaten
  </p>

  <div class="bk-wizard-fehler" data-wizard-fehler hidden>
    <p class="bk-wizard-fehler-titel" tabindex="-1" data-wizard-fehler-titel>Bitte zwei Angaben ergänzen</p>
    <ul data-wizard-fehler-liste></ul>
  </div>

  <section class="bk-wizard-schritt" data-wizard-schritt>
    <p class="bk-wizard-titel" tabindex="-1">Kontaktdaten</p>
    <p class="bk-feld">
      <label for="wz2-name">Name</label>
      <input type="text" id="wz2-name" name="name" autocomplete="name" required>
    </p>
  </section>

  <section class="bk-wizard-schritt" data-wizard-schritt hidden>
    <p class="bk-wizard-titel" tabindex="-1">Rückfragen</p>
    <p class="bk-feld">
      <label for="wz2-frage">Deine Frage</label>
      <textarea id="wz2-frage" name="frage" rows="3" required></textarea>
    </p>
  </section>

  <div class="bk-karussell-nav">
    <button type="button" class="bk-btn bk-btn-quiet" data-wizard-zurueck hidden>Zurück</button>
    <button type="button" class="bk-btn" data-wizard-weiter>Weiter zu Schritt 2</button>
  </div>
</form>

CSS

.bk-wizard-titel {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1b1f27;
}
.bk-wizard-titel:focus {
  outline: none;
}
.bk-wizard-fehler {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fbeae8;
  border-left: 4px solid #b4453c;
  border-radius: 0.35rem;
}
.bk-wizard-fehler-titel {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #8f342d;
}
.bk-wizard-fehler ul {
  margin: 0;
  padding-left: 1.2rem;
}

JavaScript

const form = document.querySelector('[data-wizard]');
const schritte = [...form.querySelectorAll('[data-wizard-schritt]')];
const status = form.querySelector('[data-wizard-status]');
const fehlerBox = form.querySelector('[data-wizard-fehler]');
const fehlerListe = form.querySelector('[data-wizard-fehler-liste]');
const fehlerTitel = form.querySelector('[data-wizard-fehler-titel]');
const weiter = form.querySelector('[data-wizard-weiter]');
const zurueck = form.querySelector('[data-wizard-zurueck]');
let aktuell = 0;

function zeigen(index) {
  aktuell = index;
  schritte.forEach((s, i) => (s.hidden = i !== index));
  status.textContent = `Schritt ${index + 1} von ${schritte.length}`;
  zurueck.hidden = index === 0;
  weiter.textContent = index === schritte.length - 1 ? 'Absenden' : `Weiter zu Schritt ${index + 2}`;
  schritte[index].querySelector('.bk-wizard-titel').focus();   // Fokus wandert mit
}

function pruefen() {
  const luecken = [...schritte[aktuell].querySelectorAll('[required]')].filter((f) => !f.value.trim());
  fehlerBox.hidden = luecken.length === 0;
  if (!luecken.length) return true;
  // Fehlerliste ÜBER dem Formular, jeder Eintrag springt zu seinem Feld.
  fehlerListe.innerHTML = luecken
    .map((f) => `<li><a href="#${f.id}">${form.querySelector(`label[for="${f.id}"]`).textContent} fehlt</a></li>`)
    .join('');
  fehlerTitel.focus();
  return false;
}

weiter.addEventListener('click', () => {
  if (!pruefen()) return;
  if (aktuell < schritte.length - 1) zeigen(aktuell + 1);
});
zurueck.addEventListener('click', () => zeigen(aktuell - 1));

Testprotokoll

1. Tab führt durch die Felder des ersten Schritts.
2. „Weiter zu Schritt 2“ prüft zuerst: Fehlt eine Pflichtangabe, erscheint die Fehlerliste über dem Formular.
3. Der Fokus springt auf die Fehlerüberschrift – der Screenreader liest sie samt Liste vor.
4. Jeder Eintrag der Liste ist ein Link auf sein Feld: Enter führt direkt dorthin.
5. Ist alles gefüllt, wechselt der Schritt. Der Fokus wandert auf „Rückfragen“, die Live-Region meldet „Schritt 2 von 2“.
6. Ohne diesen Fokuswechsel bliebe der Fokus auf dem Button – der Schritt hätte sich lautlos geändert.

Erwartete Screenreader-Ausgabe

• Kriterium WCAG 2.4.3 Fokus-Reihenfolge
• Vertiefung Mehrstufige Formulare und Wizards