Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(75 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
 
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 ===
<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)
 
(''menuhtml.xsl und submenu_html.xsl)''
</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>
 
'''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>
 
'''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>
Portlets.jpg|'''Portlet-Seite'''
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>
Menue.jpg|'''Menü-Seite'''
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>
Abfragen.jpg|'''Abfragen-Seite'''
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>
Maske.jpg|'''Masken-Seite'''
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>
Tabelle.jpg|'''Tabellen-Seite'''
ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
</gallery>
 
===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:
 
*jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
*falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):  <img''src="..." alt=""> </img_src="...">''


===Barrierefreiheit===
*Sonderfall: inline svg</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit '''Untertitel'''n versehen:
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
sh. Beispiel in c't 2022, Heft 14, S. 137
Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
</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''':
* Wahrnehmbarkeit
* Bedienbarkeit
* Verständlichkeit
* Robustheit
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).


===Grad der Barrierefreiheit von SuperX===
*'''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:


{| class="wikitable"
*für Fließtext: 4,5: 1
|-
**für Überschriften: 3:1
! 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 > Level 1<br /></span>
**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  
! 
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
!SuperX to do; 05.2024
!Tools/Hilfen
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit '''Alternativtexte'''n versehen
|prüfen/ergänzen:
* jedem <img />  ein <alt>-Attribut hinzufügen,
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt="">
* Sonderfall: inline svg
|
* "web Developer" (Bowsererweitertung)
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Videos mit '''Untertitel'''n versehen <br />
|prüfen/ergänzen:
* sh. Beispiel in c't 2022, Heft 14, S. 137
|
* "HappyScribe" (zur autom. Untertitelerzeugung)
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.2 Textgröße
! 
! 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Text mit mind. '''10-12px''' anbieten
|prüfen/umsetzen
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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)
|prüfen/umsetzen
| 
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.3 Kontraste
! 
! 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Kontrastverhältnis''' sichern; lt WCAG 2.0:
* für Fließtext: 4,5 : 1
* für Überschriften: 3:1
* Problemfall: Text über Bildern
|prüfen/umsetzen
|
* "WAVE" (Browsererweiterung)
* Color Contrast Analyzer
* Color Contrast Checker (zum Messen von Farbwerten)
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.4 ARIA-Attribute (*)
! 
! 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|(*) Accessible Rich Internet Applications  
'''ARIA-Attribute für Screenreader''' einsetzen
'''ARIA-Attribute für Screenreader''' einsetzen
|prüfen/ergänzen
</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:
| 
 
|-
*'''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:
! 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 > Level 2<br /></span>
 
! 
*Überschrift und/oder
! 
*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">
|-
 
| style="text-align: left;" data-mce-style="text-align: left;"|Bedienbarkeit per Tastatur ermöglichen durch:
*lang="de" im -Element
* '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren
*oder nur für Textblöcke
|prüfen/umsetzen
*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:
* sh. Beispiel in c't 2022, Heft 15, S. 165
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
* HTML-Attribut '''tabindex''' setzen
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <br />
* "'''hover'''" (für Mausinteraktionen),
* "'''focus'''" (für Tataturbedienung).
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. '''css-outline''' als Orientierungshilfe nutzen.
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. '''focus traps''' (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; <br />relevant z.B. für:  
* modale Dialoge,
* Einverständniserklärungen,
wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
|prüfen/umsetzen
* sh. Beispiel in c't 2022, Heft 15, S. 165
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Tablisten-Handling''' (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected. <br />
|prüfen/umsetzen
* sh. Erläuterung in c't 2022, Heft 15, S. 165
|Github-Repository vonW3C für copy-paste-taugliche Beispiele


*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>-->


(sh. ct.de/yxcd)  
<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===
| style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende '''div'''S und '''span'''S '''in Formularen''' möglichst vermeiden. <br />
*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff
|prüfen/umsetzen
*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Jeden größeren''' Inhaltsblock''' ("landmark") mit
* Überschrift und/oder
* aria-label bzw. aria-labelledeby
versehen.
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Downloadlinks''' ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Suchfunktionen''' integrieren in komplexe Websites,
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Modenen''' Spamschutz '''wie''' "'''reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.
|prüfen/umsetzen
|(sh. ct.de/yxcd)
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Zeitdruck '''zum und''' Datenverlust '''beim Beenden einer Session vermeiden.
|prüfen/umsetzen
| 
|-
! style="text-align: left;" data-mce-style="text-align: left;"|'''<span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT > Level 3<br /></span>'''
| 
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;">'''Sprache''' angeben zum besseren Artikulieren durch Screeenreader<br /></span>
|prüfen/umsetzen:
* lang="de" im-Element
* oder nur für Textblöcke
* oder nur für einzelne Wörte
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:''' '''
* in einfacher Sprache,
* in Gehörlosensprache, <br />
* Worterklärungen oder
* Abkürzungsumschreibungen.
|prüfen/umsetzen:
z.B. Tooltip erzeugen mit:
* <abbr title="Accessible Rich Internet Applications">ARIA>/abbr><br />
</abbr>
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften.
|prüfen/umsetzen:
* mit aria-label:
<button type="button" <br />
aria-label="Info-Fenster schließen" </br />
title="Schließen">X</button>
* oder <br />
<label> Ihre Mail <br />
<input type="email" name="email"> <br />
</label>
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
| prüfen/umsetzen:
* z.B. Nutzung von <legend> zur Beschriftung  <br /> von <fieldset>-Formularabschnitten <br /> sh. Beispiel in c't 2022, Heft 15, S. 166
|
|-
! 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 > Level 4<br /></span>
! 
! 
|}

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“