Zuletzt bearbeitet vor einem Monat
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(2 dazwischenliegende Versionen desselben Benutzers werden 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====
<!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}
{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}-->
<gallery>
Image:Login.jpg|'''Login-Seite'''
Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''
</gallery>


====Portlet-Seite mit Testergebnissen====
<!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}-->
<gallery>
Image:Portlets.jpg|'''Portlet-Seite'''
Image:ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''
</gallery>
====Menü-Seite mit Testergebnissen====
<!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}
{{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}-->
<gallery>
Image:Menue.jpg|'''Menü-Seite'''
Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''
</gallery>
====Abfragen-Seite mit Testergebnissen====
<!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}-->
<gallery>
Image:Abfragen.jpg|'''Abfragen-Seite'''
Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
</gallery>
====Masken-Seite mit Testergebnissen====
<!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}
{{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}-->
<gallery>
Image:Maske.jpg|'''Masken-Seite'''
Image:ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''
</gallery>
====Tabellen-Seite mit Testergebnissen====
<!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}
{{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}-->
<gallery>
Image:Tabelle.jpg|'''Tabellen-Seite'''
Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
</gallery>


===Barrierefreiheit-Detailvorgaben===
===Barrierefreiheit-Detailvorgaben===
Zeile 136: Zeile 90:
Rest in Bearbeitung.   
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>
</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>
'''Interpretation der ARC-Toolkit-Testergbnisse:'''
{{ImagePara |imgsrc=ARC.jpg|width=200px|caption=ARC-Toolkit-Testergbnisse}}
Für jede geprüfte Seite werden
* identifizierte Fehler (hier rot),
* Warnungen (hier ocker) und
* Best-Practise-Anerkennungen (hier grün) ausgewiesen,
und zwar als Summe (sh. Abbildung) sowie im Detailbereich je geprüfte Testkategorie (sh. Testergebnis-Abbildungen je SuperX-Seite).
'''Login-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Login.jpg|width=500px|caption=Login-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 8
* Anerkennungen: 3
{{ImagePara |imgsrc=ARC4Login.jpg|width=500px|caption=ARC-Testergebnis für Login-Seite}}
Silktide-Testergebnisse (Chromium):
{{ImagePara |imgsrc=Silktide4Login.jpg|width=300px|caption=Silktide-Testergebnis für Login-Seite}}
'''Portlet-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Portlets.jpg|width=500px|caption=Portlet-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 22
* Anerkennungen: 20
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=500px|caption=Testergebnis für Portlet-Seite}}
Silktide-Testergebnisse (Chromium):
{{ImagePara |imgsrc=Silktide4Portlets.jpg|width=300px|caption=Silktide-Testergebnis für Portlet-Seite}}
'''Menü-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Menue.jpg|width=500px|caption=Menü-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 19
* Anerkennungen: 13
{{ImagePara |imgsrc=ARC4Menue.jpg|width=500px|caption=Testergebnis für Menü-Seite}}
Silktide-Testergebnisse (Chromium):
{{ImagePara |imgsrc=Silktide4Menu.jpg|width=300px|caption=Silktide-Testergebnis für Menü-Seite}}
'''Abfragen-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Abfragen.jpg|width=500px|caption=Abfragen-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 28
* Anerkennungen: 21
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=500px|caption=Testergebnis für Abfragen-Seite}}
Silktide-Testergebnisse (Chromium) einzeln:
{{ImagePara |imgsrc=Silktide4Abfragen.jpg|width=300px|caption=Silktide-Testergebnis für Abfragen-Seite}}<br>
'''Masken-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Maske.jpg|width=500px|caption=Masken-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 44
* Anerkennungen: 18
{{ImagePara |imgsrc=ARC4Maske.jpg|width=500px|caption=Testergebnis für Masken-Seite}}
Silktide-Testergebnisse (Chromium):
{{ImagePara |imgsrc=Silktide4Maske.jpg|width=300px|caption=Silktide-Testergebnis für Masken-Seite}}
'''Tabellen-Seite mit Testergebnissen:'''
{{ImagePara |imgsrc=Tabelle.jpg|width=500px|caption=Tabellen-Seite}}
ARC-Testergebnisse (Firefox):
* Fehler: 0
* Warnungen: 38
* Anerkennungen: 3
{{ImagePara |imgsrc=ARC4Tabelle.jpg|width=500px|caption=Testergebnis für Tabellen-Seite}}
Silktide-Testergebnisse (Chromium):
noch nicht verfügbar


===Literatur===
===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, 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
*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff

Aktuelle Version vom 24. März 2026, 15:57 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--


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.

Interpretation der ARC-Toolkit-Testergbnisse: ARC-Toolkit-Testergbnisse

Für jede geprüfte Seite werden

  • identifizierte Fehler (hier rot),
  • Warnungen (hier ocker) und
  • Best-Practise-Anerkennungen (hier grün) ausgewiesen,

und zwar als Summe (sh. Abbildung) sowie im Detailbereich je geprüfte Testkategorie (sh. Testergebnis-Abbildungen je SuperX-Seite).


Login-Seite mit Testergebnissen: Login-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 8
  • Anerkennungen: 3

ARC-Testergebnis für Login-Seite

Silktide-Testergebnisse (Chromium): Silktide-Testergebnis für Login-Seite


Portlet-Seite mit Testergebnissen: Portlet-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 22
  • Anerkennungen: 20

Testergebnis für Portlet-Seite

Silktide-Testergebnisse (Chromium): Silktide-Testergebnis für Portlet-Seite


Menü-Seite mit Testergebnissen: Menü-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 19
  • Anerkennungen: 13

Testergebnis für Menü-Seite

Silktide-Testergebnisse (Chromium): Silktide-Testergebnis für Menü-Seite


Abfragen-Seite mit Testergebnissen: Abfragen-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 28
  • Anerkennungen: 21

Testergebnis für Abfragen-Seite

Silktide-Testergebnisse (Chromium) einzeln: Silktide-Testergebnis für Abfragen-Seite


Masken-Seite mit Testergebnissen: Masken-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 44
  • Anerkennungen: 18

Testergebnis für Masken-Seite

Silktide-Testergebnisse (Chromium): Silktide-Testergebnis für Masken-Seite


Tabellen-Seite mit Testergebnissen: Tabellen-Seite

ARC-Testergebnisse (Firefox):

  • Fehler: 0
  • Warnungen: 38
  • Anerkennungen: 3

Testergebnis für Tabellen-Seite

Silktide-Testergebnisse (Chromium): noch nicht verfügbar

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