Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
Zeile 22: Zeile 22:
{| class="wikitable"
{| class="wikitable"
|-
|-
! 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 > Level 1<br /></span>
! 
! 
! 
! 
Zeile 30: Zeile 30:
!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 '''Alternativtexte'''n versehen
|prüfen/ergänzen:
|prüfen/ergänzen:
* -Attribut für jedes <img />
* -Attribut für jedes <img /> <img />
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt=""> </img_src="...">
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=" "><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 <br />
| style="text-align: left;" data-mce-style="text-align: left;"|Videos mit '''Untertitel'''n versehen <br />
|prüfen/ergänzen:
|prüfen/ergänzen:
* sh. Beispiel in c't 2022, Heft 14, S. 137
* sh. Beispiel in c't 2022, Heft 14, S. 137
Zeile 48: Zeile 48:
! 
! 
|-
|-
| 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
| 
| 
Zeile 61: Zeile 61:
! 
! 
|-
|-
| 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
Zeile 76: Zeile 76:
|-
|-
| 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 > Level 2<br /></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-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren
|prüfen/umsetzen
|prüfen/umsetzen
* sh. Beispiel in c't 2022, Heft 15, S. 165
* sh. Beispiel in c't 2022, Heft 15, S. 165
Zeile 91: Zeile 91:
|-
|-
| 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;"|Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <br />
* css-Pseudoklassen "hover" (für Mausinteraktionen) und
* "'''hover'''" (für Mausinteraktionen),
* "focus" (für Tataturbedienung) nutzen.
* "'''focus'''" (für Tataturbedienung).
|prüfen/umsetzen
|prüfen/umsetzen
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. css-outline als Orientierungshilfe nutzen.
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. '''css-outline''' als Orientierungshilfe nutzen.
|prüfen/umsetzen
|prüfen/umsetzen
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; relevant z.B. für
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. '''focus traps''' (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; <br />relevant z.B. für:
* modale Dialoge
* modale Dialoge,
* Einverständniserklärungen
* Einverständniserklärungen,
wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
|prüfen/umsetzen
|prüfen/umsetzen
Zeile 113: Zeile 113:
| 
| 
|-
|-
| 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 />
| 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
|prüfen/umsetzen
* sh. Erläuterung in c't 2022, Heft 15, S. 165
* sh. Erläuterung in c't 2022, Heft 15, S. 165
Zeile 122: Zeile 122:


|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden. <br />
| style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende '''div'''S und '''span'''S '''in Formularen''' möglichst vermeiden. <br />
|prüfen/umsetzen
|prüfen/umsetzen
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Jeden größeren Inhaltsblock ("landmark") mit  
| style="text-align: left;" data-mce-style="text-align: left;"|Jeden größeren''' Inhaltsblock''' ("landmark") mit  
* Überschrift und/oder  
* Überschrift und/oder  
* aria-label bzw. aria-labelledeby
* aria-label bzw. aria-labelledeby
versehen.
versehen.
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Downloadlinks''' ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"
|prüfen/umsetzen
| 
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Suchfunktionen''' integrieren in komplexe Websites,
|prüfen/umsetzen
| 
| 
|-
|-
! 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;"|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)
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Zeitdruck '''zum und''' Datenverlust '''beim Beenden einer Session vermeiden.
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''<span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT > Level 3<br /></span>'''
| 
| 
|-
| 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
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:''' '''
* in einfacher Sprache,
* in Gehörlosensprache, <br />
* Worterklärungen oder
* Abkürzungsumschreibungen.
|prüfen/umsetzen:
 
 
z.B. Tooltip erzeugen mit:
* <abbr title="Accessible Rich Internet Applications">ARIA>/abbr><br />
</abbr>
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften.
|prüfen/umsetzen:
 
 
z.B.
 
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|''''''
| 
| 
|-
|-
! 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 > Level 4<br /></span>
! 
! 
! 
! 
|}
|}

Version vom 26. April 2024, 12:35 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
 		   
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 /> <img />
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=" ">
    <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 > Level 2
 		   
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  
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.

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.

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
 		prüfen/umsetzen:
  • lang="de" im-Element
  • oder nur für Textblöcke
  • oder nur für einzelne Wörte
  
Textalternativen integrieren:
  • in einfacher Sprache,
  • in Gehörlosensprache,
  • Worterklärungen oder
  • Abkürzungsumschreibungen.
 prüfen/umsetzen:


z.B. Tooltip erzeugen mit:

  • ARIA>/abbr>

  
Eingabefelder beschriften. prüfen/umsetzen:


z.B.

 
'    
4. Vorgaben zur ROBUSTHEIT > Level 4
 		   
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=12773“