Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
Zeile 32: Zeile 32:
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit '''Alternativtexte'''n 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 /> <img />
* jedem <img /> ein <alt>-Attribut hinzufügen,
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <img_src="..." alt=" "><br /> <img_src="..." alt=""> </img_src="...">
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt="">  
* Sonderfall: inline svg
* Sonderfall: inline svg
|
|
Zeile 149: Zeile 149:
| 
| 
|-
|-
| 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: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT > Level 3<br /></span>'''
| 
| 
| 
| 
Zeile 166: Zeile 166:
* Abkürzungsumschreibungen.
* Abkürzungsumschreibungen.
|prüfen/umsetzen:
|prüfen/umsetzen:
z.B. Tooltip erzeugen mit:  
z.B. Tooltip erzeugen mit:  
* <abbr title="Accessible Rich Internet Applications">ARIA>/abbr><br />
* <abbr title="Accessible Rich Internet Applications">ARIA>/abbr><br />
Zeile 175: Zeile 173:
| 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:
|prüfen/umsetzen:
 
* mit aria-label:
 
<button type="button" <br />
z.B.
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>
| 
| 
|-
|-
| style="text-align: left;" data-mce-style="text-align: left;"|''''''
| style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
| 
| prüfen/umsetzen:
| 
* z.B. Nutzung von <legend> zur Beschriftung  <br /> von <fieldset>-Formularabschnitten <br /> sh. Beispiel in c't 2022, Heft 15, S. 166
|  
|-
|-
! 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>
! 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:54 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:
  • jedem <img /> ein <alt>-Attribut hinzufügen,
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):
    <img_src="..." alt="">
  • 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:
  • 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>

 
Formularabschnitte beschriften.  prüfen/umsetzen:
  • z.B. Nutzung von <legend> zur Beschriftung
    von <fieldset>-Formularabschnitten
    sh. Beispiel in c't 2022, Heft 15, S. 166
4. Vorgaben zur ROBUSTHEIT > Level 4
 		   
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=12774“