SuperX barrierefrei: Unterschied zwischen den Versionen

Version vom 23. April 2024, 15:50 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

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
1.1. Textalternativen für audiovisuelle Inhalte	SuperX to do; 05.2024	Tools/Hilfen
Bilder mit Alternativtexten versehen	prüfen/ergänzen -Attribut für jedes <img /> falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=""> </img_src="..."> Sonderfall: inline svg	"web Developer" (Bowsererweitertung)
Videos mit Untertiteln versehen (sh. c't 2022, Heft 14, Beispiel 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
Bedienbarkeit per Tastatur ermöglichen durch: Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren	prüfen/umsetzen
Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden: HTML-Attribut tabindex setzen	prüfen/umsetzen
Darstellung von Maus- sowie Tastaturinteraktionen: css-Pseudoklassen "hover" (für Mausinteraktionen) und "focus" (für Tataturbedienung) nutzen.	prüfen/umsetzen
3. Vorgaben zur VERSTÄNDLICHKEIT
4. Vorgaben zur ROBUSTHEIT

@@ Zeile 19: / Zeile 19: @@
 ===Grad der Barrierefreiheit von SuperX===
 {| class="wikitable"
 |-
-! 1. Vorgaben zur WAHRNEHMBARKEIT !! !!
+! 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</span>
+!
+!
 |-
-! 1.1. Textalternativen für audiovisuelle Inhalte !! SuperX to do; 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
 |-
-| Bilder mit Alternativtexten versehen
+| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit Alternativtexten versehen
 | prüfen/ergänzen
-* <alt>-Attribut für jedes <img>
+* -Attribut für jedes <img />
-* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): </br> <img_src="..." alt="">
+* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt=""> </img_src="...">
 * Sonderfall: inline svg
 |
 * "web Developer" (Bowsererweitertung)
 |-
-| Videos mit Untertiteln versehen (sh. c't 2022, Heft 14, Beispiel S. 137)
+| style="text-align: left;" data-mce-style="text-align: left;"|Videos mit Untertiteln versehen (sh. c't 2022, Heft 14, Beispiel S. 137)
 | prüfen/ergänzen
 |
 * "HappyScribe" (zur autom. Untertitelerzeugung)
 |-
-! 1.2 Textgröße !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|1.2 Textgröße
+!
+!
 |-
-| 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
 |-
-| Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei:
+| style="text-align: left;" data-mce-style="text-align: left;"|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 !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|1.3 Kontraste
+!
+!
 |-
-| Kontrastverhältnis sichern; lt WCAG 2.0:
+| style="text-align: left;" data-mce-style="text-align: left;"|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)
@@ Zeile 61: / Zeile 70: @@
 * Color Contrast Checker (zum Messen von Farbwerten)
 |-
-! 1.4 ARIA-Attribute (*) !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|1.4 ARIA-Attribute (*)
+!
+!
 |-
-| (*) Accessible Rich Internet Applications
+| style="text-align: left;" data-mce-style="text-align: left;"|(*) Accessible Rich Internet Applications
 ARIA-Attribute für Screenreader einsetzen
 | prüfen/ergänzen
 |
 |-
-! 2. Vorgaben zur  BEDIENBARKEIT !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">2. Vorgaben zur BEDIENBARKEIT</span>
+!
+!
 |-
-| Bedienbarkeit per Tastatur ermöglichen durch:
+| style="text-align: left;" data-mce-style="text-align: left;"|Bedienbarkeit per Tastatur ermöglichen durch:
 * Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren
 |  prüfen/umsetzen
 |
 |-
-| Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
+| style="text-align: left;" data-mce-style="text-align: left;"|Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
 * HTML-Attribut tabindex setzen
 | prüfen/umsetzen
 |
 |-
-| Darstellung von Maus- sowie Tastaturinteraktionen:
+| style="text-align: left;" data-mce-style="text-align: left;"|Darstellung von Maus- sowie Tastaturinteraktionen:
-* css-Pseudoklassen "hover" (für Mausinteraktionen) und "focus" (für Tataturbedienung) nutzen.
+* css-Pseudoklassen "hover" (für Mausinteraktionen) und
+* "focus" (für Tataturbedienung) nutzen.
 | prüfen/umsetzen
 |
 |-
-! 3. Vorgaben zur  VERSTÄNDLICHKEIT !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT</span>
+!
+!
 |-
-! 4. Vorgaben zur  ROBUSTHEIT !! !!
+! style="text-align: left;" data-mce-style="text-align: left;"|<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">4. Vorgaben zur ROBUSTHEIT</span>
+!
+!
 |}