Zuletzt bearbeitet vor einer Woche
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(31 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 18: Zeile 18:
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).  
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).  


===Grad der Barrierefreiheit von SuperX===
<div><h3>Grad der Barrierefreiheit von SuperX</h3></div><div><table class="wikitable"><tr><th 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></th><th>'''SuperX-Status, 05.2025'''</th><th>'''SX-/MT-Website-Status<br data-mce-bogus="1">'''</th><th>'''Tools/Hilfen'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen:


{| class="wikitable"
* jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
|-
*falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br> <img''src="..." alt=""> </img_src="...">''
! 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>
 
! 
*Sonderfall: inline svg</td><td>ok, vgl.: 
! 
 
|-
*nd_templates  (Stand 24.05.2025)
! style="text-align: left;" data-mce-style="text-align: left;"|1.1. Textalternativen für audiovisuelle Inhalte
</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">web Developer (Bowsererweitertung)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit <strong>Untertitel</strong>n versehen:
!SuperX to do; 05.2024
sh. Beispiel in c't 2022, Heft 14, S. 137
!Tools/Hilfen
</td><td>irrrelevant für SuperX-UI</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">HappyScribe (zur autom. Untertitelerzeugung)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. <strong>10-12px</strong> anbieten.</td><td> ok, vgl.:
|-
 
| style="text-align: left;" data-mce-style="text-align: left;"|Bilder mit '''Alternativtexte'''n versehen
* sx_common.css  (mit font-size: 10-12px)
|prüfen/ergänzen:
</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ordentliches <strong>Layout</strong> (Wort-, Zeilenabstände) sicherstellen, auch <strong>bei</strong>: <div><ul><li><strong>Textverdoppelung</strong></li><li><strong>Responsivität:</strong> von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</li></ul></div></td><td> ok, vgl.: <div><ul><li>sx_menue</li><li>sx_maske</li><li> sx_tabelle</li></ul></div></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern; lt WCAG 2.0: <div>
* jedem <img>  ein <alt>-Attribut hinzufügen,
* für Fließtext: 4,5: 1<ul>  <li>für Überschriften: 3:1</li><li> Problemfall: Text über Bildern</li></ul></div></td><td>'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)'''</td><td><br data-mce-bogus="1"></td><td>
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt="">  
* WAVE (Browsererweiterung)
* Sonderfall: inline svg
|
* "web Developer" (Bowsererweitertung)
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Videos mit '''Untertitel'''n versehen <br />
|prüfen/ergänzen:
* sh. Beispiel in c't 2022, Heft 14, S. 137
|
* "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;"|Text mit mind. '''10-12px''' anbieten
|prüfen/umsetzen
|-
| 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
| 
|-
! 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:  
* 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 Analyzer
* Color Contrast Checker (zum Messen von Farbwerten)
* Color Contrast Checker (zum Messen von Farbwerten)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications <br class="mw_emptyline"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> ok, vgl.:
|-
 
! style="text-align: left;" data-mce-style="text-align: left;"|1.4 ARIA-Attribute (*)
*nd navi top, nd navi  bottom  (Stand 24.05.2025)
! 
*nd buttonbar table, nd buttonbar export
! 
*nd button Keyfield/BackToMask/UserDoc/Bookmark/DeepLink/Konfig/intoWord/Excel*/PDF/HTML/CSV*/Copy/MaskInfoEdit/MaskToSachgeb/StyleToMask</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th 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></th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
|-
 
| style="text-align: left;" data-mce-style="text-align: left;"|(*) Accessible Rich Internet Applications  
* <strong>Jump-, Skiplink</strong>s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf'''<br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:  
'''ARIA-Attribute für Screenreader''' einsetzen
 
|prüfen/ergänzen
* HTML-Attribut <strong>tabindex</strong> setzen</td><td>in Bearbeitung
| 
'''Klärungsbedarf (Stand?)'''
|-
</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <div><ul><li>"<strong>hover</strong>" (für Mausinteraktionen),</li><li>"<strong>focus</strong>" (für Tataturbedienung).</li></ul></div></td><td>ok, vgl.:
! 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>
 
! 
* sx_menue
! 
* sx_maske
|-
* sx_tabelle
| style="text-align: left;" data-mce-style="text-align: left;"|Bedienbarkeit per Tastatur ermöglichen durch:
'''Klärungsbedarf (vollständig?)'''
* '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren
</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>css-outline</strong> als Orientierungshilfe nutzen.</td><td>'''Klärungsbedarf (Bedeutung?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>focus traps</strong> (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; <br>relevant z.B. für:  
|prüfen/umsetzen
 
* sh. Beispiel in c't 2022, Heft 15, S. 165
*modale Dialoge,
| 
*Einverständniserklärungen, wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
|-
 
| style="text-align: left;" data-mce-style="text-align: left;"|Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:  
(sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf (sx-relevant?)'''<br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Tablisten-Handling</strong> (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)</td><td>'''Klärungsbedarf (sx-relevant?)'''</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Die Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></td><td>'''Klärungsbedarf (zutreffend?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Downloadlinks</strong> ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"</td><td>ok, vgl.
* HTML-Attribut '''tabindex''' setzen
 
|prüfen/umsetzen
* Exportoptionen </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:
| 
 
|-
* Überschrift und/oder
| style="text-align: left;" data-mce-style="text-align: left;"|Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <br />
* aria-label bzw. aria-labelledeby versehen.</td><td>'''Klärungsbedarf (volllständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites, </td><td> ok, vgl.
* "'''hover'''" (für Mausinteraktionen),
 
* "'''focus'''" (für Tataturbedienung).
* sx_menue</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Modenen<strong> Spamschutz </strong>wie<strong> "</strong>reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.</td><td>irrrelevant für SuperX-UI</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">sh. ct.de/yxcd</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>zum und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td><td>  '''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th><td></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><strong>Sprache</strong> angeben zum besseren Artikulieren durch Screeenreader:</span><br class="mw_emptyline">
|prüfen/umsetzen
 
| 
* lang="de" im -Element
|-
* oder nur für Textblöcke
| style="text-align: left;" data-mce-style="text-align: left;"|Ggf. '''css-outline''' als Orientierungshilfe nutzen.
* oder nur für einzelne Wörte</td><td> ok, vgl.:
|prüfen/umsetzen
 
| 
* sx_menue 
|-
<strong>Klärungsbedarf (vollständig?)</strong><br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren:'''<br class="mw_emptyline"><div><ul><li>in einfacher Sprache, </li><li>in Gehörlosensprache, <br></li><li>Worterklärungen oder</li><li>Abkürzungsumschreibungen.</li><li> z.B. Tooltip erzeugen <br></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li></ul></div>'''</td><td>ok </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:
| 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,
* 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)  


|-
* mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button><div><ul><li>oder  </li></ul></div><label> Ihre Mail <br><input type="email" name="email"> <br></label></td><td>'''Klärungsbedarf (vollständig?)''' </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften:<div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend>
| style="text-align: left;" data-mce-style="text-align: left;"|Barrierefreiheit störende '''div'''S und '''span'''S '''in Formularen''' möglichst vermeiden. <br />
(sh. Beispiel in c't 2022, Heft 15, S. 166)
|prüfen/umsetzen
</li></ul></div></td><td>'''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td> </td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Clientseitige Validierung der Eingaben</strong> vor dem Absenden:<div><ul><li>z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. </li><li> z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" <br>(sh. Beispiel in c't 2022, Heft 15, S. 166)
| 
</li></ul></div></td><td>'''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td> </td></tr><tr><th 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 &gt; Level 4<br>'''</span></th><td></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td><td>'''ok'''</td><td><br data-mce-bogus="1"></td><td> Nu Validator - https:/validator.nu: <div><ul><li>prüft statisches HTML (nicht jedoch js-gerendertes HTML), </li><li> interpretiert und moniert HTML-Regeln. </li><li>Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br>(sh. ct.de/yxcd)
|-
</li></ul></div></td></tr></table></div>
| 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.
|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;"|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 <br />
sh. Beispiel in c't 2022, Heft 15, S. 166
| 
|-
| 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>
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
| prüfen/umsetzen:
* z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br />
sh. Beispiel in c't 2022, Heft 15, S. 166
|
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Clientseitige Validierung der Eingaben'''vor dem Absenden.
| prüfen/umsetzen:
* 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
|
|-
! 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;"|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. <br />
(sh. auch ct.de/yxcd)
|}


===Literatur===
=== 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, 1. Teil c't 14/2022, S136 ff
* Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164
*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff

Aktuelle Version vom 26. Mai 2025, 07:10 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.2025SX-/MT-Website-Status
Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen:
  • jedem <img> ein <alt>-Attribut hinzufügen,</alt>
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):
    <imgsrc="..." alt=""> </img_src="...">
  • Sonderfall: inline svg
ok, vgl.:
  • nd_templates (Stand 24.05.2025)


web Developer (Bowsererweitertung)
Videos mit Untertiteln versehen:

sh. Beispiel in c't 2022, Heft 14, S. 137

irrrelevant für SuperX-UI

HappyScribe (zur autom. Untertitelerzeugung)
1.2 Textgröße
Text mit mind. 10-12px anbieten. ok, vgl.:
  • sx_common.css (mit font-size: 10-12px)

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)
 ok, vgl.:
  • sx_menue
  • sx_maske
  • sx_tabelle

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
Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)
  • 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    		 ok, vgl.:
    • nd navi top, nd navi bottom (Stand 24.05.2025)
    • nd buttonbar table, nd buttonbar export
    • nd button Keyfield/BackToMask/UserDoc/Bookmark/DeepLink/Konfig/intoWord/Excel*/PDF/HTML/CSV*/Copy/MaskInfoEdit/MaskToSachgeb/StyleToMask

    2. Vorgaben zur BEDIENBARKEIT = Level 2

    Bedienbarkeit per Tastatur ermöglichen dazu:
    • Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)
    		Klärungsbedarf


    Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
    • HTML-Attribut tabindex setzen
    		in Bearbeitung

    Klärungsbedarf (Stand?)


    Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen:
    • "hover" (für Mausinteraktionen),
    • "focus" (für Tataturbedienung).
    		ok, vgl.:
    • sx_menue
    • sx_maske
    • sx_tabelle

    Klärungsbedarf (vollständig?)


    Ggf. css-outline als Orientierungshilfe nutzen.Klärungsbedarf (Bedeutung?)
    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)    		Klärungsbedarf (sx-relevant?)

    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)Klärungsbedarf (sx-relevant?)

    Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)
    Die Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.
    		Klärungsbedarf (zutreffend?)
    Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"ok, vgl.
    • Exportoptionen

    Jeden größeren Inhaltsblock ("landmark") mit:
    • Überschrift und/oder
    • aria-label bzw. aria-labelledeby versehen.
    		Klärungsbedarf (volllständig?)
    Suchfunktionen integrieren in komplexe Websites, ok, vgl.
    • sx_menue

    Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.irrrelevant für SuperX-UI

    sh. ct.de/yxcd
    Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden. Klärungsbedarf (vollständig?)
    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
    		 ok, vgl.:
    • sx_menue
    Klärungsbedarf (vollständig?)


    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
    		ok
    Eingabefelder beschriften:
    • mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen"
      title="Schließen">X</button>
      • oder
      <label> Ihre Mail
      <input type="email" name="email">
      </label>
    		Klärungsbedarf (vollständig?)
    Formularabschnitte beschriften:
    • z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten
      </fieldset></legend>

    (sh. Beispiel in c't 2022, Heft 15, S. 166)

    		Klärungsbedarf (vollständig?)
    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)
    		Klärungsbedarf (vollständig?)
    4. Vorgaben zur ROBUSTHEIT > Level 4

    Für sauberes HTML sorgen. ok
    		 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 ff
    • Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff
    Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=14601“