Barrierefreiheit - Detailvorgaben

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen: jedem ein -Attribut hinzufügen, falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): src="..." alt=""> *Sonderfall: inline svg
Videos mit Untertiteln versehen: sh. Beispiel in c't 2022, Heft 14, S. 137
1.2 Textgröße
Text mit mind. 10-12px anbieten.
Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei: Textverdoppelung Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)
1.3 Kontraste
Kontrastverhältnis sichern; lt WCAG 2.0: für Fließtext: 4,5: 1 für Überschriften: 3:1 Problemfall: Text über Bildern
*1.4 ARIA-Attribute ()**
() Accessible Rich Internet Applications ARIA-Attribute für Screenreader* einsetzen
2. Vorgaben zur BEDIENBARKEIT = Level 2
Bedienbarkeit per Tastatur ermöglichen dazu: Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)
Tablisten-Handling (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected. (sh. Erläuterung in c't 2022, Heft 15, S. 165)
Die Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"
Jeden größeren Inhaltsblock ("landmark") mit: Überschrift und/oder aria-label bzw. aria-labelledeby versehen.
Suchfunktionen integrieren in komplexe Websites,
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.
3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3
Sprache angeben zum besseren Artikulieren durch Screeenreader: lang="de" im -Element oder nur für Textblöcke oder nur für einzelne Wörte
Textalternativen integrieren: in einfacher Sprache, in Gehörlosensprache, Worterklärungen oder Abkürzungsumschreibungen. z.B. Tooltip erzeugen sh. Beispiel in c't 2022, Heft 15, S. 166
Eingabefelder beschriften: mit aria-label: oder Ihre Mail
Formularabschnitte beschriften: z.B. Nutzung von zur Beschriftung von -Formularabschnitten (sh. Beispiel in c't 2022, Heft 15, S. 166)
Clientseitige Validierung der Eingaben vor dem Absenden: z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" (sh. Beispiel in c't 2022, Heft 15, S. 166)
4. Vorgaben zur ROBUSTHEIT = Level 4
Für sauberes HTML sorgen.