Thema wählen, Barriere lösen.

• ARIA Accessibility: Rolle, Name und Zustand richtig setzenARIA Accessibility praktisch verstehen: Wo Name, Rolle und Zustand entstehen, welches HTML zuerst passt und welche ARIA-Fehler automatisch auffallen.
• aria-autocomplete: none, inline, list und both wählenaria-autocomplete richtig setzen: Werte am Verhalten ablesen, Combobox-Markup, alle Zustandswechsel im Diagramm und die Prüfschritte für Ihre Vorschlagsliste.
• ARIA-Button: Rolle, Tastatur und Zustände umsetzenARIA-Button richtig umsetzen: Entscheidungsbaum zum passenden Element, vollständige Tastaturlogik für role=button und die Prüfschritte für Name und Sperre.
• ARIA Checkbox: aria-checked, mixed und Tastatur umsetzenARIA-Checkbox richtig bauen: aria-checked mit false, true und mixed, vollständiges Codebeispiel mit Leertaste und alle Zustandswechsel eines Sammelfelds.
• aria-controls: Ziel-ID verbinden und Aufklappen umsetzenaria-controls richtig verwenden: passende Ziel-ID, vollständiges HTML- und JavaScript-Beispiel, der Ablauf bis zum Screenreader und ein Prüfplan je Zustand.
• aria-current: aktuelle Seite und Schritt kennzeichnenaria-current richtig einsetzen: page, step, date, time, location und true im Entscheidungsbaum, HTML-Beispiele und die Prüfung Ihrer Navigation.
• aria-describedby: Hinweise und Fehler am Feld zuordnenaria-describedby richtig einsetzen: Aufbau des Feldes, mehrere IDs in der richtigen Reihenfolge, Fehlerbezug ergänzen und zurücknehmen, Beschreibung prüfen.
• aria-expanded richtig setzen: true, false und Zustandswechselaria-expanded am Button richtig verwenden: Bedeutung von true und false, Zustandsdiagramm aller Wechsel, vollständiges Codebeispiel und eine Abnahmeliste.
• aria-hidden="true": Wirkung verstehen und richtig setzenWas aria-hidden="true" bewirkt: Dekoration verbergen, Fokusfehler korrigieren und im Entscheidungsbaum zwischen hidden, inert und visually-hidden wählen.
• ARIA im HTML: Rolle, Name, Beziehung und ZustandARIA im HTML gezielt einsetzen: Entscheidungsbaum für die fehlende Angabe, Aufklappbutton mit synchronem Zustand und ein Prüfplan für jeden Zustand.
• aria-invalid: Formularfehler setzen und zurücknehmenaria-invalid richtig einsetzen: Aufbau des Feldes im Fehlerzustand, Meldung verbinden, den Zustand nach der Korrektur entfernen und alle Wechsel prüfen.
• ARIA mit JavaScript setzen: Zustände synchron haltenARIA mit JavaScript aktualisieren: Aufklappbeispiel, Ablauf bis zur Ausgabe und Entscheidungshilfe für aria-expanded, aria-pressed und Statusmeldungen.
• aria-label in HTML: Bedienelemente richtig benennenaria-label in HTML gezielt einsetzen: Namensberechnung Schritt für Schritt, Entscheidungsbaum für label, aria-labelledby und aria-label, mit Suchformular-Code.
• ARIA Live Region: Statusmeldungen richtig ankündigenARIA Live Region umsetzen: role status, polite und assertive, vollständiger Filter-Code, der Ablauf bis zur Ansage und eine Abnahmeprüfung zum Mitmachen.
• ARIA menu: Menürolle wählen und Tastatur umsetzenARIA menu richtig einsetzen: role menu von Navigation abgrenzen, vollständiges Sortiermenü im Code, Zustandsdiagramm der Tastatur und Prüfmatrix je Zustand.
• aria-modal richtig verwenden und Dialoge prüfenaria-modal verstehen: Semantik von Verhalten trennen, native Dialoge mit showModal öffnen, Zustände und Ablauf nachvollziehen und die Modalität selbst abnehmen.
• ARIA Navigation: nav, Bereichsnamen und aria-currentARIA Navigation umsetzen: nav und role navigation, Linkgruppen benennen, aria-current setzen, Untermenü Taste für Taste und ein Baustein für viele Seiten.
• aria-pressed: Umschaltbuttons mit Zustand umsetzenaria-pressed mit true, false und mixed verstehen: Filterbutton im Code, Zustandsdiagramm der drei Werte und der Weg des Zustands bis zur Ausgabe.
• aria-required: Pflichtfelder kennzeichnen und prüfenaria-required und required unterscheiden: Codevergleich, die fünf Teile eines Pflichtfeldes und eine Prüfmatrix für leere, ungültige und korrigierte Eingaben.
• ARIA Roles in HTML: Rollen wählen und einsetzenARIA Roles in HTML richtig einsetzen: Entscheidungsbaum für native Semantik statt role, Rollenübersicht, vollständiger Checkbox-Filter und Prüfschritte.
• aria-selected: Auswahlzustände setzen und prüfenaria-selected mit true und false einsetzen: Abgrenzung zu aria-current, vollständiges Tab-Beispiel, Zustandsdiagramm für Fokus und Auswahl, Abnahmeprüfung.
• ARIA Table: Tabellenrollen und Kopfzellen einsetzenARIA Table mit table, row, columnheader, rowheader und cell umsetzen: Codevergleich, der Weg einer Zelle bis zur Ausgabe und eine Prüfmatrix je Ansicht.

Befunde dazu: ARIA & Semantik (15 Regeln) · Formulare & Beschriftungen (15 Regeln)

• A11y HTML: Semantik, Bedienung und PrüfwegeA11y mit HTML umsetzen: Suchmaske im Codevergleich, ein kompletter Nutzerweg mit Barrieren und Korrekturen, Prioritäten nach Aufwand und die drei Prüfwege.
• Code Accessibility: HTML prüfen und Barrieren behebenCode Accessibility im Review: ein vollständiger HTML-Codevergleich, klare Prüfungen für Namen und Tastaturbedienung sowie die Grenzen automatischer Tests.
• Focus Trap Accessibility: Dialogfokus ohne TastaturfalleFocus Trap Accessibility umsetzen: Fokus im Dialog halten, Escape und Schließen ermöglichen, zum Auslöser zurückkehren. Mit dialog-Beispiel und Tastaturabnahme.
• HTML a11y: Seiten verständlich strukturieren und prüfenHTML a11y an einer vollständigen Produktseite: Sprache, Titel, Überschriften und native Aufklappfunktion richtig auszeichnen und im Browser überprüfen.
• HTML Table Accessibility: Kopfzellen und Bezüge richtig setzenHTML Table Accessibility umsetzen: caption, th, scope und headers an vollständigen Codebeispielen, dazu Kopfstruktur-Entscheidung und Zellprüfung.
• HTML5 Accessibility: Bereiche und Bedienung zugänglich auszeichnenHTML5 Accessibility praktisch umsetzen: main, nav und Überschriften sinnvoll nutzen, Formulare beschriften und Struktur sowie Tastaturbedienung prüfen.
• JavaScript Accessibility: Fokus, Zustände und StatusmeldungenJavaScript Accessibility praktisch umsetzen: ausführbare Beispiele für Eingabehilfe und Statusmeldung, stabile Fokuswege und konkrete Tastaturtests.
• JavaScript barrierefrei: Fokus nach DOM-Änderungen erhaltenJavaScript barrierefrei umsetzen: vollständiges Codebeispiel für das Entfernen von Listeneinträgen mit Folgefokus, nativen Buttons und konkreten Tastaturtests.
• Keyboard Accessibility: Tastaturbedienung prüfen und verbessernKeyboard Accessibility praktisch prüfen: Funktionen erreichen, aktivieren und verlassen. Mit HTML-Codevergleich, Fokusprüfung und konkreter Testfolge.
• Keyboard Accessibility in HTML: Buttons, Fokus und TastaturwegeKeyboard Accessibility in HTML umsetzen: Klick-divs durch Buttons ersetzen, Fokus sichtbar halten und Funktionen mit echten Tasten vollständig prüfen.
• Semantic HTML Accessibility: Struktur und Links richtig auszeichnenSemantic HTML Accessibility an einer Leistungsübersicht: Vorher-Nachher-Code für Überschrift, Liste und Links, dazu Elementwahl und Tastaturprüfung.
• WCAG und ARIA: Namen, Rollen und Zustände richtig umsetzenWCAG und ARIA unterscheiden: native Checkbox, vollständiger Aufklapp-Button und konkrete Tests für Namen, Rollen, Zustände und Tastaturbedienung.
• WCAG CSS: Kontrast, Fokus und Layout konkret korrigierenWCAG CSS praktisch umsetzen: Kriterien für Kontrast, Fokus, Umbruch und Textabstände zuordnen, eine Inhaltskarte korrigieren und im Browser nachprüfen.
• WCAG und HTML: Semantik, Namen und eigener PrüfplanWCAG und HTML verbinden: Sprache, Titel, Überschriften und Labels richtig auszeichnen. Mit Codebeispiel, Ebenenmodell und Schritten zur eigenen Abnahme.
• WCAG und JavaScript: Zustände, Bedienung und Fokus prüfenWCAG für JavaScript-Oberflächen: Aufklappbeispiel mit Tastaturbedienung, aria-expanded und Fokusrückgabe. Mit Zustandsdiagramm und Weg bis zur Ansage.
• WCAG Web Accessibility: Kriterien verstehen und prüfenWCAG Web Accessibility praktisch: vier Prinzipien, A bis AAA und ein Formular mit Vorher/Nachher-Code, Feldanatomie und Prüfmatrix über alle Zustände.
• Web Accessibility Monitoring: Regressionen erkennenWeb Accessibility Monitoring einrichten: Prüfumfang und Intervall wählen, Läufe vergleichen, Regressionen zurückverfolgen und Korrekturen belegt abnehmen.
• Web Accessibility Scan: Befunde einordnen und behebenWeb Accessibility Scan mit Ihrer URL starten, Fundstellen einordnen, nach Aufwand und Wirkung priorisieren und die Korrektur mit einem Re-Test abnehmen.
• Website Accessibility Monitoring: Befunde und Re-TestsWebsite Accessibility Monitoring aufsetzen: Läufe vergleichbar halten, eine Formular-Regression bis zur gemeinsamen Komponente verfolgen und belegt abnehmen.
• Website Accessibility Scan: URL prüfen und Befunde behebenWebsite Accessibility Scan per URL starten: Prüfstand je Seitengruppe lesen, eine HTML-Korrektur im Team übergeben und den Nutzerweg selbst abnehmen.
• Website Barrierefreiheit Check: prüfen und nächste SchritteWebsite-Barrierefreiheit im Check: URL prüfen, Fundstellen verstehen, einen kompletten Nutzerweg durchgehen und Maßnahmen nach Aufwand und Wirkung ordnen.

Befunde dazu: ARIA & Semantik (15 Regeln) · Formulare & Beschriftungen (15 Regeln)

• Accessible iframe: barrierefrei einbetten und prüfenAccessible iframe: Rahmen mit title benennen, den Namensweg bis zur assistiven Technik verfolgen, per Tastatur bedienen und Zuständigkeiten klären.
• Alt-Text-Checker: Bildattribute prüfen und Texte bewertenAlt-Text-Checker: Alt-Attribute aus Ihrem HTML im Browser prüfen, fehlende und leere Werte erkennen, Bildzweck beurteilen und Alternativtexte selbst abnehmen.
• Alt-Text im HTML richtig einsetzen: Beispiele für imgAlt-Text im HTML schreiben: img-Beispiele für informative, dekorative und verlinkte Bilder, Entscheidungsbaum und der Weg vom alt-Attribut zur Ausgabe.
• iframe title accessibility: Einbettungen sinnvoll benenneniframe title accessibility: Rahmen benennen, die Namensberechnung vor aria-label und title verstehen und den Nutzerweg durch mehrere Einbettungen prüfen.
• img alt in HTML: Bildalternativen passend einsetzenimg alt in HTML setzen: fehlendes, leeres und gefülltes alt unterscheiden, Bildlinks benennen und je Bildverwendung die passende Prüfmethode wählen.
• WCAG Alt-Text: Bildzweck entscheiden und Alternativen schreibenWCAG Alt-Text nach 1.1.1: Bildzweck entscheiden, HTML korrigieren, komplexe Grafiken erklären und die Seite gegen das Erfolgskriterium selbst abnehmen.

Befunde dazu: Bilder & Einbettungen (10 Regeln) · Navigation & Bedienung (6 Regeln)

• Drupal Accessibility Checker: Website prüfen und Befunde behebenDrupal Accessibility Checker: Ausgabe per URL prüfen, Editoria11y einordnen, Twig-Befunde beheben und den Prüfplan über alle Drupal-Zustände aufstellen.

Befunde dazu: Bilder & Einbettungen (10 Regeln) · Navigation & Bedienung (6 Regeln)

• Dropdown-Menü in WordPress einrichten und prüfenDropdown-Menü in WordPress anlegen: Untermenü im Block- oder klassischen Theme erstellen, Klickverhalten einstellen und den Tastaturweg durch das fertige Menü prüfen.
• Hamburger-Menü in WordPress einrichten und prüfenHamburger-Menü in WordPress einrichten: Overlay im Navigationsblock einstellen, klassische Themes unterscheiden und alle Menüzustände von Öffnen bis Fokusrückkehr prüfen.
• Mobile Navigation in WordPress einrichten und prüfenMobile Navigation in WordPress einstellen: Overlay im Navigationsblock setzen, Kopfzeile breit und schmal vergleichen und den mobilen Weg bis zur Zielseite prüfen.
• WordPress Accessibility Checker: prüfen und gezielt korrigierenWordPress Accessibility Checker für veröffentlichte Seiten: URL prüfen, Befunde Inhalt, Theme oder Plugin zuordnen, Zuständigkeiten klären und Maßnahmen sinnvoll staffeln.
• WordPress-Navigation erstellen: Block- und klassische ThemesWordPress-Navigation erstellen: Menü im Block-Editor oder klassischen Theme anlegen, Position zuordnen und Menüzustände sowie Tastaturweg prüfen.
• WordPress Navigation Plugin: auswählen, einbinden und prüfenWordPress Navigation Plugin oder Bordmittel? Entscheidungsbaum, Max Mega Menu als Einbaubeispiel, PHP-Menüstandort und Verantwortung bis zur Abnahme.
• WordPress-Theme einrichten: installieren, anpassen, testenWordPress-Theme einrichten: Installation, Startseite, Navigation und Stile. Mit theme.json-Beispiel, Wirkung gemeinsamer Template-Teile und Prüfschritten.
• WordPress-Website optimieren: Performance, Bilder und BedienungWordPress-Website optimieren: Maßnahmen nach Aufwand und Wirkung staffeln, Bilder mobil ausgeben, Zuständigkeiten klären und die Bedienung getrennt testen.

Befunde dazu: Navigation & Bedienung (6 Regeln) · ARIA & Semantik (15 Regeln)

• Color Contrast berechnen: Farbpaar nach WCAG 2.2 prüfenColor Contrast aus zwei Hexfarben berechnen: AA- und AAA-Bewertung, Rechenweg, typische Spannweiten von Grautönen und welche Zustände nur manuell prüfbar sind.
• CSS Accessibility: Fokus, Text, Layout und ReihenfolgeCSS Accessibility praktisch umsetzen: Codebeispiele für flexible Inhalte und reduzierte Bewegung, ein gemeinsamer Fokusstil und eine Reihenfolge nach Aufwand.
• CSS barrierefrei: Umbruch, Fokus, Kontrast und BewegungCSS barrierefrei gestalten: Beispiele für flexible Textblöcke, sichtbaren Fokus und reduzierte Bewegung, ein vollständiger Nutzerweg und eine Abnahme zum Abhaken.
• CSS Color Contrast: Textfarbe, Deckkraft und GrenzwertCSS Color Contrast verbessern: wirksame Farben ermitteln, Opacity prüfen, den geltenden Grenzwert je Element bestimmen und die Korrektur vergleichen.
• CSS Focus Outline: Fokusrahmen sichtbar gestaltenCSS Focus Outline umsetzen: outline und outline-offset mit focus-visible kombinieren, Beschnitt und Flächenwechsel lösen, Systemfarben berücksichtigen.
• CSS :focus-visible: Fokusring gestalten und prüfenCSS :focus-visible verstehen und anwenden: echte Browserprobe, Codevergleich, Zustandswechsel zwischen Maus und Tastatur und ein Tastaturweg zum Nachgehen.
• CSS forced colors: Systemfarben und Fokus richtig setzenCSS forced colors gezielt einsetzen: das passende Systemfarben-Paar je Element wählen, Schatten durch Konturen ersetzen und die Darstellung im Browser und unter Windows abnehmen.
• CSS High Contrast Mode: forced-colors richtig einsetzenCSS High Contrast Mode anpassen: forced-colors von prefers-contrast trennen, Feldteile ohne Farbcodierung erklären und je Zustand Emulation und Windows-Kontrastdesign prüfen.
• CSS Hover und Focus: Zustände zugänglich gestaltenCSS hover und focus sauber trennen: :focus-visible und :focus-within richtig einsetzen, den Zustandswechsel zwischen Zeiger und Tastatur verstehen und beide Eingabewege abnehmen.
• CSS Keyboard Focus: Tastaturfokus sichtbar gestaltenCSS keyboard focus umsetzen: nutzbares HTML/CSS-Beispiel, Tastaturweg durch eine Kopfzeile, Fokuszustand im Accessibility Tree und abgeschnittene Markierungen erkennen.
• CSS prefers-reduced-motion: Animationen gezielt reduzierenCSS prefers-reduced-motion richtig einsetzen: reduce und no-preference verstehen, den Weg der Einstellung nachvollziehen und je Bewegungsquelle die passende Korrektur wählen.
• Visually hidden CSS: Text verbergen, Bedeutung erhaltenVisually hidden CSS richtig einsetzen: vollständige Codebeispiele, der Linkname durch vier technische Ebenen und die Entscheidung zwischen Klasse, hidden und aria-hidden.

Befunde dazu: Navigation & Bedienung (6 Regeln) · Text & Darstellung (4 Regeln)

• Accessible Datepicker: Datumseingabe barrierefrei bauenAccessible Datepicker umsetzen: natives Datumsfeld beschriften, Kalenderzustände und Rasterbedienung verstehen, gesperrte Tage erklären und selbst abnehmen.
• Accessible File Upload: Dateiauswahl barrierefrei bauenAccessible File Upload mit nativem HTML: Feld beschriften, Auswahl von Übertragung und Serverantwort trennen und Fehlermeldungen hörbar zurückgeben.
• Accessible Login Form: zugängliche Anmeldung bauenAccessible Login Form mit HTML: Labels, Passwortmanager und verständliche Fehler umsetzen, den ganzen Anmeldeweg planen und jeden Zustand nachprüfen.
• Accessible Search Form: barrierefreies Suchformular bauenAccessible Search Form bauen: Label, Such-Landmark und Statusregion verbinden, den Weg bis zur Ansage verstehen und die Suche bei 320 Pixeln prüfen.
• Autocomplete HTML: Werte für Formulare richtig setzenautocomplete in HTML verwenden: passende Werte für Name, Adresse und Login, Formularvorgaben und Feldwerte. Mit Codebeispielen und Autofill-Prüfliste.
• Checkbox HTML: Label, Auswahl und Werte richtig einsetzenCheckboxen in HTML erstellen: beschriftete Beispiele, Mehrfachauswahl mit fieldset, checked und übertragene Werte. Mit Tastatur und Formulardaten nachprüfen.
• File Upload HTML: Dateiformular mit POST und multipart/form-dataFile Upload mit HTML erstellen: Dateifeld beschriften, per Formular senden, Dateigröße vorab prüfen und die Servergrenzen kennen. Mit nutzbaren Codebeispielen.
• Form Accessibility: zugängliche Formulare mit klaren FehlernForm Accessibility umsetzen: Felder beschriften, Pflicht und Hinweise erklären, Fehler verknüpfen und zur Korrektur führen. Mit HTML und JavaScript-Beispiel.
• Form HTML: Formular erstellen, beschriften und absendenHTML-Formular mit form, label, input und textarea erstellen. Vollständiges Codebeispiel, GET und POST, name und id sowie die Grenzen der Browserprüfung verstehen.
• Gewinnspiel-Formular erstellen: HTML-Vorlage und PrüfablaufGewinnspiel-Formular erstellen mit beschrifteten Feldern, nativer Checkbox und klaren Fehlermeldungen. HTML-Vorlage, Hinweise zur Verarbeitung und Probedurchlauf.
• HTML Form Accessibility: Formulare zugänglich umsetzenHTML Form Accessibility mit nutzbarem Code: Labels verknüpfen, Pflichtfelder und Hinweise auszeichnen, Auswahlgruppen bilden und Fehler verständlich melden.
• Input und Label in HTML: for und id richtig verbindenHTML-Inputs mit label, for und id beschriften. Mit Beispiel für Textfeld und Checkbox, Prüfung im Browser und klarer Trennung von Name, Hinweis und Platzhalter.
• Label und Input in HTML richtig verbindenLabel und Input in HTML verbinden: for auf die id setzen, mit vollständigem Beispiel, Checkbox-Beschriftung, typischen Fehlern und Prüfung im Browser.
• Login-Bereich erstellen: Formular, Sitzung und ZugriffsschutzEinen Login-Bereich planen und umsetzen: HTML-Formular, serverseitige Anmeldung, Sitzungen, Berechtigungen und zugängliche Bedienung zusammen prüfen.
• Multi Select HTML: Mehrfachauswahl erstellen und Werte auslesenMulti Select HTML mit select multiple umsetzen, alle Werte per FormData.getAll auslesen und Checkboxen als Alternative prüfen. Mit vollständigem Codebeispiel.
• Registrierungsformular Vorlage mit Labels und zugänglichen FehlernKopierbare Registrierungsformular-Vorlage mit E-Mail, Passwort und lokaler Fehlerprüfung. HTML und JavaScript mit klaren Labels, Fokusführung und Backend-Grenzen.
• Select HTML: Auswahlfeld mit label, option und requiredSelect HTML richtig aufbauen: label, option und optgroup, Pflichtauswahl mit required, die Zustände des Felds und ein Prüfablauf bis zum übermittelten Wert.
• Select label HTML: Auswahlfeld dauerhaft beschriftenSelect label HTML richtig verbinden: label for und select id, der Weg vom Label zum zugänglichen Namen und ein Prüfablauf für Auswahl und Pflichtfeld.

Befunde dazu: Formulare & Beschriftungen (15 Regeln) · ARIA & Semantik (15 Regeln)

• 404-Seite einrichten: Statuscode, Vorlage und Rückweg404-Seite einrichten: Apache-Zuordnung mit lokalem Pfad, vollständige HTML-Vorlage, der Weg zurück Etappe für Etappe und ein Abnahmetest für Status und Rückwege.
• Accessible SVG: Symbole, Buttons und Diagramme benennenAccessible SVG umsetzen: Entscheidungsbaum für die richtige Textalternative, Codebeispiele für Statussymbol und Button sowie der Weg vom title-Element zur Ansage.
• Accessible Table: Kopfbezüge umsetzen und nachprüfenAccessible Table bauen: caption, th und scope im vollständigen HTML-Beispiel, der Weg vom th zur angesagten Zelle und der Umbruch bei 320 CSS-Pixeln.
• Bildunterschrift in HTML: figcaption richtig einsetzenBildunterschrift schreiben und mit figure und figcaption einbauen: Entscheidungsbaum für Alt-Text und Unterschrift, HTML- und CSS-Beispiel sowie eine Prüfliste.
• Combobox HTML: select, datalist oder eigene ARIA-ComboboxCombobox in HTML umsetzen: feste Werte mit select, freie Vorschläge mit datalist und die fünf Zustände einer eigenen ARIA-Combobox. Mit Code und Prüfliste.
• Date Picker HTML: Datumsfeld einbauen und ausprobierenHTML Date Picker mit type=date, label, min und max einbauen. Datumsfeld ausprobieren, den Formularwert im Jahr-Monat-Tag-Format prüfen und Muster wählen.
• Drag and Drop HTML: mit Klick- und TastaturalternativeDrag and Drop in HTML: vollständiges Beispiel mit draggable, dragover und drop, die Ereignisfolge im Detail und dieselbe Karte per Button, Touch und Tastatur.
• fieldset und legend in HTML: Formulargruppen benennenfieldset und legend in HTML richtig einsetzen: Radio-Gruppen benennen, Einzel-Labels erhalten, die Gruppe im Accessibility-Baum verfolgen und schmal prüfen.
• Filter auf der Website: Inhalte gezielt filternWebsite-Filter mit HTML und JavaScript: Kategorie, Verfügbarkeit, Trefferzahl und Zurücksetzen. Vollständiges Beispiel, fünf Ergebniszustände, Abnahmeliste.
• Focus Order in HTML: Fokusreihenfolge sinnvoll ordnenFocus Order im HTML ordnen: DOM statt positiver tabindex-Werte. Mit Tastatur-Walkthrough durch ein Menü, Codevergleich und Prüfung bei schmalen Layouts.
• Focus Trap JavaScript: Dialogfokus mit Tab und EscapeFocus Trap in JavaScript umsetzen: Dialogbeispiel mit Tab-Schleife, Escape und Fokus-Rückgabe, die Ereignisfolge an der Grenze und eine Abnahmeliste.
• Focus visible CSS: den Fokus im Formular sichtbar machenMit :focus-visible den Tastaturweg markieren: CSS-Beispiele für outline, ein Entscheidungsbaum für fehlenden Fokus, Forced Colors und eine Prüfmatrix.
• Footer einer Website auf Deutsch: Aufbau und BeispielFooter einer Website auf Deutsch aufbauen: Kontakt, klare Linkgruppen, responsives HTML und CSS. Mit Beispiel, Reflow-Vergleich und Prüfliste für die Vorlage.
• Heading Hierarchy HTML: h1 bis h6 richtig gliedernHeading Hierarchy in HTML aufbauen: Ebenen zuordnen, Code vergleichen, Gestaltung von Struktur trennen und Bausteinen die passende Ebene mitgeben.
• HTML lang attribute: Sprache und Sprachwechsel angebenHTML lang richtig setzen: Hauptsprache am html-Element, BCP-47-Codes und Vererbung an einem vollständigen Beispiel – samt Reichweite der gemeinsamen Vorlage.
• HTML Zeilenumbruch: br, Absätze und CSS richtig einsetzenHTML-Zeilenumbruch mit br setzen, Absätze mit p trennen und lange Texte responsiv umbrechen lassen. Mit Entscheidungsbaum, Codebeispielen und Reflow-Vergleich.
• JavaScript focus visible: Fokus setzen und sichtbar machenJavaScript focus visible erklärt: focus() bewegt den Fokus, :focus-visible entscheidet über die Markierung. Mit Code, Ablauf, Zustandsdiagramm und Prüfweg.
• Popover HTML: natives Beispiel, Zustände und EscapePopover in HTML mit popovertarget öffnen: echtes Beispiel, vollständiger Code, Zustandsdiagramm, Entscheidungsbaum und Abgrenzung zum modalen Dialog.
• prefers-reduced-motion CSS: Bewegung gezielt reduzierenprefers-reduced-motion in CSS umsetzen: vollständiges Beispiel, ruhige Grunddarstellung, Entscheidungsbaum je Bewegungsart und Prüfmatrix aller Bewegungsquellen.
• Pressebereich der Website: Aufbau, Kontakt und DownloadsPressebereich der Website aufbauen: Meldungen, Pressekontakt und Materialien strukturieren. Mit Nutzerweg einer Redaktion, HTML-Beispiel und Verantwortungsablauf.
• Screen Reader Only CSS: sr-only und Fokus richtig lösenScreen Reader Only CSS mit vollständiger sr-only-Klasse: Text visuell verbergen, den Namensweg bis zur assistiven Technik verfolgen und Sprunglinks bei Fokus zeigen.
• Screen Reader Test: Website mit NVDA und VoiceOver prüfenScreen reader test einer Website: echte Schritte für NVDA und VoiceOver, HTML-Reparatur, Prüfplan je Seitenzustand, Abnahmeliste und Grenzen des Website-Scans.
• Semantisches HTML: passende Elemente und SeitenbeispielSemantisches HTML einsetzen: main, nav, article und section auswählen, den Weg vom Element bis zur Bereichsnavigation verfolgen und die Layoutvorlage korrigieren.
• sr-only CSS: Rezept, Sprunglink und sichtbarer Fokussr only CSS als kopierbare Rezeptur: Zusatztext im Linknamen ergänzen, Sprunglinks bei Fokus einblenden, Zustände verstehen und Prüfwege sauber trennen.
• Suchfunktion für die Website: Formular, Index und TrefferSuchfunktion für die Website umsetzen: Suchfeld klar benennen, Inhalte sinnvoll indexieren, Treffer verständlich ausgeben und den vollständigen Suchweg prüfen.
• tabindex in HTML: 0, −1 und native Fokusreihenfolgetabindex in HTML richtig wählen: Entscheidungsbaum für 0 und −1, vollständige Codebeispiele, Wirkung gemeinsamer Komponenten und ein prüfbarer Tastaturweg.
• table in HTML: Kopfzellen, Reflow und ZellnavigationHTML-Tabelle mit table, tr, th, td und caption aufbauen: responsives Beispiel, Kopfbezüge bis zur assistiven Technik und eine Abnahme in sechs Schritten.
• Website-Screenreader-Test: Name, Aktion und ZustandWebsite mit Screenreader testen: Prüfschritte für Buttonnamen, Aktionen und Zustände, funktionierendes HTML-Beispiel, Namensweg je Ebene und klare Scan-Grenzen.
• Website-Suche optimieren: Treffer, Nulltreffer und StatusWebsite-Suche optimieren: beschriftetes Suchfeld, vier Ergebniszustände, verständliche Treffer und Statusmeldungen ohne Fokuswechsel prüfen.

Befunde dazu: Formulare & Beschriftungen (15 Regeln) · Navigation & Bedienung (6 Regeln)

• Accessible Accordion: Zustand, Tastatur und AbnahmeAccessible Accordion mit Button, aria-expanded und hidden bauen: Codebeispiel, Tastaturweg Schritt für Schritt und eine Abnahme in sechs Prüfungen.
• Accessible Button HTML: Name, Zustand und AbnahmeAccessible Button in HTML bauen: natives button-Element, Beispiel mit aria-expanded, der Weg von Name, Rolle und Zustand zum Screenreader und eine Abnahme.
• Accessible Carousel: Folien, Fokus und RotationAccessible Carousel bauen: Codebeispiel mit bedienbaren Schaltern, der Tastaturweg mit seinen Bruchstellen und die Zustände einer automatischen Rotation.
• Accessible Dropdown: Muster wählen und Tastatur prüfenAccessible Dropdown bauen: Entscheidungsweg zwischen select, Disclosure-Navigation, Combobox und Menu-Button, mit Code und Tastaturweg Schritt für Schritt.
• Accessible Modal: dialog, Fokus und Rückkehr prüfenAccessible Modal mit dialog und showModal(): vollständiges Codebeispiel, der Ablauf vom Öffnen bis zur Rückkehr des Fokus und eine Abnahme in sechs Prüfungen.
• Accessible Tabs: Pfeiltasten, Auswahl und PrüfplanAccessible Tabs mit vollständigem Codebeispiel: Panel-Zuordnung, der Unterschied zwischen Fokus und Auswahl und ein Prüfplan je Zustand des Registers.
• Accessible Tooltip: Fokus, Hover und Escape lösenAccessible Tooltip umsetzen: wann ein Tooltip passt, Beschreibung über aria-describedby verknüpfen, Hover erhalten und mit Escape zuverlässig schließen.
• Accordion HTML: details, summary und TastaturwegAccordion in HTML mit details und summary bauen: kopierbares Beispiel, CSS für sichtbaren Fokus, exklusive Gruppen mit name und der Tastaturweg je Taste.
• Button HTML: Typ, Zustand und Beschriftung wählenButton in HTML erstellen: button, submit und reset unterscheiden, den Typ über drei Fragen bestimmen und die Zustände einer Schaltfläche beherrschen.
• Details Summary Accessibility: Zustand und AbnahmeDetails summary accessibility umsetzen: vollständiges HTML-Beispiel, wer den offenen Zustand verwaltet, wann ein anderes Muster passt und die Tastaturprüfung.
• Dialog HTML: modal öffnen, schließen, Fokus zurückgebenDialog in HTML mit showModal(): Codebeispiel, Top Layer und inaktiver Hintergrund, Dialogname, Escape, returnValue und Fokusrückgabe zum Auslöser.
• Dropdown HTML: select, aufklappbare Navigation, ComboboxDropdown in HTML erstellen: select mit label und option, Entscheidungsbaum zum passenden Muster, aria-expanded und ein Tastatur-Rundgang für aufklappbare Menüs.
• Progress Bar HTML: value, max, Name und echte UpdatesProgress Bar in HTML erstellen: value und max richtig setzen, unbekannte Dauer kennzeichnen und Werte aus einer echten Aufgabe per JavaScript aktualisieren.
• Radio Button HTML: name, value, Gruppe und TastaturRadio Button in HTML richtig gruppieren: name, value und required live testen, den Aufbau aus legend, Option und Meldung verstehen und die Pfeiltasten prüfen.
• Tooltip HTML: Hover, Fokus und Escape richtig steuernTooltip in HTML erstellen: vollständiges Beispiel mit aria-describedby, Zustandsdiagramm für Hover, Fokus und Escape sowie sichtbarer Touch-Alternative.

Befunde dazu: Formulare & Beschriftungen (15 Regeln) · ARIA & Semantik (15 Regeln)

• Accessible Breadcrumbs: HTML, aria-current und PrüfungAccessible Breadcrumbs umsetzen: benannter Navigationsbereich, Liste, aria-current, Umbruch im CSS sowie Tastatur- und Screenreader-Prüfung.
• Accessible Hamburger Menu: Zustände, Code und AbnahmeAccessible Hamburger Menu bauen: Menübutton mit aria-expanded, hidden, vier Menüzustände, Escape-Rückweg und eine Abnahmeliste zum Mitprüfen.
• Accessible Link: barrierefreie Links mit HTML umsetzenAccessible Link umsetzen: echtes a-Element mit href, Name aus dem Linkinhalt, sichtbarer Fokus und Zielgröße. Mit Codevergleich und Abnahmeliste.
• Accessible Mega Menu: Gruppen, Tastatur und ReflowAccessible Mega Menu aufbauen: Linkgruppen mit Aufklappbutton, aria-expanded, Escape-Rückweg, gleiche Reihenfolge bei 320 Pixeln und ein Prüfplan.
• Accessible Menu: Muster wählen, bauen und prüfenAccessible Menu umsetzen: Navigation oder Anwendungsmenü unterscheiden, Übersichtslink und Aufklappbutton trennen, Tastaturweg und Prüfmatrix nutzen.
• Accessible Navigation: Ziele, Zustände und FokuswegAccessible Navigation umsetzen: Sprunglink, benannte nav-Bereiche, Aufklappmenü mit aria-expanded und ein Nutzerweg mit Barrieren und Korrekturen.
• Accessible Pagination: Seitenlinks und aria-currentAccessible Pagination umsetzen: echte Seitenlinks, aria-current im Accessibility Tree, sichtbarer Fokus, Umbruch und Orientierung nach dem Wechsel.
• Brotkrümelnavigation: Aufbau, HTML und PrüfungBrotkrümelnavigation aufbauen: Hierarchie festlegen, Ebenen verlinken, aktuelle Seite kennzeichnen, Umbruch bei 320 Pixeln und Ablauf im CMS.
• Dropdown-Menü auf Deutsch: Bedeutung und BauweiseDropdown-Menü auf Deutsch: Ausklappnavigation, Auswahlliste, Combobox und Anwendungsmenü unterscheiden und das passende Bedienmuster wählen.
• Hamburger Menu HTML: Code, Zustände und BreakpointHamburger Menu in HTML, CSS und JavaScript bauen: Menübutton mit aria-expanded, hidden, Escape, vier Zustände am Breakpoint und ein Prüfplan.
• Hamburger Menü erstellen: HTML, CSS und JavaScriptHamburger Menü erstellen mit vollständigem HTML-, CSS- und JavaScript-Beispiel: aria-expanded, hidden, Escape, Tastaturweg und Abnahmeliste.
• Homepage-Navigation aufbauen: Struktur, Links und HTMLHomepage-Navigation klar planen: Bereiche sinnvoll ordnen, verständliche Links benennen und eine gemeinsame HTML-Vorlage mit Fokus und Sprunglink prüfen.
• Keyboard Navigation Accessibility: ohne Maus bedienbarKeyboard Navigation Accessibility prüfen: Tastaturrundgang mit Sprunglink, Untergruppe und Escape, vollständiges HTML-Beispiel und klare Grenzen des Scans.
• Keyboard Navigation JavaScript: Fokus und PfeiltastenKeyboard Navigation mit JavaScript: Ereigniskette vom Tastendruck bis zur Ansage, roving tabindex, Zustandsdiagramm der Werkzeugleiste und Tastaturtest.
• Link HTML: Links mit a und href richtig setzenLink HTML sauber setzen: a und href für Seiten, Abschnitte, Dateien und mailto, mit Entscheidungsbaum, Namensschichten und einer Abnahmeprobe im Browser.
• Link Text Accessibility: Linktexte und zugängliche NamenLink Text Accessibility umsetzen: sichtbaren Text, aria-label und berechneten Namen abgleichen, Kontext richtig einordnen und je Linkvariante passend prüfen.
• Mobile Navigation kostenlos: HTML-Menü für Ihre WebsiteMobile Navigation kostenlos einbauen: HTML, CSS und JavaScript mit Menübutton und Escape, dazu Zustandsdiagramm, Tastaturrundgang und Bedienprobe.
• Mobile Navigation Software für Website-Menüs auswählenMobile Navigation Software vergleichen: Theme-Funktion, WordPress-Navigationsblock oder eigenes HTML, mit Entscheidungsbaum, Breitenvergleich und Abnahme.
• Navigation HTML: nav, Links und aktuelle Seite umsetzenNavigation in HTML aufbauen: nav mit Bereichsnamen, Linkliste, aria-current und Sprunglink, dazu Schichtenmodell, Breitenvergleich und Tastaturprüfung.
• Pagination Plugin: WP-PageNavi einbauen und Ausgabe prüfenPagination-Plugin einbauen: WP-PageNavi im WordPress-Theme mit Fallback, Ablauf und Zuständigkeiten der Integration sowie Prüfmatrix für alle Seitenzustände.
• Pagination Software für Websites richtig auswählenPagination Software nach Datenquelle auswählen: WordPress-Funktion, eigene Seitenlinks oder DataTables, mit Entscheidungsbaum, Nutzerweg und Prüffällen.
• Skip-Link im HTML: Code, sichtbarer Fokus und TastaturtestSkip-Link im HTML einbauen: passendes Fragmentziel, sichtbar bei Fokus, der genaue Ablauf beim Aktivieren und eine Abnahmeprobe für den echten Fokuswechsel.
• WCAG Navigation prüfen: Tastatur, Sprunglink, KonsistenzNavigation nach WCAG 2.2 prüfen: Kriterien zuordnen, konsistente Vorlage verstehen, Prüfumfang eines Scans einordnen und sechs Kriterien selbst abnehmen.
• Website Navigation Software auswählen und einbindenWebsite Navigation Software passend auswählen: CMS, HTML-Komponente und Scanner unterscheiden. Mit vollständigem Beispiel, Tastatur-Rundgang und Abnahme.

Befunde dazu: Navigation & Bedienung (6 Regeln) · ARIA & Semantik (15 Regeln)

• A11y Validator: Barrieren prüfen und Befunde einordnenA11y Validator einsetzen: was ein automatischer Prüflauf im Accessibility Tree entscheiden kann, wie Sie eine Fundstelle im HTML beheben und wer sie abnimmt.
• Accessibility Test online: URL prüfen, Zustände abdeckenAccessibility Test online starten: was ein URL-Check im geladenen Zustand findet, wie Sie eine Fundstelle beheben und welche Zustände Sie selbst prüfen.
• ARIA Checker: Namen, Rollen und Zustände prüfenARIA Checker einsetzen: welche ARIA-Fehler ein Werkzeug im Accessibility Tree entscheidet, wie Name und Zustand beim Screenreader ankommen und was Sie testen.
• aria-hidden prüfen: verborgene Fokusziele findenaria-hidden richtig einsetzen: HTML-Ausschnitt lokal prüfen, verborgene Fokusziele erkennen und zwischen aria-hidden, hidden und inert sicher entscheiden.
• ARIA Validator: Rollen, Werte und Zustände prüfenARIA Validator einsetzen: Rollen und Attributwerte im Quelltext prüfen, Verweise kontrollieren und den aufgeklappten Zustand gezielt selbst nachtesten.
• Automated Accessibility Testing mit Playwright und axeAutomated Accessibility Testing einrichten: Seitenzustände mit Playwright herstellen, axe-Regeln ausführen, Berichte einordnen und Grenzen sauber trennen.
• Color Contrast Checker Website: URL prüfen, CSS behebenColor Contrast Checker für die ganze Website: gerechnete Farbpaare per URL finden, den Wert im gemeinsamen CSS-Token beheben und Bilder gesondert prüfen.
• CSS Accessibility Checker: Stilregeln auf Barrieren prüfenCSS Accessibility Checker lokal nutzen: Risikomuster für Fokus, Überlauf, Umbruch und Reihenfolge finden, die Wirkung im Browser nachstellen und die Grenzen des Checks kennen.
• CSS Contrast Checker: Farbpaar berechnen und einordnenCSS Contrast Checker für Text und Hintergrund: Hex-Farben lokal berechnen, den passenden WCAG-Grenzwert bestimmen und die CSS-Korrektur selbst abnehmen.
• Cypress Accessibility Testing: axe und TastaturwegeCypress Accessibility Testing einrichten: cypress-axe nach jeder Aktion erneut ausführen und mit cy.press() echte Tab-Übergänge und Fokusziele prüfen.
• Heading Hierarchy Checker: Ebenensprünge im HTML findenHeading Hierarchy Checker für h1 bis h6: Überschriftenfolge lokal auslesen, Ebenensprünge einordnen und die Ursache in der gemeinsamen Vorlage beheben.
• Heading Structure Checker: h1 bis h6 auslesen und prüfenHeading Structure Checker: HTML einfügen, h1 bis h6 auslesen, Ebenenfolgen im Inhaltskontext beurteilen und die Gliederung mit dem Screenreader abnehmen.
• HTML Accessibility Checker: Code lokal untersuchenHTML Accessibility Checker für Ausschnitte: fehlende alt-Attribute, doppelte IDs und ins Leere zeigende Beschriftungsziele finden und die Ursache beheben.
• HTML Accessibility Test: Barrieren finden und nachprüfenHTML Accessibility Test konkret: Feldnamen im Accessibility-Baum verfolgen, die Prüfmethode je Seitenzustand planen und die Korrektur selbst abnehmen.
• HTML Accessibility Validator richtig einsetzenHTML Accessibility Validator: Was der W3C-HTML-Check, ein Barriere-Scan und Ihr Urteil je beantworten – mit Codebeispiel und Ablauf bis zur Nachprüfung.
• HTML Heading Checker: Überschriften im Code prüfenHTML Heading Checker: h1 bis h6 lokal auflisten, Ebenensprünge einordnen, die passende Ebene bestimmen und die Überschriftenliste am Screenreader abnehmen.
• HTML-Validator nutzen: prüfen und Fehler korrigierenHTML-Validator praktisch: mit dem W3C Nu Checker eine URL prüfen, doppelte IDs an der Vorlage beheben und Meldungen bis zur dokumentierten Abnahme führen.
• HTML Validator und Accessibility zusammen prüfenHTML Validator und Accessibility: warum gültiges Markup einen falschen Feldnamen durchreicht, wie Sie ihn finden und welche Prüfung je Zustand greift.
• Image Alt Checker: Bildzweck und Alternativtext prüfenImage Alt Checker mit Entscheidungsweg: Bildzweck bestimmen, den passenden alt-Wert setzen, Bildlinks benennen und die Freigabe an der Seite abnehmen.
• React Accessibility Checker: JSX, Axe und Browser-TestReact Accessibility Checker aufsetzen: JSX-Linting, useId gegen doppelte IDs, Playwright mit Axe und eine Prüfmatrix über vier Komponentenzustände.
• Selenium Accessibility Testing mit axe: Test und FixSelenium Accessibility Testing mit JavaScript und axe: Zustand öffnen, Nachrichtenfolge verstehen, Laufzustände unterscheiden und ein fehlendes Label beheben.
• Semantic HTML Checker: Struktur im HTML untersuchenSemantic HTML Checker: HTML lokal einfügen, das passende Strukturelement bestimmen, benannte Regionen erzeugen und die Lesereihenfolge schmal prüfen.
• Storybook Accessibility Testing einrichten und nutzenStorybook Accessibility Testing mit a11y-Addon, Vitest und play: einen namenlosen Button beheben, Zustände als Stories planen und den CI-Fehler aktivieren.
• WCAG 2.2 Checkliste: A und AA praktisch prüfenWCAG 2.2 Checkliste mit bestehenden Anforderungen, den sechs neuen A-/AA-Kriterien, Codebeispiel, Reflow-Vergleich, Reihenfolge nach Aufwand und Abnahme.
• WCAG-Audit-Tool: Scan, Befunde und NachtestWCAG-Audit-Tool richtig einsetzen: Prüfumfang festlegen, axe-Berichte exportieren, Befunde bis zur Abnahme übergeben und Prüfrunden vergleichbar halten.
• Web Accessibility Audit: Umfang, Befunde, NachprüfungWeb Accessibility Audit planen: Prüfumfang festlegen, Befunde belegen, Verantwortung übergeben und die Korrektur mit einer Abnahmeliste selbst nachprüfen.
• Web Accessibility Checklist: Zustände statt Seiten prüfenWeb Accessibility Checklist mit Tastatur-Rundgang, Prüfmatrix je Oberflächenzustand, HTML-Beispiel und sechs Kontrollen, die Sie direkt selbst durchführen.
• Website Accessibility Audit: Umfang, Befunde, NachtestWebsite Accessibility Audit planen: Prüfstand je Seitengruppe, belegbare Befunde, Zuständigkeiten im Korrekturablauf und Priorisierung nach Aufwand und Wirkung.
• Website Accessibility Checklist für die ReleaseprüfungWebsite Accessibility Checklist für das Release: Nutzerweg mit Hindernissen, zehn Prüfkontrollen und ein nachvollziehbarer Vermerk für die Freigabe.
• Website-Analyse: Beispiel mit Befunden und MaßnahmenWebsite-Analyse als Beispiel: erfundene Befunde, HTML-Korrektur, Befundverteilung je Kategorie, Verlauf über sechs Prüfrunden und eine nachvollziehbare Nachprüfung.
• Website-Analyse-Software: Nutzung, Tempo oder Barrieren?Website-Analyse-Software auswählen: Webanalyse, Performance und Barrierefreiheit trennen, die Prüfkette vom Browser zur Fundstelle verstehen, Befunde einordnen.
• Website-Audit-Software: welcher Zustand wird geprüft?Website-Audit-Software auswählen: welches Werkzeug welchen Seitenzustand erreicht, wie aus einer Meldung ein Arbeitsauftrag wird und wer den Befund abnimmt.
• Website HTML Validator: was er prüft und was nichtWebsite mit dem HTML Validator prüfen: ausgelieferte Antwort und Browserzustand unterscheiden, eine unzulässige Listenstruktur korrigieren und den Stand nachweisen.

Befunde dazu: ARIA & Semantik (15 Regeln) · Navigation & Bedienung (6 Regeln)