Zuletzt bearbeitet vor 11 Monaten
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen
 
(13 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).  


<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>&nbsp;<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">SuperX-Status 05.2024</span></th><th>&nbsp;<span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">Tools/Infos</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>Github-Repository vonW3C für copy-paste-taugliche Beispiele <br class="mw_emptyline">sh. ct.de/yxcd </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>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>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;"><p class="mw_paragraph"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><strong>Sprache</strong> angeben zum besseren Artikulieren durch Screeenreader:<br></span></p><p class="mw_paragraph"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><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></span></p></td><td>prüfen/umsetzen<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:<strong> </strong><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></ul></div>sh. Beispiel in c't 2022, Heft 15, S. 166</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.</td><td>prüfen/umsetzen:<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>&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></ul></div>sh. Beispiel in c't 2022, Heft 15, S. 166</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></ul></div>sh. Beispiel in c't 2022, Heft 15, S. 166</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></ul></div>sh. ct.de/yxcd</td></tr></tbody></table></div>
<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>&nbsp;SuperX-Status, 05.2024</th><th>SX-/MT-Website-Status<br data-mce-bogus="1"></th><th>&nbsp;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:<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 data-mce-bogus="1"></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 data-mce-bogus="1"></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><br data-mce-bogus="1"></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> ok für: <br class="mw_emptyline"><div><ul><li>sx_common.css mit font-size: 10-12px</li></ul></div></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>: <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> ok für: <br class="mw_emptyline"><div><ul><li>sx_downloads_menue.htm</li><li>sx_downloads_maske.htm</li><li>sx_downloads_tabelle.htm</li></ul></div></td><td><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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 data-mce-bogus="1"></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><br data-mce-bogus="1"></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> ok für:<br class="mw_emptyline"><div><ul><li>nd_navi_top/_bottom</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;"><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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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>geprüft mit <strong>Klärungsbedarf</strong> für <br class="mw_emptyline"><div><ul><li>sx_downloads_menue.htm</li><li>sx_downloads_maske.htm</li><li>sx_downloads_tabelle.htm</li></ul></div></td><td><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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 data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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 data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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> ok für:<br class="mw_emptyline"><div><ul><li>sx_menue.xls <strong>&gt;&gt; Klärungsbedarf</strong></li></ul></div><br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><br data-mce-bogus="1"></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><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. <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><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>&nbsp;prüfen/umsetzen</td><td><br data-mce-bogus="1"></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>


===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

Aktuelle Version vom 15. Mai 2024, 07:33 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

<tbody></tbody>
1. Vorgaben zur WAHRNEHMBARKEIT > Level 1
 SuperX-Status, 05.2024SX-/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):
    <img_src="..." alt=""> </img_src="...">
  • 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. ok für:
  • 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 für:
  • sx_downloads_menue.htm
  • sx_downloads_maske.htm
  • sx_downloads_tabelle.htm

 
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		 ok für:
  • nd_navi_top/_bottom

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).
geprüft mit Klärungsbedarf für
  • sx_downloads_menue.htm
  • sx_downloads_maske.htm
  • sx_downloads_tabelle.htm

 
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
 ok für:
  • sx_menue.xls >> Klärungsbedarf



 
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" <br="">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
    </fieldset></legend>
  • 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=12881“