Zuletzt bearbeitet vor 4 Tagen
von Bettina Floss

SuperX barrierefrei

Wie barrierefrei ist SuperX?

Geltende Vorschriften

Die Verpflichtung zur Barrierefreiheit von Websites gilt derzeit (noch) nur für Bundesbehörden. Sie geht hervor aus der

  • Barrierefreie Informationstechnik-Verordnung (BITV),
    • mit Neuauflage von 2019,
    • mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
  • Web Content Accessibility Guidelines (WCAG 2.0),
    • herausgegeben von der Web-Standardisierungsorganisation W3C bzw.
    • deren Arbeitsgruppe Web Accessability Initiative (WAI).

Barrierefreiheit

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

Grad der Barrierefreiheit von SuperX

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1
SuperX-Status, 05.2025SX-/MT-Website-Status
Tools/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
ok, vgl.:
  • nd_templates (Stand 24.05.2025)


web Developer (Bowsererweitertung)
Videos mit Untertiteln versehen:

sh. Beispiel in c't 2022, Heft 14, S. 137

irrrelevant für SuperX-UI

HappyScribe (zur autom. Untertitelerzeugung)
1.2 Textgröße
Text mit mind. 10-12px anbieten. ok, vgl.:
  • sx_common.css (mit font-size: 10-12px)

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, vgl.:
  • sx_menue
  • sx_maske
  • sx_tabelle

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
Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)
  • 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    		 ok, vgl.:
    • nd navi top, nd navi bottom (Stand 24.05.2025)
    • nd buttonbar table, nd buttonbar export
    • nd button Keyfield/BackToMask/UserDoc/Bookmark/DeepLink/Konfig/intoWord/Excel*/PDF/HTML/CSV*/Copy/MaskInfoEdit/MaskToSachgeb/StyleToMask

    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)
    		Klärungsbedarf


    Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
    • HTML-Attribut tabindex setzen
    		in Bearbeitung

    Klärungsbedarf (Stand?)


    Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen:
    • "hover" (für Mausinteraktionen),
    • "focus" (für Tataturbedienung).
    		ok, vgl.:
    • sx_menue
    • sx_maske
    • sx_tabelle

    Klärungsbedarf (vollständig?)


    Ggf. css-outline als Orientierungshilfe nutzen.Klärungsbedarf (Bedeutung?)
    Ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten;
    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)    		Klärungsbedarf (sx-relevant?)

    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.
    • Exportoptionen

    Jeden größeren Inhaltsblock ("landmark") mit:
    • Überschrift und/oder
    • aria-label bzw. aria-labelledeby versehen.
    		Klärungsbedarf (volllständig?)
    Suchfunktionen integrieren in komplexe Websites, ok, vgl.
    • sx_menue

    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:
    • lang="de" im -Element
    • oder nur für Textblöcke
    • oder nur für einzelne Wörte
    		 ok, vgl.:
    • sx_menue
    Klärungsbedarf (vollständig?)


    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
    		ok
    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>
    		Klärungsbedarf (vollständig?)
    Formularabschnitte beschriften:
    • z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten
      </fieldset></legend>

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

    		Klärungsbedarf (vollständig?)
    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)
    		Klärungsbedarf (vollständig?)
    4. Vorgaben zur ROBUSTHEIT > Level 4

    Für sauberes HTML sorgen. ok
    		 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=14601“