SuperX barrierefrei: Unterschied zwischen den Versionen

Version vom 27. April 2024, 16:24 Uhr

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.2024	Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen: jedem <img> ein <alt>-Attribut hinzufügen, falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=""> 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.	prü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/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	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: mit aria-label: <button type="button" 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 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

@@ Zeile 23: / Zeile 23: @@
 |-
 ! style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">1. Vorgaben zur WAHRNEHMBARKEIT > Level 1<br /></span>
-!
+! SuperX-Status, 05.2024
-!
+! Tools/Hilfen
 |-
 ! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
-!SuperX to do; 05.2024
+!
-!Tools/Hilfen
+!
 |-
 | style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit '''Alternativtexte'''n versehen:
@@ Zeile 35: / Zeile 35: @@
 * Sonderfall: inline svg
 |ok für:
-* nd_navi_top/_panel_orgunits/_bottom/_resultset
+* nd_navi_top/_panel_orgunits/_bottom/_resultset,
-* nd_modul_info, nd_query_list, nd_selectionform
+* nd_modul_info,
-* nd_buttonbar_mask/_table/_export/button_*
+* nd_query_list,
+* nd_selectionform,
+* nd_buttonbar_mask/_table/_export,
+* nd_button_*
 * nd_resultset_tree/_man
 |
@@ Zeile 52: / Zeile 55: @@
 !
 |-
-| style="text-align: left;" data-mce-style="text-align: left;"|Text mit mind. '''10-12px''' anbieten
+| style="text-align: left;" data-mce-style="text-align: left;"|Text mit mind. '''10-12px''' anbieten.
 |prüfen/umsetzen
 |-
@@ Zeile 122: / Zeile 125: @@
 * 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
+* Github-Repository vonW3C für copy-paste-taugliche Beispiele
+* sh. ct.de/yxcd
 |-
 | style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende '''div'''S und '''span'''S '''in Formularen''' möglichst vermeiden. <br />
@@ Zeile 146: / Zeile 150: @@
 | style="text-align: left;" data-mce-style="text-align: left;"|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
+|
+* sh. ct.de/yxcd
 |-
 | style="text-align: left;" data-mce-style="text-align: left;"|'''Zeitdruck '''zum und''' Datenverlust '''beim Beenden einer Session vermeiden.
@@ Zeile 157: / Zeile 162: @@
 |-
 | style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;">'''Sprache''' angeben zum besseren Artikulieren durch Screeenreader<br /></span>
-|prüfen/umsetzen:
 * lang="de" im-Element
 * oder nur für Textblöcke
 * oder nur für einzelne Wörte
+|prüfen/umsetzen
 |
 |-
-| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:''' '''
+| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:'''
 * in einfacher Sprache,
 * in Gehörlosensprache, <br />
@@ Zeile 169: / Zeile 175: @@
 * Abkürzungsumschreibungen.
 * z.B. Tooltip erzeugen <br />
-sh. Beispiel in c't 2022, Heft 15, S. 166
+* sh. Beispiel in c't 2022, Heft 15, S. 166
-|prüfen/umsetzen:
+|prüfen/umsetzen
 |
 |-
-| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften.
+| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften:
-|prüfen/umsetzen:
 * mit aria-label:
 <button type="button" <br />aria-label="Info-Fenster schließen" </br />title="Schließen">X</button>
 * oder <br />
 <label> Ihre Mail <br /><input type="email" name="email"> <br /></label>
+|prüfen/umsetzen
 |
 |-
 | style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
 * z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br />
-sh. Beispiel in c't 2022, Heft 15, S. 166
+* sh. Beispiel in c't 2022, Heft 15, S. 166
-| prüfen/umsetzen:
+| prüfen/umsetzen
 |
 |-
-| style="text-align: left;" data-mce-style="text-align: left;"|'''Clientseitige Validierung der Eingaben'''vor dem Absenden.
+| style="text-align: left;" data-mce-style="text-align: left;"|'''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" <br />
-sh. Beispiel in c't 2022, Heft 15, S. 166
+* sh. Beispiel in c't 2022, Heft 15, S. 166
-| prüfen/umsetzen:
+| prüfen/umsetzen
 |
 |-
@@ Zeile 204: / Zeile 210: @@
 * interpretiert und moniert HTML-Regeln.
 * Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br />
-sh. ct.de/yxcd
+* sh. ct.de/yxcd
 |}