Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(57 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>


===Barrierefreiheit===
'''Abfragen-Seite mit Testergebnissen:'''
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
<!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}
Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}-->
* Wahrnehmbarkeit
<gallery>
* Bedienbarkeit
Abfragen.jpg|'''Abfragen-Seite'''
* Verständlichkeit
ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
* Robustheit
</gallery>
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).
 
'''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="...">''
 
*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''':


===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
! SuperX-Status, 05.2024
</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  
! Tools/Hilfen
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
!
!
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit '''Alternativtexte'''n versehen:
* jedem <img>  ein <alt>-Attribut hinzufügen,
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt="">
* Sonderfall: inline svg
|ok für:
* nd_navi_top/_panel_orgunits/_bottom/_resultset,
* nd_modul_info,
* nd_query_list,
* nd_selectionform,
* nd_buttonbar_mask/_table/_export,
* nd_button_*
* nd_resultset_tree/_man
|
* web Developer (Bowsererweitertung)
|-
| 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
|prüfen/ergänzen:
|
* 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.
| ok für:
* sx_common.css mit font-size: 10-12px
|-
| 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)
| ok für:
* sx_downloads_menue.htm
* sx_downloads_maske
* sx_downloads_tabelle.htm
| 
|-
! 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:
* '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren
* sh. Beispiel in c't 2022, Heft 15, S. 165
|prüfen/umsetzen


| 
*lang="de" im -Element
|-
*oder nur für Textblöcke
| style="text-align: left;" data-mce-style="text-align: left;"|Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
*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:
* 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.
* sh. Beispiel in c't 2022, Heft 15, S. 165
|prüfen/umsetzen


| 
*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>
| 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.
</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. Erläuterung in c't 2022, Heft 15, S. 165
(sh. Beispiel in c't 2022, Heft 15, S. 166)
|prüfen/umsetzen
</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>-->
* Github-Repository vonW3C für copy-paste-taugliche Beispiele
* sh. ct.de/yxcd
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende '''div'''S und '''span'''S '''in Formularen''' möglichst vermeiden. <br />
|prüfen/umsetzen
| 
|-
| 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>
* lang="de" im <html>-Element
* oder nur für Textblöcke
* oder nur für einzelne Wörte
| ok für:
* sx_menue.xls '''>> Klärungsbedarf'''


| 
<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.
| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:'''
</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.
* in einfacher Sprache,
(sh. sx_common.css)
* in Gehörlosensprache, <br />
</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.
* Worterklärungen oder
(gem. WCAG 2.0).
* Abkürzungsumschreibungen.
</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.
* z.B. Tooltip erzeugen <br />
Rest in Bearbeitung. 
* sh. Beispiel in c't 2022, Heft 15, S. 166
</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>
|prüfen/umsetzen
</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.
| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften:
Rest in Bearbeitung. 
* mit aria-label:
</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.
<button type="button" <br />aria-label="Info-Fenster schließen" </br />title="Schließen">X</button>
Rest in Bearbeitung. 
* oder <br />  
</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren.</td><td>ok
<label> Ihre Mail <br /><input type="email" name="email"> <br /></label>
(sh. Tooltips)
|prüfen/umsetzen
</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>
| style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
* z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br />
* sh. Beispiel in c't 2022, Heft 15, S. 166
| prüfen/umsetzen
|
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Clientseitige Validierung der Eingaben''' vor dem Absenden.  
* z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä.  
* z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" <br />
* sh. Beispiel in c't 2022, Heft 15, S. 166
| prüfen/umsetzen
|
|-
! 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>
|
|
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Für '''sauberes HTML''' sorgen.
| prüfen/umsetzen
| Nu Validator - https:/validator.nu:  
* prüft statisches HTML (nicht jedoch js-gerendertes HTML),
* interpretiert und moniert HTML-Regeln.  
* Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br />
* sh. ct.de/yxcd
|}


===Literatur===
===Literatur===
* Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136
*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
*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“