Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(46 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
==Wie barrierefrei ist SuperX?==
==Wie barrierefrei ist SuperX?==
===Geltende Vorschriften===
===Barrierefreiheit - Geltende Vorschriften===
Die Verpflichtung zur Barrierefreiheit von Websites gilt derzeit (noch) nur für Bundesbehörden. Sie geht hervor aus der
Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:
* '''Barrierefreie Informationstechnik-Verordnung (BITV)''',  
*'''Barrierefreie Informationstechnik-Verordnung (BITV)''',  
** mit Neuauflage von 2019,
**mit Neuauflage von 2019,
** mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die  
**mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
* '''Web Content Accessibility Guidelines (WCAG 2.0)''',  
* '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''',  
** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.  
** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.
** deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''.
**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


===Barrierefreiheit===
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web
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).  


<div><h3>Grad der Barrierefreiheit von SuperX</h3></div><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>'''SuperX-Status, 05.2025'''</th><th>'''SX-/MT-Website-Status<br data-mce-bogus="1">'''</th><th>'''Tools/Hilfen'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">1.1. Textalternativen für audiovisuelle Inhalte</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen:
=== Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===
<table class="wikitable"><tr><th style="background-color:#eeeeec;text-align:left;width:0px;" class="" data-mce-style="text-align: left;"><span style="color: #204a87"><span class="col-blue-navy">'''Testergebnisse nach'''</span></span> <span style="color: #204a87"><span class="col-blue-navy">'''WCAG 2.2'''</span></span> <span style="color: #204a87"><span class="col-blue-navy">'''gem.'''</span></span> <span class="col-blue-navy">'''ARC-Toolkit'''</span> <span class="col-blue-navy">(V. 5.7.10)</span> </th><th style="background-color:#eeeeec;" class="">'''Login-Seite'''</th><th style="background-color:#eeeeec;" class="">'''Portlet-Seite'''(nach Login)
''(index.jsp)''
</th><th style="background-color:#eeeeec;" class="">'''Menü-Seite'''
(nach Klick auf Standardberichte)


* jedem <img> ein <alt>-Attribut hinzufügen,</alt>
(''menuhtml.xsl und submenu_html.xsl)''
*falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br> <img''src="..." alt=""> </img_src="...">''
</th><th style="background-color:#eeeeec;" class="">'''Abfragen-Seite'''(nach Themenwahl)</th><th style="background-color:#eeeeec;" class="">'''Masken-Seite'''''(maske_html.xsl)''</th><th style="background-color:#eeeeec;" class="">'''Tabellen-Seite'''''(tabelle_html.xsl)''</th></tr><tr><th style="vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;" class="">'''<span style="color: #204a87">Seitennavigation und Sprache</span>'''</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">ok</th></tr><tr><th style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="" data-mce-style="text-align: left;">'''<span style="color: #204a87">Tastaturbedienbarkeit, Fokusreihenfolge</span>'''</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th></tr><tr><td style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class=""><span style="color: #204a87">'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''</span></td><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th></tr><tr><td style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="">'''<span style="color: #204a87">Pflichtfeldkennzeichnung</span>''' </td><th style="" class="col-white-bg">ok</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">ok</th><th style="" class="col-white-bg">--</th></tr><tr><th style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="" data-mce-style="text-align: left;">'''<span style="color: #204a87">Textwiederholung (repetitive content)</span>''' </th><th style="" class="col-white-bg"> ok</th><th style="" class="col-white-bg"> ok</th><th style="" class="col-white-bg"> ok</th><th style="" class="col-white-bg"> ok</th><th style="" class="col-white-bg"> ok</th><th style="" class="col-white-bg">ok</th></tr><tr><th style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="">'''<span style="color: #204a87">Autocomplete</span>'''</th><th style="" class="col-white-bg">ok</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">--</th><th style="" class="col-white-bg">--</th></tr><tr><th style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="" data-mce-style="text-align: left;">'''<span style="color: #204a87">Struktur und Semantik</span>'''</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th></tr><tr><td style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="" data-mce-style="text-align: left;"><strong><span style="color: #204a87">Usability</span></strong></td><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">ok</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">ok</th></tr><tr><td style="background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;" class="">'''<span style="color: #204a87">Fehlermeldung</span>'''
</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>


*Sonderfall: inline svg</td><td>ok für: 
'''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>
Login.jpg|'''Login-Seite'''
ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''
</gallery>


*nd_templates (Stand 24.05.2025)</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">web Developer (Bowsererweitertung)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit <strong>Untertitel</strong>n versehen:
'''Portlet-Seite mit Testergebnissen:'''
sh. Beispiel in c't 2022, Heft 14, S. 137
<!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}
</td><td>prüfen/ergänzen:</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">HappyScribe (zur autom. Untertitelerzeugung)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">1.2 Textgröße</th><th></th><th><br data-mce-bogus="1"></th><th></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 für:
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}-->
<gallery>
Portlets.jpg|'''Portlet-Seite'''
ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''
</gallery>


* sx_common.css mit font-size: 10-12px</td><td><br data-mce-bogus="1"></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>: <div><ul><li><strong>Textverdoppelung</strong></li><li><strong>Responsivität:</strong> von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</li></ul></div></td><td> ok für: <div><ul><li>sx_downloads_menue.htm</li><li>sx_downloads_maske.htm</li><li> sx_downloads_tabelle.htm</li></ul></div></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">1.3 Kontraste</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern; lt WCAG 2.0: <div>
'''Menü-Seite mit Testergebnissen:'''
* für Fließtext: 4,5 : 1<ul> <li>für Überschriften: 3:1</li><li> Problemfall: Text über Bildern</li></ul></div></td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline"><div><ul><li>WAVE (Browsererweiterung)</li><li> Color Contrast Analyzer</li><li> Color Contrast Checker (zum Messen von Farbwerten)</li></ul></div></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">1.4 ARIA-Attribute (*)</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications <br class="mw_emptyline"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> ok für:
<!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}
{{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}-->
<gallery>
Menue.jpg|'''Menü-Seite'''
ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''
</gallery>


*nd navi top,
'''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>
Abfragen.jpg|'''Abfragen-Seite'''
ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
</gallery>


*nd navi  bottom (Stand 24.05.2025)</td><td><br data-mce-bogus="1"></td><td></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<br>'''</span></th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
'''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>
Maske.jpg|'''Masken-Seite'''
ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''
</gallery>


* <strong>Jump-, Skiplink</strong>s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>prüfen/umsetzen<br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
'''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>
Tabelle.jpg|'''Tabellen-Seite'''
ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
</gallery>


* HTML-Attribut <strong>tabindex</strong> setzen</td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <div><ul><li>"<strong>hover</strong>" (für Mausinteraktionen),</li><li>"<strong>focus</strong>" (für Tataturbedienung).</li></ul></div></td><td>geprüft mit <strong>Klärungsbedarf</strong> für:
===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:


* sx_downloads_menue.htm
*jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
*falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):  <img''src="..." alt=""> </img_src="...">''


* sx_downloads_maske.htm
*Sonderfall: inline svg</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit '''Untertitel'''n versehen:
sh. Beispiel in c't 2022, Heft 14, S. 137
</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße''' </th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. '''10-12px''' anbieten.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"> Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':


* sx_downloads_tabelle.htm</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>css-outline</strong> als Orientierungshilfe nutzen.</td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>focus traps</strong> (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; <br>relevant z.B. für:  
*'''Textverdoppelung'''
*'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th></tr><tr><td>'''Kontrastverhältnis''' sichern; lt WCAG 2.0:


*modale Dialoge,
*für Fließtext: 4,5: 1
*Einverständniserklärungen,wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
**für Überschriften: 3:1
**Problemfall: Text über Bildern
</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)''' </th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications
'''ARIA-Attribute für Screenreader''' einsetzen
</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">2. Vorgaben zur BEDIENBARKEIT = Level 2</span>'''</th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:


(sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>prüfen/umsetzen<br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Tablisten-Handling</strong> (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)</td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Die Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:
*'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Tablisten-Handling</strong> (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) </td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Die Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></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></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:  


* Überschrift und/oder
*Überschrift und/oder
* aria-label bzw. aria-labelledebyversehen.</td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></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>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites, </td><td> prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></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>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline"><div><ul><li>sh. ct.de/yxcd</li></ul></div></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>zum und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td><td> prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></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<br></span></strong></th><td></td><td><br data-mce-bogus="1"></td><td></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><br class="mw_emptyline">
*aria-label bzw. aria-labelledeby versehen.</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"> <strong>Suchfunktionen</strong> integrieren in komplexe Websites, </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></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>zum und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span class="col-blue-navy">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th></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><br class="mw_emptyline">


* lang="de" im -Element
*lang="de" im -Element
* oder nur für Textblöcke
*oder nur für Textblöcke
* oder nur für einzelne Wörte</td><td> ok für:
*oder nur für einzelne Wörte</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren:'''<br class="mw_emptyline"><div><ul><li>in einfacher Sprache, </li><li>in Gehörlosensprache, <br></li><li>Worterklärungen oder</li><li>Abkürzungsumschreibungen.</li><li> z.B. Tooltip erzeugen <br> </li><li>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>Eingabefelder </strong>beschriften:


* sx_menue <strong>Klärungsbedarf</strong><br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren:'''<br class="mw_emptyline"><div><ul><li>in einfacher Sprache, </li><li>in Gehörlosensprache, <br></li><li>Worterklärungen oder</li><li>Abkürzungsumschreibungen.</li><li> z.B. Tooltip erzeugen <br></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li></ul></div>'''</td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:<div><ul><li> mit aria-label: </li></ul></div><button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button><div><ul><li>oder  </li></ul></div><label> Ihre Mail <br><input type="email" name="email"> <br></label></td><td>ok für:
*mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button>
*oder <label> Ihre Mail <br><input type="email" name="email"> <br></label>
</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften:<div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend>
(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>-->


*nd''_''navi_top (vom 24.05.2025) </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften:<div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend>
<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.
(sh. Beispiel in c't 2022, Heft 15, S. 166)</li></ul></div></td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td> </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)
Rest in Bearbeitung. 
</li></ul></div></td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td> </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><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td><td>prüfen/umsetzen</td><td><br data-mce-bogus="1"></td><td> Nu Validator - https:/validator.nu: <br class="mw_emptyline"><div><ul><li>prüft statisches HTML (nicht jedoch js-gerendertes HTML), </li><li> interpretiert und moniert HTML-Regeln. </li><li>Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br>(sh. ct.de/yxcd)
</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.
</li></ul></div></td></tr></table></div>
(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===
===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 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:

  • Login-Seite

    Login-Seite

  • ARC-Testergebnis für Login-Seite

    ARC-Testergebnis für Login-Seite

Portlet-Seite mit Testergebnissen:

  • Portlet-Seite

    Portlet-Seite

  • ARC-Testergebnis für Portlet-Seite

    ARC-Testergebnis für Portlet-Seite

Menü-Seite mit Testergebnissen:

  • Menü-Seite

    Menü-Seite

  • ARC-Testergebnis für Menü-Seite

    ARC-Testergebnis für Menü-Seite

Abfragen-Seite mit Testergebnissen:

  • Abfragen-Seite

    Abfragen-Seite

  • ARC-Testergebnis für Abfragen-Seite

    ARC-Testergebnis für Abfragen-Seite

Masken-Seite mit Testergebnissen:

  • Masken-Seite

    Masken-Seite

  • ARC-Testergebnis für Masken-Seite

    ARC-Testergebnis für Masken-Seite

Tabellen-Seite mit Testergebnissen:

  • Tabellen-Seite

    Tabellen-Seite

  • ARC-Testergebnis für 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
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=15713“