SuperX barrierefrei: Unterschied zwischen den Versionen

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

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,</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

@@ Zeile 1: / Zeile 1: @@
 ==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 und Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
+* '''Barrierefreie Informationstechnik-Verordnung (BITV)''',
-* '''Web Content Accessibility Guidelines (WCAG 2.0)''', herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw. deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''.
+** 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===
@@ Zeile 12: / Zeile 16: @@
 * Verständlichkeit
 * Robustheit
+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"><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>
-{| class="wikitable"
-|-
+===Literatur===
-! WAHRNEHMBARKEIT !! !!
+* 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
-! Textalternativen für audiovisuelle Inhalte !! Tools/Hilfen!! SuperX 05.2024
-|-
-| <alt>-Attribut für jedes <img> || Bowsererweitertung "web Developer" || to do || Beispiel
-|-
-| falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): </br> <img_src="..." alt=""> || || to do || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-! Textgröße !! !! !!
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-! Kontraste !! !! !!
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-! ARIA-Attribute !! !! !!
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|-
-| Beispiel || Beispiel || Beispiel || Beispiel
-|}
-====Bedienbarkeit====
-====Verständlichkeit====
-====Robustheit====