Zuletzt bearbeitet vor 10 Monaten
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

<tbody></tbody>
1. Vorgaben zur WAHRNEHMBARKEIT > Level 1
 SuperX-Status, 05.2024SX-/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):
    <img_src="..." alt=""> </img_src="...">
  • Sonderfall: inline svg
ok für:
  • nd_navi_top/_panel_orgunits/_bottom/_resultset,
  • nd_modul_info,
  • nd_query_list,
  • nd_selectionform,
  • nd_buttonbar_mask/_table/_export,
  • nd_button_*
  • nd_resultset_tree/_man


  • web Developer (Bowsererweitertung)
Videos mit Untertiteln versehen
  • sh. Beispiel in c't 2022, Heft 14, S. 137
prüfen/ergänzen:

  • HappyScribe (zur autom. Untertitelerzeugung)
1.2 Textgröße 
 
Text mit mind. 10-12px anbieten. ok für:
  • 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 für:
  • sx_downloads_menue.htm
  • sx_downloads_maske.htm
  • sx_downloads_tabelle.htm

 
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		 ok für:
  • nd_navi_top/_bottom

2. Vorgaben zur BEDIENBARKEIT > Level 2
 
 
Bedienbarkeit per Tastatur ermöglichen durch:
  • Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren
  • sh. Beispiel in c't 2022, Heft 15, S. 165
prüfen/umsetzen


 
Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
  • HTML-Attribut tabindex setzen
prüfen/umsetzen
 
Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen:

  • "hover" (für Mausinteraktionen),
  • "focus" (für Tataturbedienung).
geprüft mit Klärungsbedarf für
  • sx_downloads_menue.htm
  • sx_downloads_maske.htm
  • sx_downloads_tabelle.htm

 
Ggf. css-outline als Orientierungshilfe nutzen.prüfen/umsetzen
 
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
prüfen/umsetzen


 
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
prüfen/umsetzen

  • Github-Repository vonW3C für copy-paste-taugliche Beispiele
  • sh. ct.de/yxcd
Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.
prüfen/umsetzen
 
Jeden größeren Inhaltsblock ("landmark") mit
  • Überschrift und/oder
  • aria-label bzw. aria-labelledeby
versehen.		prüfen/umsetzen
 
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"prüfen/umsetzen
 
Suchfunktionen integrieren in komplexe Websites,prüfen/umsetzen
 
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.prüfen/umsetzen

  • sh. ct.de/yxcd
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.prüfen/umsetzen
 
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 für:
  • sx_menue.xls >> Klärungsbedarf



 
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
prüfen/umsetzen
 
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>		prüfen/umsetzen
 
Formularabschnitte beschriften.
  • z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten
    </fieldset></legend>
  • sh. Beispiel in c't 2022, Heft 15, S. 166
 prüfen/umsetzen
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
 prüfen/umsetzen
4. Vorgaben zur ROBUSTHEIT > Level 4

Für sauberes HTML sorgen. prüfen/umsetzen
 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
  • Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=12881“