Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei

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.jpg

    Portlet-Seite

  • ARC4Portlet.jpg

    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.jpg

    Masken-Seite

  • ARC4Masken.jpg

    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 1Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen:
  • jedem <img> ein <alt>-Attribut hinzufügen,</alt>
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <imgsrc="..." alt=""> </img_src="...">
  • Sonderfall: inline svg

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:
  • Textverdoppelung
  • Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)
  • WAVE (Browsererweiterung)
  • Color Contrast Analyzer
  • Color Contrast Checker (zum Messen von Farbwerten)
    • 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
    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:
    • Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)
    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:
    • Überschrift und/oder
    • aria-label bzw. aria-labelledeby versehen.
    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:
    • lang="de" im -Element
    • oder nur für Textblöcke
    • oder nur für einzelne Wörte
    Textalternativen integrieren:
    • in einfacher Sprache,
    • in Gehörlosensprache,
    • Worterklärungen oder
    • Abkürzungsumschreibungen.
    • z.B. Tooltip erzeugen
    • sh. Beispiel in c't 2022, Heft 15, S. 166
    Eingabefelder beschriften:
    • mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen"
      title="Schließen">X</button>
    • oder <label> Ihre Mail
      <input type="email" name="email">
      </label>
    Formularabschnitte beschriften:
    • z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten
      </fieldset></legend>

      (sh. Beispiel in c't 2022, Heft 15, S. 166)

    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"
      (sh. Beispiel in c't 2022, Heft 15, S. 166)
    4. Vorgaben zur ROBUSTHEIT > Level 4
    Für sauberes HTML sorgen. 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.
      (sh. ct.de/yxcd)

    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=15697“