Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 12: | Zeile 12: | ||
=== Grad der Barrierefreiheit von SuperX (Stand 02.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">Vorgabe gem. WCAG 2.2</span>'''</th><th style="background-color:#eeeeec;" class="">'''Login-Dialog'''</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 Themenewahl)</th><th style="background-color:#eeeeec;" class="">'''Masken-Dialog'''''(maske_html.xsl)''</th><th style="background-color:#eeeeec;" class="">'''Tabellen-Dialog'''''(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><td style="" class="col-white-bg">11 Fehler | |||
??Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen | |||
</td><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><td style="" class="col-white-bg">ok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen</td><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">--</th><th style="" class="col-white-bg">--</th></tr></table> | |||
===Barrierefreiheit - Vorgaben=== | ===Barrierefreiheit - Vorgaben=== | ||
| Zeile 76: | Zeile 88: | ||
</li></ul></div></td></tr></table></div> | </li></ul></div></td></tr></table></div> | ||
===Literatur=== | ===Literatur=== | ||
*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff | *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff | ||
* Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff | * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff | ||
Version vom 16. Februar 2026, 15:58 Uhr
Wie barrierefrei ist SuperX?
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.
Grad der Barrierefreiheit von SuperX (Stand 02.2026)
| Vorgabe gem. WCAG 2.2 | Login-Dialog | Portlet-Seite(nach Login)
(index.jsp) | Menü-Seite
(nach Klick auf Standardberichte) (menuhtml.xsl und submenu_html.xsl) | Abfragen-Seite(nach Themenewahl) | Masken-Dialog(maske_html.xsl) | Tabellen-Dialog(tabelle_html.xsl) |
|---|---|---|---|---|---|---|
| Seitennavigation und Sprache | ok | -- | -- | ok | -- | ok |
| Tastaturbedienbarkeit, Fokusreihenfolge | ok | ok | ok | ok | ok | ok |
| Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert | ok | ok | ok | ok | 11 Fehler
??Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen | ok |
| Pflichtfeldkennzeichnung | ok | -- | -- | -- | ok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen | -- |
| Textwiederholung (repetitive content) | ok | ok | ok | ok | ok | ok |
| Autocomplete | ok | -- | -- | -- | -- | -- |
| Struktur und Semantik | ok | ok | ok | ok | ok | ok |
| Usability | ok | ok | ok | ok | -- | ok |
| Fehlermeldung | vorbereitet | -- | -- | -- | -- | -- |
Barrierefreiheit - Vorgaben
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen. Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
- Wahrnehmbarkeit
- Bedienbarkeit
- Verständlichkeit
- Robustheit
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).
| 1. Vorgaben zur WAHRNEHMBARKEIT = Level 1 | Stand 05.2025 | SX-/MT-Website-Status | Tools/Hilfen |
|---|---|---|---|
| 1.1. Textalternativen für audiovisuelle Inhalte | |||
Bilder mit Alternativtexten versehen:
| ok, vgl.:
| ||
| Videos mit Untertiteln versehen:
sh. Beispiel in c't 2022, Heft 14, S. 137 | irrrelevant für SuperX-UI | ||
| 1.2 Textgröße | |||
| Text mit mind. 10-12px anbieten. | ok, vgl.:
| ||
Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei:
| ok, vgl.:
|
| |
| 1.3 Kontraste | |||
Kontrastverhältnis sichern; lt WCAG 2.0:
| Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...) | ||
| 1.4 ARIA-Attribute (*) | |||
| (*) Accessible Rich Internet Applications
ARIA-Attribute für Screenreader einsetzen | ok, vgl.:
| ||
| 2. Vorgaben zur BEDIENBARKEIT = Level 2 | |||
Bedienbarkeit per Tastatur ermöglichen dazu:
| Klärungsbedarf | ||
| Tablisten-Handling (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) | Klärungsbedarf (sx-relevant?) | Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd) | |
| Die Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden. | Klärungsbedarf (zutreffend?) | ||
| Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei" | ok, vgl.
| ||
Jeden größeren Inhaltsblock ("landmark") mit:
| Klärungsbedarf (volllständig?) | ||
| Suchfunktionen integrieren in komplexe Websites, | ok, vgl.
| ||
| Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert. | irrrelevant für SuperX-UI | sh. ct.de/yxcd | |
| Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden. | Klärungsbedarf (vollständig?) | ||
| 3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3 | |||
Sprache angeben zum besseren Artikulieren durch Screeenreader:
| ok, vgl.:
| ||
Textalternativen integrieren:
| ok | ||
Eingabefelder beschriften:
| Klärungsbedarf (vollständig?) | ||
Formularabschnitte beschriften:
(sh. Beispiel in c't 2022, Heft 15, S. 166) | Klärungsbedarf (vollständig?) | ||
Clientseitige Validierung der Eingaben vor dem Absenden:
| Klärungsbedarf (vollständig?) | ||
| 4. Vorgaben zur ROBUSTHEIT > Level 4 | |||
| Für sauberes HTML sorgen. | ok | Nu Validator - https:/validator.nu:
|
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