Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

KKeine Bearbeitungszusammenfassung
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</span>
! 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>
!  
! 
!  
! 
|-
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
! SuperX to do; 05.2024
!SuperX to do; 05.2024
! Tools/Hilfen
!Tools/Hilfen
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit Alternativtexten versehen
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit Alternativtexten versehen
| prüfen/ergänzen:
|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  
* Sonderfall: inline svg
|
|
* "web Developer" (Bowsererweitertung)  
* "web Developer" (Bowsererweitertung)
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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 <br />
| prüfen/ergänzen
|prüfen/ergänzen:
|  
* sh. Beispiel in c't 2022, Heft 14, S. 137
* "HappyScribe" (zur autom. Untertitelerzeugung)  
|
* "HappyScribe" (zur autom. Untertitelerzeugung)
|-
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.2 Textgröße
! style="text-align: left;" data-mce-style="text-align: left;"|1.2 Textgröße
!  
! 
! 
! 
|-
|-
| 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
|prüfen/umsetzen
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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  
* Textverdoppelung
* Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)  
* Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)
| prüfen/umsetzen
|prüfen/umsetzen
| 
| 
|-
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.3 Kontraste
! style="text-align: left;" data-mce-style="text-align: left;"|1.3 Kontraste
!  
! 
!  
! 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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 Fließtext: 4,5 : 1
* für Überschriften: 3:1  
* für Überschriften: 3:1
* Problemfall: Text über Bildern
* Problemfall: Text über Bildern
| prüfen/umsetzen
|prüfen/umsetzen
|  
|
* "WAVE" (Browsererweiterung)
* "WAVE" (Browsererweiterung)
* Color Contrast Analyzer
* Color Contrast Analyzer
Zeile 71: Zeile 72:
|-
|-
! style="text-align: left;" data-mce-style="text-align: left;"|1.4 ARIA-Attribute (*)
! style="text-align: left;" data-mce-style="text-align: left;"|1.4 ARIA-Attribute (*)
!  
! 
! 
! 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|(*) Accessible Rich Internet Applications  
| style="text-align: left;" data-mce-style="text-align: left;"|(*) Accessible Rich Internet Applications  
ARIA-Attribute für Screenreader einsetzen
ARIA-Attribute für Screenreader einsetzen
| prüfen/ergänzen
|prüfen/ergänzen
| 
| 
|-
|-
! 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>
! 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>
!  
! 
!  
! 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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
* Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren
| prüfen/umsetzen
|prüfen/umsetzen
* sh. Beispiel in c't 2022, Heft 15, S. 165
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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  
* HTML-Attribut tabindex setzen
| prüfen/umsetzen
|prüfen/umsetzen
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|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
* css-Pseudoklassen "hover" (für Mausinteraktionen) und
* "focus" (für Tataturbedienung) nutzen.  
* "focus" (für Tataturbedienung) nutzen.
| prüfen/umsetzen
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|ggf. css-outline als Orientierungshilfe nutzen.
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innherhalb 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.
|prüfen/umsetzen
* sh. Beispiel in c't 2022, Heft 15, S. 165
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Tablisten-Handling (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected. <br />
|prüfen/umsetzen
* sh. Erläuterung in c't 2022, Heft 15, S. 165
|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 divS und spanS in Formularen möglichst vermeiden. <br />
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Jeden größeren Inhaltsblock ("landmark") mit
* Überschrift und/oder
* aria-label bzw. aria-labelledeby
versehen.
| 
| 
| 
|-
|-
! 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>
! 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>
!  
! 
!  
! 
|-
|-
! 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>
! 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>
!  
! 
!  
! 
|}
|}

Version vom 25. April 2024, 18:19 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    
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
prüfen/ergänzen:
  • sh. Beispiel in c't 2022, Heft 14, S. 137
  • "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
  • sh. Beispiel in c't 2022, Heft 15, S. 165
  
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  
ggf. css-outline als Orientierungshilfe nutzen. prüfen/umsetzen  
ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innherhalb 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.

prüfen/umsetzen
  • sh. Beispiel in c't 2022, Heft 15, S. 165
  
Tablisten-Handling (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected.
prüfen/umsetzen
  • sh. Erläuterung in c't 2022, Heft 15, S. 165
 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.

   
3. Vorgaben zur VERSTÄNDLICHKEIT    
4. Vorgaben zur ROBUSTHEIT    
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=12770“