Menü
Menü Barrierefreiheitnach WCAG
Anbei eine Auflistung, zum Prüfen von Inhalten, Funktionen und Design nach WCAG.
Name der Seite
Seitentitel
Jede Seite braucht einen klaren Titel. Pflege den Seitentitel (für Redakteur) + Webseiten-Namen (für techn. Entwicklung für SEO).
Redaktion | Entwicklung
Bescheibung
Link
Linktexte eindeutig formulieren. „Mehr lesen“ verrät nicht, wohin – sag genau, was mich erwartet. Auch bei Bildlinks.
Redaktion
strukturieren
Überschriften
Überschriften logisch gliedern. Keine H3 vor H2. H1 kann mehrmals vorkommen, wenn sie die Struktur der Seite klar macht (aus SEO-Sicht sollte die H1 nur einmal vorkommen).
Redaktion | Design | Entwicklung
Farben
Text
Keine Infos nur mit Hilfe von Farben. Nicht jeder kann Farben sehen. Deine Seite muss auch in Graustufen vollständig verständlich bleiben.
Redaktion | Design
Button, Formular ...
Bezeichnung
Beschriftungen von Navigation und Interaktion (Buttons, Icons, Formularfelder etc.) sollten auf der ganzen Seite immer gleich bleiben.
Redaktion | Design
im Text
Fremdsprache
Fremdsprache im Text? lang-Attribut setzen. So liest der Screenreader die Aussprache richtig.
Redaktion
Wer hats gesagt?
Zitat
Zitate richtig auszeichnen. Mit <blockquote> für Blockzitate oder <q> für Inline-Zitate.
Redaktion | Entwicklung
Stopp!
Animationen
Animationen über 5 Sekunden müssen stoppbar sein – außer sie sind zwingend nötig, z. B. für Sicherheitsanzeigen.
Design | Entwicklung
Untertitel
Video live
Live-Videos mit Ton brauchen immer Untertitel. Immer 1:1 synchron.
Redaktion
Interaktiv
Kontrast
Interaktive oder wichtige Elemente müssen sich klar abheben – der Kontrast zum Hintergrund muss mind. 3:1 sein.
Design
nur mit Fingern?
Touch
Bei Aktionen wie Drücken und Ziehen auf dem Bildschirm (Bedienung einer Map) braucht es Alternativen für assistive Technologien.
Design | Entwicklung
formatieren
Text
Absätze und Hervorhebungen richtig. Nutze <p> für Textblöcke, <em> für Betonung und <strong> für Wichtiges. Nutze Formatierungen sparsam und sinnvoll.
Redaktion | Entwicklung
Verstanden?
Fehlermeldungen
Fehlermeldungen sollten klar erklären, was schiefgelaufen ist und wie ich es beheben kann.
Design | Entwicklung
rückgängig
Transaktion
Bei Transaktionen mit Risiken muss ich bestätigen oder rückgängig machen können.
Design | Entwicklung
wohin?
Link
Links klar beschriften. Beschreibe wohin es geht und um welchen Inhalt es sich handelt.
Redaktion | Entwicklung
Gut sichtbar?
Kontrast
Texte müssen sich deutlich vom Hintergrund abheben. Laut WCAG gilt: mindestens 4,5:1 Kontrast bei Schrift unter 24 px, ab 24 px reicht 3:1.
Design | Entwicklung
Ton an?
Video und Audio
Videos (bei denen kein Ton vorhanden ist) und Audios, welche Informationen beinhalten, benötigen einen Alternativtext.
Redaktion | Entwicklung
mehr als eines
Menü
Biete mehrere Wege, neben dem Hauptmenü, zum Inhalt an. z. B. über eine Suche oder eine Sitemap.
Design | Entwicklung
Text darin?
Bilder
Wichtige Infos nicht als Text in Bilder schreiben. Screenreader können sie nicht lesen, Nutzer können Textgröße nicht ändern. Ausnahme: Bei Dokumentationsbildern.
Redaktion | Design
Error?
Fehlermeldungen
Fehlermeldungen müssen klar erkennbar sein. Nicht nur per Farbe, sondern auch den Text, für Screenreader.
Design | Entwicklung
Rahmen?
Fokus
Interaktive Elemente wie Buttons und Links brauchen sichtbare Fokusrahmen.
Design | Entwicklung
Videos mit Ton?
Video Untertitel
Immer Untertitel dazumachen. Ausnahme: Wenn das Video nur ein Audio-Ersatz für Text ist - dann klar als solches kennzeichnen.
Redaktion
Nur schütteln?
Gestensteuerung
Bewegungssteuerungen brauchen Alternativen, damit auch assistive Technologien sie nutzen können.
Design | Entwicklung
schenk Zeit
Zeitlimit
Meldungen nicht automatisch entfernen. Zeitlimits nur, wenn nötig und dann verlängerbar (außer bei Auktionen).
Design | Entwicklung
Konsistenz
Buttons Icons
Beschriftungen von Interaktionselementen (Buttons, Icons und Formulare ) sollten immer einheitlich benannt werden.
Redaktion | Design
Bunt = Grau
Farben
Verlasse dich nicht auf Farben. viele Menschen sehen Farben unterschiedlich. Nutze zusätzliche Hinweise, damit deine Seite auch in Graustufen verständlich bleibt.
Design
Was ist auf dem Bild zu sehen?
Bild bescheiben
Ist ein Bild informativ? Muss ein Alternativ-Text eingefügt werden. Damit Screenreader (Lesegeräte für Blinde) den Inhalt des Bildes verstehen.
Redaktion
Bling Bling?
Animationen
Keine schnell blinkenden Elemente – vermeide flackernde Buttons oder hektische GIFs.
Redaktion | Design | Entwicklung
geordnet, nicht geordnet
Listen
Listen richtig markieren. Nutze <ul> (Aufzählung), <ol> (Nummerierung) oder <dl> (Begriffe) – je nach Zweck.
Redaktion | Entwicklung
groß genug?
Buttons
Buttons sollten mindestens 24 × 24 Pixel groß sein, damit sie leicht und sicher klickbar sind.
Design | Entwicklung
Dekoration?
Bild nutzen
Ist das Bilder nur deko? Ist kein Beschreibungstext nötig. Screenreader überspringen sie dann. Optimal wäre, Bilder welche nur dekorativ sind, komplett wegzulassen.
Redaktion | Design
Sinn und Zweck
Überschriften
Überschriften sollen den kommenden Inhalt beschreiben. Sie beschreiben demnach genau Inhalt und Zweck. Formularfelder benötigen ebenso sinnvolle Bezeichnungen.
Redaktion | Entwicklung
versteckt?
Link
Links beschreiben mit versteckten Texten? Diese müssen mit dem sichtbaren Linktext starten. Beispiel: „Mehr erfahren“ + ARIA: „Mehr erfahren über Barrierefreiheit“.
Redaktion | Entwicklung
gleiche Position
Menü
Die Navigation sollte immer an derselben Stelle stehen – etwa: einmal oben links, immer oben links.
Design
Audiodeskription
Video Text
Videos mit Ton brauchen Textbeschreibung oder Audio-Beschreibung - außer sie ersetzen Text und sind klar als Ersatz gekennzeichnet.
Redaktion
Was muss ich eingeben?
Formular
Eingabefelder brauchen Anleitungen. Zum Beispiel sichtbare Labels, damit deutlich ist, was einzugeben ist.
Design | Entwicklung