Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(81 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  
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="...">''
 
*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''':
 
*'''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:
 
*für Fließtext: 4,5: 1
**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:
 
*'''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:


===Barrierefreiheit===
*Überschrift und/oder
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
*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">
Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
 
* Wahrnehmbarkeit
*lang="de" im -Element
* Bedienbarkeit
*oder nur für Textblöcke
* Verständlichkeit
*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:
* Robustheit
 
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).  
*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>-->
 
<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>


===Grad der Barrierefreiheit von SuperX===
===Literatur===
{| class="wikitable"
*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
! 1. Vorgaben zur WAHRNEHMBARKEIT !! !!
|-
! 1.1. Textalternativen für audiovisuelle Inhalte !! SuperX to do; 05.2024 !! Tools/Hilfen
|-
| Bilder mit Alternativtexten versehen
| prüfen/ergänzen
* <alt>-Attribut für jedes <img>
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): </br> <img_src="..." alt="">
* Sonderfall: inline svg
|
* "web Developer" (Bowsererweitertung)
|-
| Videos mit Untertiteln versehen (sh. c't 2022, Heft 14, Beispiel S. 137) 
| prüfen/ergänzen
|
* "HappyScribe" (zur autom. Untertitelerzeugung)
|-
! 1.2 Textgröße !! !!
|-
| Text mit mind. 10-12px anbieten
|  prüfen/umsetzen
|-
| 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
|
|-
! 1.3 Kontraste !! !!
|-
| 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)
|-
! 1.4 ARIA-Attribute (*) !! !!
|-
| (*) Accessible Rich Internet Applications
ARIA-Attribute für Screenreader einsetzen 
| prüfen/ergänzen
|
|-
! 2. Vorgaben zur  BEDIENBARKEIT !! !!
|-
| Bedienbarkeit per Tastatur ermöglichen durch:
* Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren
|  prüfen/umsetzen
|
|-
| Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
* HTML-Attribut tabindex setzen
| prüfen/umsetzen
|
|-
| Darstellung von Maus- sowie Tastaturinteraktionen: 
* css-Pseudoklassen "hover" (für Mausinteraktionen) und "focus" (für Tataturbedienung) nutzen.
| prüfen/umsetzen
|
|-
! 3. Vorgaben zur  VERSTÄNDLICHKEIT !! !!
|-
! 4. Vorgaben zur  ROBUSTHEIT !! !!
|}

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“