Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 31: Zeile 31:
</td><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th></tr></table>
</td><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th></tr></table>


==== Login-Seite mit Testergebnissen====
'''Login-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}
<!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}
{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}-->
{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}-->
<gallery>
<gallery>
Image:Login.jpg|'''Login-Seite'''
Login.jpg|'''Login-Seite'''
Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''
ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''
</gallery>
</gallery>


====Portlet-Seite mit Testergebnissen====
'''Portlet-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}
<!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}-->
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}-->
<gallery>
<gallery>
Image:Portlets.jpg|'''Portlet-Seite'''
Portlets.jpg|'''Portlet-Seite'''
Image:ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''
ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''
</gallery>
</gallery>


====Menü-Seite mit Testergebnissen====
'''Menü-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}
<!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}
{{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}-->
{{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}-->
<gallery>
<gallery>
Image:Menue.jpg|'''Menü-Seite'''
Menue.jpg|'''Menü-Seite'''
Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''
ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''
</gallery>
</gallery>


====Abfragen-Seite mit Testergebnissen====
'''Abfragen-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}
<!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}-->
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}-->
<gallery>
<gallery>
Image:Abfragen.jpg|'''Abfragen-Seite'''
Abfragen.jpg|'''Abfragen-Seite'''
Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
</gallery>
</gallery>


====Masken-Seite mit Testergebnissen====
'''Masken-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}
<!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}
{{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}-->
{{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}-->
<gallery>
<gallery>
Image:Maske.jpg|'''Masken-Seite'''
Maske.jpg|'''Masken-Seite'''
Image:ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''
ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''
</gallery>
</gallery>


====Tabellen-Seite mit Testergebnissen====
'''Tabellen-Seite mit Testergebnissen:'''
<!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}
<!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}
{{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}-->
{{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}-->
<gallery>
<gallery>
Image:Tabelle.jpg|'''Tabellen-Seite'''
Tabelle.jpg|'''Tabellen-Seite'''
Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
</gallery>
</gallery>



Aktuelle Version vom 18. März 2026, 14:03 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-SeitePortlet-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 Spracheok----ok--ok
Tastaturbedienbarkeit, Fokusreihenfolgeokokokokokok
Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wertokokokokokok
Pflichtfeldkennzeichnung ok------ok--
Textwiederholung (repetitive content) ok ok ok ok okok
Autocompleteok----------
Struktur und Semantikokokokokokok
Usabilityokokokok--ok
Fehlermeldung vorbereitet------vorbereitet--

Login-Seite mit Testergebnissen:

Portlet-Seite mit Testergebnissen:

Menü-Seite mit Testergebnissen:

Abfragen-Seite mit Testergebnissen:

Masken-Seite mit Testergebnissen:

Tabellen-Seite mit Testergebnissen:

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