SuperX barrierefrei

Wie barrierefrei ist SuperX?

Geltende Vorschriften

Die Verpflichtung zur Barrierefreiheit von Websites gilt derzeit (noch) nur für Bundesbehörden. Sie geht hervor aus der

• Barrierefreie Informationstechnik-Verordnung (BITV),
  • mit Neuauflage von 2019,
  • mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
• Web Content Accessibility Guidelines (WCAG 2.0),
  • herausgegeben von der Web-Standardisierungsorganisation W3C bzw.
  • deren Arbeitsgruppe Web Accessability Initiative (WAI).

Barrierefreiheit

Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen. Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:

• Wahrnehmbarkeit
• Bedienbarkeit
• Verständlichkeit
• Robustheit

Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).

Grad der Barrierefreiheit von SuperX

1. Vorgaben zur WAHRNEHMBARKEIT > Level 1
1.1. Textalternativen für audiovisuelle Inhalte	SuperX to do; 05.2024	Tools/Hilfen
Bilder mit Alternativtexten versehen	prüfen/ergänzen: -Attribut für jedes <img /> <img /> falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=" "> <img_src="..." alt=""> </img_src="..."> Sonderfall: inline svg	"web Developer" (Bowsererweitertung)
Videos mit Untertiteln versehen	prüfen/ergänzen: sh. Beispiel in c't 2022, Heft 14, S. 137	"HappyScribe" (zur autom. Untertitelerzeugung)
1.2 Textgröße
Text mit mind. 10-12px anbieten	prüfen/umsetzen
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)	prüfen/umsetzen
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	prüfen/umsetzen	"WAVE" (Browsererweiterung) Color Contrast Analyzer Color Contrast Checker (zum Messen von Farbwerten)
1.4 ARIA-Attribute (*)
(*) Accessible Rich Internet Applications ARIA-Attribute für Screenreader einsetzen	prüfen/ergänzen
2. Vorgaben zur BEDIENBARKEIT > Level 2
Bedienbarkeit per Tastatur ermöglichen durch: Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren	prüfen/umsetzen sh. Beispiel in c't 2022, Heft 15, S. 165
Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden: HTML-Attribut tabindex setzen	prüfen/umsetzen
Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: "hover" (für Mausinteraktionen), "focus" (für Tataturbedienung).	prüfen/umsetzen
Ggf. css-outline als Orientierungshilfe nutzen.	prüfen/umsetzen
Ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; relevant z.B. für: modale Dialoge, Einverständniserklärungen, wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.	prüfen/umsetzen 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.	prüfen/umsetzen sh. Erläuterung in c't 2022, Heft 15, S. 165	Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)
Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.	prüfen/umsetzen
Jeden größeren Inhaltsblock ("landmark") mit Überschrift und/oder aria-label bzw. aria-labelledeby versehen.	prüfen/umsetzen
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"	prüfen/umsetzen
Suchfunktionen integrieren in komplexe Websites,	prüfen/umsetzen
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.	prüfen/umsetzen	(sh. ct.de/yxcd)
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.	prüfen/umsetzen
3. Vorgaben zur VERSTÄNDLICHKEIT > Level 3
Sprache angeben zum besseren Artikulieren durch Screeenreader	prüfen/umsetzen: 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.	prüfen/umsetzen: z.B. Tooltip erzeugen mit: ARIA>/abbr>
Eingabefelder beschriften.	prüfen/umsetzen: z.B.
'
4. Vorgaben zur ROBUSTHEIT > Level 4