SuperX barrierefrei

Wie barrierefrei ist SuperX?

Barrierefreiheit - Geltende Vorschriften

Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:

• Barrierefreie Informationstechnik-Verordnung (BITV),
  • mit Neuauflage von 2019,
  • mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
• Web Content Accessibility Guidelines (aktuell WCAG 2.2) ,
  • herausgegeben von der Web-Standardisierungsorganisation W3C bzw.
  • deren Arbeitsgruppe Web Accessability Initiative (WAI)
• Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen,
  • es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.

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

• Wahrnehmbarkeit
• Bedienbarkeit
• Verständlichkeit
• Robustheit

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

Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 02.2026

Testergebnissegem. WCAG 2.2 gem.ARC-Toolkit (V. 5.7.10)	Login-Dialog	Portlet-Seite(nach Login) (index.jsp)	Menü-Seite (nach Klick auf Standardberichte) (menuhtml.xsl und submenu_html.xsl)	Abfragen-Seite(nach Themenewahl)	Masken-Dialog(maske_html.xsl)	Tabellen-Dialog(tabelle_html.xsl)
Seitennavigation und Sprache	ok	--	--	ok	--	ok
Tastaturbedienbarkeit, Fokusreihenfolge	ok	ok	ok	ok	ok	ok
Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert	ok	ok	ok	ok	ok	ok
Pflichtfeldkennzeichnung	ok	--	--	--	ok	--
Textwiederholung (repetitive content)	ok	ok	ok	ok	ok	ok
Autocomplete	ok	--	--	--	--	--
Struktur und Semantik	ok	ok	ok	ok	ok	ok
Usability	ok	ok	ok	ok	--	ok
Fehlermeldung	vorbereitet	--	--	--	--	--

Barrierefreiheit-Detailvorgaben mit Realisierungsgrad in SuperX, Stand 02.2026

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1	Realisierungsgrad	Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen: jedem <img> ein <alt>-Attribut hinzufügen,</alt> falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <imgsrc="..." alt=""> </img_src="..."> Sonderfall: inline svg	ok
Videos mit Untertiteln versehen: sh. Beispiel in c't 2022, Heft 14, S. 137	irrrelevant für SuperX-UI
1.2 Textgröße
Text mit mind. 10-12px anbieten.	ok, vgl.: sx_common.css (mit font-size: 10-12px)
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)	ok	WAVE (Browsererweiterung) Color Contrast Analyzer Color Contrast Checker (zum Messen von Farbwerten)
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	Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)
1.4 ARIA-Attribute (*)
(*) Accessible Rich Internet Applications ARIA-Attribute für Screenreader einsetzen	ok
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)	Klärungsbedarf
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)	Klärungsbedarf (sx-relevant?)	Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)
Die Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.	ok
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"	ok
Jeden größeren Inhaltsblock ("landmark") mit: Überschrift und/oder aria-label bzw. aria-labelledeby versehen.	Klärungsbedarf (volllständig?)
Suchfunktionen integrieren in komplexe Websites,	ok
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.	irrrelevant für SuperX-UI	sh. ct.de/yxcd
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.	Klärungsbedarf (vollständig?)
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	ok
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	ok
Eingabefelder beschriften: mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" title="Schließen">X</button> oder <label> Ihre Mail <input type="email" name="email"> </label>	ok
Formularabschnitte beschriften: z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten </fieldset></legend> (sh. Beispiel in c't 2022, Heft 15, S. 166)	Klärungsbedarf (vollständig?)
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)	Klärungsbedarf (vollständig?)
4. Vorgaben zur ROBUSTHEIT > Level 4
Für sauberes HTML sorgen.	ok	Nu Validator - https:/validator.nu: prüft statisches HTML (nicht jedoch js-gerendertes HTML), interpretiert und moniert HTML-Regeln. Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. (sh. ct.de/yxcd)

Literatur

• Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff
• Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff