Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
(Änderung 12787 von Floss (Diskussion) rückgängig gemacht.)
Markierung: Rückgängigmachung
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).  


<div><h3>Grad der Barrierefreiheit von SuperX</h3></div><div><table class="wikitable"><tbody><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 &gt; Level 1<br></span></th><th><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">&nbsp;SuperX-Status, 05.2024</span></th><th><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">&nbsp;Tools/Hilfen</span></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></th></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen:<br class="mw_emptyline"><div><ul><li>jedem <img>  ein <alt>-Attribut hinzufügen,</alt></li><li>falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br> <img_src="..." alt=""> </img_src="..."></li><li>Sonderfall: inline svg</li></ul></div></td><td>ok für:<br class="mw_emptyline"><div><ul><li>nd_navi_top/_panel_orgunits/_bottom/_resultset, </li><li>nd_modul_info, </li><li>nd_query_list, </li><li>nd_selectionform,</li><li>nd_buttonbar_mask/_table/_export,</li><li>nd_button_*</li><li>nd_resultset_tree/_man</li></ul></div></td><td><br class="mw_emptyline"><div><ul><li>"web Developer" (Bowsererweitertung)</li></ul></div></td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Videos mit <strong>Untertitel</strong>n versehen <br class="mw_emptyline"><div><ul><li>sh. Beispiel in c't 2022, Heft 14, S. 137</li></ul></div></td><td>prüfen/ergänzen:</td><td><br class="mw_emptyline"><div><ul><li>"HappyScribe" (zur autom. Untertitelerzeugung)</li></ul></div></td></tr><tr><th style="text-align: left;" data-mce-style="text-align: left;">1.2 Textgröße</th><th>&nbsp;</th><th>&nbsp;</th></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Text mit mind. <strong>10-12px</strong> anbieten.</td><td>prüfen/umsetzen</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>: <br class="mw_emptyline"><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>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><th style="text-align: left;" data-mce-style="text-align: left;">1.3 Kontraste</th><th>&nbsp;</th><th>&nbsp;</th></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern; lt WCAG 2.0: <br class="mw_emptyline"><div><ul><li>für Fließtext: 4,5 : 1</li><li>für Überschriften: 3:1</li><li>Problemfall: Text über Bildern</li></ul></div></td><td>prüfen/umsetzen</td><td><br class="mw_emptyline"><div><ul><li>"WAVE" (Browsererweiterung)</li><li>Color Contrast Analyzer</li><li>Color Contrast Checker (zum Messen von Farbwerten)</li></ul></div></td></tr><tr><th style="text-align: left;" data-mce-style="text-align: left;">1.4 ARIA-Attribute (*)</th><th>&nbsp;</th><th>&nbsp;</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>prüfen/ergänzen</td><td>&nbsp;</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 &gt; Level 2<br></span></th><th>&nbsp;</th><th>&nbsp;</th></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen durch:<br class="mw_emptyline"><div><ul><li><strong>Jump-, Skiplink</strong>s als Sprungmarken am Dokumentbeginn definieren</li><li>sh. Beispiel in c't 2022, Heft 15, S. 165</li></ul></div></td><td>prüfen/umsetzen<br class="mw_emptyline"><br class="mw_emptyline"></td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden: <br class="mw_emptyline"><div><ul><li>HTML-Attribut <strong>tabindex</strong> setzen</li></ul></div></td><td>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <br><br class="mw_emptyline"><div><ul><li>"<strong>hover</strong>" (für Mausinteraktionen),</li><li>"<strong>focus</strong>" (für Tataturbedienung).</li></ul></div></td><td>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Ggf. <strong>css-outline</strong> als Orientierungshilfe nutzen.</td><td>prüfen/umsetzen</td><td>&nbsp;</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: <br class="mw_emptyline"><div><ul><li>modale Dialoge,</li><li>Einverständniserklärungen,</li></ul></div>wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.<div><ul><li>sh. Beispiel in c't 2022, Heft 15, S. 165</li></ul></div></td><td>prüfen/umsetzen<br class="mw_emptyline"><br class="mw_emptyline"></td><td>&nbsp;</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. <br class="mw_emptyline"><div><ul><li>sh. Erläuterung in c't 2022, Heft 15, S. 165</li></ul></div></td><td>prüfen/umsetzen</td><td><br class="mw_emptyline"><div><ul><li>Github-Repository vonW3C für copy-paste-taugliche Beispiele </li><li>sh. ct.de/yxcd </li></ul></div></td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></td><td>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit <br class="mw_emptyline"><div><ul><li>Überschrift und/oder </li><li>aria-label bzw. aria-labelledeby</li></ul></div>versehen.</td><td>prüfen/umsetzen</td><td>&nbsp;</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>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites,</td><td>prüfen/umsetzen</td><td>&nbsp;</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>prüfen/umsetzen</td><td><br class="mw_emptyline"><div><ul><li>sh. ct.de/yxcd</li></ul></div></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>prüfen/umsetzen</td><td>&nbsp;</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 &gt; Level 3<br></span></strong></th><td>&nbsp;</td><td>&nbsp;</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<br></span><br class="mw_emptyline"><div><ul><li>lang="de" im-Element</li><li>oder nur für Textblöcke </li><li>oder nur für einzelne Wörte</li></ul></div></td><td>prüfen/umsetzen<br class="mw_emptyline"><br class="mw_emptyline"></td><td>&nbsp;</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>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:<br class="mw_emptyline"><div><ul><li>mit aria-label: </li></ul></div><button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button><div><ul><li>oder <br> </li></ul></div><label> Ihre Mail <br><input type="email" name="email"> <br></label></td><td>prüfen/umsetzen</td><td>&nbsp;</td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften.<br class="mw_emptyline"><div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li></ul></div></td><td>&nbsp;prüfen/umsetzen</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. <br class="mw_emptyline"><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></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li></ul></div></td><td>&nbsp;prüfen/umsetzen</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></td></tr><tr><td style="text-align: left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen.</td><td>&nbsp;prüfen/umsetzen</td><td> "Nu Validator" - https:/validator.nu: <br class="mw_emptyline"><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></li><li>sh. ct.de/yxcd</li></ul></div></td></tr></tbody></table></div>
===Grad der Barrierefreiheit von SuperX===
 
{| 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 > Level 1<br /></span>
! SuperX-Status, 05.2024
! Tools/Hilfen
|-
! 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;"|Bilder mit '''Alternativtexte'''n versehen:
* jedem <img> ein <alt>-Attribut hinzufügen,
* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br /> <img_src="..." alt="">
* Sonderfall: inline svg
|ok für:
* nd_navi_top/_panel_orgunits/_bottom/_resultset,
* nd_modul_info,
* nd_query_list,
* nd_selectionform,
* nd_buttonbar_mask/_table/_export,
* nd_button_*
* nd_resultset_tree/_man
|
* "web Developer" (Bowsererweitertung)
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Videos mit '''Untertitel'''n versehen  
* sh. Beispiel in c't 2022, Heft 14, S. 137
|prüfen/ergänzen:
|
* "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 Checker (zum Messen von Farbwerten)
|-
! 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
'''ARIA-Attribute für Screenreader''' einsetzen
|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 > Level 2<br /></span>
! 
! 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Bedienbarkeit per Tastatur ermöglichen durch:
* '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren
* sh. Beispiel in c't 2022, Heft 15, S. 165
|prüfen/umsetzen
 
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
* HTML-Attribut '''tabindex''' setzen
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <br />
* "'''hover'''" (für Mausinteraktionen),
* "'''focus'''" (für Tataturbedienung).
|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 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.
* sh. Beispiel in c't 2022, Heft 15, S. 165
|prüfen/umsetzen
 
| 
|-
| 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.
* sh. Erläuterung in c't 2022, Heft 15, S. 165
|prüfen/umsetzen
|
* 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 '''div'''S und '''span'''S '''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.
|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>
* lang="de" im-Element
* oder nur für Textblöcke
* oder nur für einzelne Wörte
|prüfen/umsetzen
 
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Textalternativen''' integrieren:'''
* in einfacher Sprache,
* in Gehörlosensprache, <br />
* Worterklärungen oder
* Abkürzungsumschreibungen.
* z.B. Tooltip erzeugen <br />
* sh. Beispiel in c't 2022, Heft 15, S. 166
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Eingabefelder '''beschriften:
* 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>
|prüfen/umsetzen
| 
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''Formularabschnitte''' beschriften.
* z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br />
* sh. Beispiel in c't 2022, Heft 15, S. 166
| prüfen/umsetzen
|
|-
| style="text-align: left;" data-mce-style="text-align: left;"|'''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" <br />
* sh. Beispiel in c't 2022, Heft 15, S. 166
| 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;">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. 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
* 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

Version vom 27. April 2024, 16:38 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.2024  Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen:
  • jedem <img> ein <alt>-Attribut hinzufügen,
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):
    <img_src="..." alt="">
  • Sonderfall: inline svg
 ok für:
  • nd_navi_top/_panel_orgunits/_bottom/_resultset,
  • nd_modul_info,
  • nd_query_list,
  • nd_selectionform,
  • nd_buttonbar_mask/_table/_export,
  • nd_button_*
  • nd_resultset_tree/_man
  • "web Developer" (Bowsererweitertung)
Videos mit Untertiteln versehen
  • sh. Beispiel in c't 2022, Heft 14, 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 > Level 2
 		   
Bedienbarkeit per Tastatur ermöglichen durch:
  • Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren
  • sh. Beispiel in c't 2022, Heft 15, S. 165
 prüfen/umsetzen  
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.

  • sh. Beispiel in c't 2022, Heft 15, S. 165
 prüfen/umsetzen  
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
 prüfen/umsetzen
  • 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
  • lang="de" im-Element
  • oder nur für Textblöcke
  • oder nur für einzelne Wörte
 prüfen/umsetzen  
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
 prüfen/umsetzen  
Eingabefelder beschriften:
  • 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>

prüfen/umsetzen  
Formularabschnitte beschriften.
  • z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten
  • sh. Beispiel in c't 2022, Heft 15, S. 166
  prüfen/umsetzen
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
  prüfen/umsetzen
4. Vorgaben zur ROBUSTHEIT > Level 4
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.
  • sh. ct.de/yxcd

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, 2. Teil c't 15/2022, S164
Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=12788“