Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
| Zeile 32: | Zeile 32: | ||
==== Login-Seite mit Testergebnissen==== | ==== Login-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}} | <!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}} | ||
{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}} | {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Login.jpg|'''Login-Seite''' | Image:Login.jpg|'''Login-Seite''' | ||
| Zeile 41: | Zeile 40: | ||
====Portlet-Seite mit Testergebnissen==== | ====Portlet-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}} | <!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}} | ||
{{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}} | {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Portlet.jpg|'''Portlet-Seite''' | Image:Portlet.jpg|'''Portlet-Seite''' | ||
| Zeile 50: | Zeile 48: | ||
====Menü-Seite mit Testergebnissen==== | ====Menü-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}} | <!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}} | ||
{{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}} | {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Menue.jpg|'''Menü-Seite''' | Image:Menue.jpg|'''Menü-Seite''' | ||
| Zeile 59: | Zeile 56: | ||
====Abfragen-Seite mit Testergebnissen==== | ====Abfragen-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}} | <!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}} | ||
{{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}} | {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Abfragen.jpg|'''Abfragen-Seite''' | Image:Abfragen.jpg|'''Abfragen-Seite''' | ||
| Zeile 68: | Zeile 64: | ||
====Masken-Seite mit Testergebnissen==== | ====Masken-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}} | <!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}} | ||
{{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}} | {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Masken.jpg|'''Masken-Seite''' | Image:Masken.jpg|'''Masken-Seite''' | ||
| Zeile 77: | Zeile 72: | ||
====Tabellen-Seite mit Testergebnissen==== | ====Tabellen-Seite mit Testergebnissen==== | ||
{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}} | <!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}} | ||
{{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}} | {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--> | ||
<gallery> | <gallery> | ||
Image:Tabelle.jpg|'''Tabellen-Seite''' | Image:Tabelle.jpg|'''Tabellen-Seite''' | ||
Version vom 17. März 2026, 11:56 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-Seite | Portlet-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 Sprache | ok | -- | -- | ok | -- | ok |
| Tastaturbedienbarkeit, Fokusreihenfolge | ok | ok | ok | ok | ok | ok |
| Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert | ok | ok | ok | ok | ok | ok |
| Pflichtfeldkennzeichnung | ok | -- | -- | -- | ok | -- |
| 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 | -- | -- | -- | vorbereitet | -- |
Login-Seite mit Testergebnissen
Portlet-Seite mit Testergebnissen
- Portlet.jpg
Portlet-Seite
- ARC4Portlet.jpg
ARC-Testergebnis für Portlet-Seite
Menü-Seite mit Testergebnissen
Abfragen-Seite mit Testergebnissen
Masken-Seite mit Testergebnissen
- Masken.jpg
Masken-Seite
- ARC4Masken.jpg
ARC-Testergebnis für Masken-Seite
Tabellen-Seite mit Testergebnissen
Barrierefreiheit-Detailvorgaben
| 1. Vorgaben zur WAHRNEHMBARKEIT = Level 1 | Tools/Hilfen |
|---|---|
| 1.1. Textalternativen für audiovisuelle Inhalte | |
Bilder mit Alternativtexten versehen:
| |
| Videos mit Untertiteln versehen:
sh. Beispiel in c't 2022, Heft 14, S. 137 | |
| 1.2 Textgröße | |
| Text mit mind. 10-12px anbieten. | |
Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei:
|
|
| 1.3 Kontraste | |
Kontrastverhältnis sichern; lt WCAG 2.0:
| |
| 1.4 ARIA-Attribute (*) | |
| (*) Accessible Rich Internet Applications
ARIA-Attribute für Screenreader einsetzen | |
| 2. Vorgaben zur BEDIENBARKEIT = Level 2 | |
Bedienbarkeit per Tastatur ermöglichen dazu:
| |
| 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) | 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. | |
| Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei" | |
Jeden größeren Inhaltsblock ("landmark") mit:
| |
| Suchfunktionen integrieren in komplexe Websites, | |
| Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert. | sh. ct.de/yxcd |
| Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden. | |
| 3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3 | |
Sprache angeben zum besseren Artikulieren durch Screeenreader:
| |
Textalternativen integrieren:
| |
Eingabefelder beschriften:
| |
Formularabschnitte beschriften:
| |
Clientseitige Validierung der Eingaben vor dem Absenden:
| |
| 4. Vorgaben zur ROBUSTHEIT > Level 4 | |
| Für sauberes HTML sorgen. | 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