Menü
Menü Barrierefreiheitnach WCAG
Anbei eine Auflistung, zum Prüfen von Inhalten, Funktionen und Design nach WCAG.
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
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
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
Konsistenz
Buttons Icons
Beschriftungen von Interaktionselementen (Buttons, Icons und Formulare ) sollten immer einheitlich benannt werden.
Redaktion | Design
Ton an?
Video und Audio
Videos (bei denen kein Ton vorhanden ist) und Audios, welche Informationen beinhalten, benötigen einen Alternativtext.
Redaktion | 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
Wer hats gesagt?
Zitat
Zitate richtig auszeichnen. Mit <blockquote> für Blockzitate oder <q> für Inline-Zitate.
Redaktion | Entwicklung
Bescheibung
Link
Linktexte eindeutig formulieren. „Mehr lesen“ verrät nicht, wohin – sag genau, was mich erwartet. Auch bei Bildlinks.
Redaktion
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
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
geordnet, nicht geordnet
Listen
Listen richtig markieren. Nutze <ul> (Aufzählung), <ol> (Nummerierung) oder <dl> (Begriffe) – je nach Zweck.
Redaktion | Entwicklung
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
Audiodeskription
Video Text
Videos mit Ton brauchen Textbeschreibung oder Audio-Beschreibung - außer sie ersetzen Text und sind klar als Ersatz gekennzeichnet.
Redaktion
wohin?
Link
Links klar beschriften. Beschreibe wohin es geht und um welchen Inhalt es sich handelt.
Redaktion | Entwicklung
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
Untertitel
Video live
Live-Videos mit Ton brauchen immer Untertitel. Immer 1:1 synchron.
Redaktion
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
im Text
Fremdsprache
Fremdsprache im Text? lang-Attribut setzen. So liest der Screenreader die Aussprache richtig.
Redaktion
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