Zuletzt bearbeitet vor 11 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.2024 Tools/Infos
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 anbietenprüfen/umsetzen
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)
prüfen/umsetzen 
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		prüfen/ergänzen 
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).
prüfen/umsetzen 
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/umsetzenGithub-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/umsetzensh. 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

prüfen/umsetzen
 
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.prüfen/umsetzen:
  • 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		 prüfen/umsetzen:
Clientseitige Validierung der Eingabenvor 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=12783“