SuperX barrierefrei: Unterschied zwischen den Versionen

Version vom 18. März 2026, 12:52 Uhr

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). Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web

Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026

Testergebnisse nach WCAG 2.2 gem. ARC-Toolkit (V. 5.7.10)	Login-Seite	Portlet-Seite(nach Login) (index.jsp)	Menü-Seite (nach Klick auf Standardberichte) (menuhtml.xsl und submenu_html.xsl)	Abfragen-Seite(nach Themenwahl)	Masken-Seite(maske_html.xsl)	Tabellen-Seite(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	--	--	--	vorbereitet	--

Login-Seite mit Testergebnissen

Login-Seite
ARC-Testergebnis für Login-Seite

Portlet-Seite mit Testergebnissen

Portlet.jpg

Portlet-Seite
ARC4Portlet.jpg

ARC-Testergebnis für Portlet-Seite

Menü-Seite mit Testergebnissen

Menü-Seite
ARC-Testergebnis für Menü-Seite

Abfragen-Seite mit Testergebnissen

Abfragen-Seite
ARC-Testergebnis für Abfragen-Seite

Masken-Seite mit Testergebnissen

Masken.jpg

Masken-Seite
ARC4Masken.jpg

ARC-Testergebnis für Masken-Seite

Tabellen-Seite mit Testergebnissen

Tabellen-Seite
ARC-Testergebnis für Tabellen-Seite

Barrierefreiheit-Detailvorgaben

1. Vorgaben zur WAHRNEHMBARKEIT > Level 1	SuperX-Status, 05.2025
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen.	Partiell ok. Rest in Bearbeitung.
1.2 Textgröße
Text mit mind. 10-12px anbieten.	ok. (sh. sx_common.css)
Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei Textverdoppelung und Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)	ok.
1.3 Kontraste
Kontrastverhältnis sichern. (gem. WCAG 2.0).	ok.
1.4 ARIA-Attribute (Accessible Rich Internet Applications)
ARIA-Attribute für Screenreader einsetzen	Partiell ok. Rest in Bearbeitung.
2. Vorgaben zur BEDIENBARKEIT > Level 2 (vgl. Beispiele in c't 2022, Heft 15, S. 165)
Bedienbarkeit per Tastatur ermöglichen.	Partiell ok. Rest in Bearbeitung.
Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:	Partiell ok. Rest in Bearbeitung.
Maus- und Tastaturinteraktionen (hover/focus) darstellen.	ok.
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei".	ok.
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.	In Bearbeitung.
Zeitdruck und Datenverlust beim Beenden einer Session vermeiden.	In Bearbeitung.
3. Vorgaben zur VERSTÄNDLICHKEIT > Level 3 (vgl. Beispiele in c't 2022, Heft 15, S. 166)
Sprache angeben zum besseren Artikulieren durch Screeenreader.	Partiell ok. Rest in Bearbeitung.
Textalternativen integrieren.	ok (sh. Tooltips)
Eingabefelder mit ARIA-Label beschriften.	Partiell ok. Rest in Bearbeitung.
Formularabschnitte beschriften.	ok.
Clientseitige Validierung der Eingaben vor dem Absenden.	ok.
4. Vorgaben zur ROBUSTHEIT > Level 4
Für sauberes HTML sorgen.	ok.

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

@@ Zeile 80: / Zeile 80: @@
 ===Barrierefreiheit-Detailvorgaben===
+<!--
 <table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">1. Vorgaben zur WAHRNEHMBARKEIT = Level 1</span>'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit '''Alternativtexte'''n versehen:
@@ Zeile 113: / Zeile 114: @@
 (sh. Beispiel in c't 2022, Heft 15, S. 166)
 </li> </ul></div></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Clientseitige Validierung der Eingaben</strong> vor dem Absenden:<div><ul><li>z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. </li><li> z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" <br>(sh. Beispiel in c't 2022, Heft 15, S. 166)
-</li></ul></div></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"> <span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''4. Vorgaben zur ROBUSTHEIT &gt; Level 4<br>'''</span></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td></tr></table>
+</li></ul></div></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"> <span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''4. Vorgaben zur ROBUSTHEIT &gt; Level 4<br>'''</span></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td></tr></table>-->
+<div><table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''1. Vorgaben zur WAHRNEHMBARKEIT &gt; Level 1<br>'''</span></th><th>&nbsp;SuperX-Status, 05.2025</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen.<br class="mw_emptyline"> </td><td>Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße'''</th><th>&nbsp;</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. <strong>10-12px</strong> anbieten.</td><td> ok.
+(sh. sx_common.css)
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ordentliches <strong>Layout</strong> (Wort-, Zeilenabstände) sicherstellen, auch <strong>bei</strong> <strong>Textverdoppelung und</strong> <strong>Responsivität:</strong> von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</td><td> ok.<br class="mw_emptyline"></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th><th>&nbsp;</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern.
+(gem. WCAG 2.0).
+</td><td>ok.</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''</th><th>&nbsp;</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''2. Vorgaben zur BEDIENBARKEIT &gt; Level 2'''</span>  <span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">(vgl. Beispiele in c't 2022, Heft 15, S. 165)</span>
+</th><th>&nbsp;</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">'''Bedienbarkeit per Tastatur''' ermöglichen. </td><td>Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: </td><td>Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">'''Maus- und Tastaturinteraktionen'''  (hover/focus) darstellen. <br></td><td>ok. </td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Downloadlinks</strong> ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei".</td><td>ok.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites.</td><td>ok.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Modenen<strong> Spamschutz </strong>wie<strong> "</strong>reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.</td><td>In Bearbeitung.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td><td>In Bearbeitung.</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT &gt; Level 3</span></strong>  <span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;"><span style="color: #000080;" data-mce-style="color: #000080;">(vgl. Beispiele in c't 2022, Heft 15, S. 166)</span></span></th><td>&nbsp;</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><strong>Sprache</strong> angeben zum besseren Artikulieren durch Screeenreader.</span></td><td> Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren.</td><td>ok
+(sh. Tooltips)
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>mit ARIA-Label beschriften. </td><td>Partiell ok.
+Rest in Bearbeitung.
+</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften.</td><td>ok.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Clientseitige Validierung der Eingaben</strong> vor dem Absenden. </td><td>ok.</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''4. Vorgaben zur ROBUSTHEIT &gt; Level 4<br>'''</span></th><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen.</td><td>ok.</td></tr></table></div>
 ===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