Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

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“