https://superxhosting.de/wiki/api.php?action=feedcontributions&feedformat=atom&user=Floss SuperX - Benutzerbeiträge [de] 2026-05-05T16:57:28Z Benutzerbeiträge MediaWiki 1.39.11 https://superxhosting.de/wiki/index.php?title=Datei:MT25_KWR_o_Lsg.jpg&diff=15753 Datei:MT25 KWR o Lsg.jpg 2026-04-23T18:40:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:MT_25_plus_small_4.svg&diff=15749 Datei:MT 25 plus small 4.svg 2026-04-21T10:56:39Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:kreuzwortraetsel_210420261107462.pdf&diff=15746 Datei:kreuzwortraetsel 210420261107462.pdf 2026-04-21T09:55:02Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:MT_25_plus_small_1.svg&diff=15745 Datei:MT 25 plus small 1.svg 2026-04-21T09:12:58Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:MT_25_plus_small_3.svg&diff=15743 Datei:MT 25 plus small 3.svg 2026-04-21T09:12:57Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:MT_25_plus_small_2.svg&diff=15744 Datei:MT 25 plus small 2.svg 2026-04-21T09:12:56Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:MT_25_plus_small.svg&diff=15730 Datei:MT 25 plus small.svg 2026-04-01T16:55:42Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15728 SuperX barrierefrei 2026-03-24T15:57:48Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> <br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;!--<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;--&gt;<br /> <br /> &lt;div&gt;&lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''1. Vorgaben zur WAHRNEHMBARKEIT &amp;gt; Level 1&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&amp;nbsp;SuperX-Status, 05.2025&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit &lt;strong&gt;Alternativtexte&lt;/strong&gt;n versehen.&lt;br class=&quot;mw_emptyline&quot;&gt; &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. &lt;strong&gt;10-12px&lt;/strong&gt; anbieten.&lt;/td&gt;&lt;td&gt; ok. <br /> (sh. sx_common.css) <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches &lt;strong&gt;Layout&lt;/strong&gt; (Wort-, Zeilenabstände) sicherstellen, auch &lt;strong&gt;bei&lt;/strong&gt; &lt;strong&gt;Textverdoppelung und&lt;/strong&gt; &lt;strong&gt;Responsivität:&lt;/strong&gt; von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt; ok.&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Kontrastverhältnis&lt;/strong&gt; sichern.<br /> (gem. WCAG 2.0).<br /> &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;ARIA-Attribute für Screenreader&lt;/strong&gt; einsetzen&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''2. Vorgaben zur BEDIENBARKEIT &amp;gt; Level 2'''&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 165)&lt;/span&gt;<br /> &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Bedienbarkeit per Tastatur''' ermöglichen. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Maus- und Tastaturinteraktionen''' (hover/focus) darstellen. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok. &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT &amp;gt; Level 3&lt;/span&gt;&lt;/strong&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 166)&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader.&lt;/span&gt;&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren.&lt;/td&gt;&lt;td&gt;ok <br /> (sh. Tooltips)<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;mit ARIA-Label beschriften. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden. &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br /> <br /> '''Interpretation der ARC-Toolkit-Testergbnisse:'''<br /> {{ImagePara |imgsrc=ARC.jpg|width=200px|caption=ARC-Toolkit-Testergbnisse}} <br /> <br /> Für jede geprüfte Seite werden <br /> * identifizierte Fehler (hier rot), <br /> * Warnungen (hier ocker) und <br /> * Best-Practise-Anerkennungen (hier grün) ausgewiesen, <br /> und zwar als Summe (sh. Abbildung) sowie im Detailbereich je geprüfte Testkategorie (sh. Testergebnis-Abbildungen je SuperX-Seite).<br /> <br /> <br /> <br /> '''Login-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Login.jpg|width=500px|caption=Login-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 8<br /> * Anerkennungen: 3<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=500px|caption=ARC-Testergebnis für Login-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium):<br /> {{ImagePara |imgsrc=Silktide4Login.jpg|width=300px|caption=Silktide-Testergebnis für Login-Seite}}<br /> <br /> <br /> <br /> '''Portlet-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Portlets.jpg|width=500px|caption=Portlet-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 22<br /> * Anerkennungen: 20<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=500px|caption=Testergebnis für Portlet-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium):<br /> {{ImagePara |imgsrc=Silktide4Portlets.jpg|width=300px|caption=Silktide-Testergebnis für Portlet-Seite}}<br /> <br /> <br /> <br /> '''Menü-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Menue.jpg|width=500px|caption=Menü-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 19<br /> * Anerkennungen: 13<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=500px|caption=Testergebnis für Menü-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium):<br /> {{ImagePara |imgsrc=Silktide4Menu.jpg|width=300px|caption=Silktide-Testergebnis für Menü-Seite}}<br /> <br /> <br /> <br /> '''Abfragen-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Abfragen.jpg|width=500px|caption=Abfragen-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 28<br /> * Anerkennungen: 21<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=500px|caption=Testergebnis für Abfragen-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium) einzeln:<br /> {{ImagePara |imgsrc=Silktide4Abfragen.jpg|width=300px|caption=Silktide-Testergebnis für Abfragen-Seite}}&lt;br&gt;<br /> <br /> <br /> <br /> '''Masken-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Maske.jpg|width=500px|caption=Masken-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 44<br /> * Anerkennungen: 18<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=500px|caption=Testergebnis für Masken-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium):<br /> {{ImagePara |imgsrc=Silktide4Maske.jpg|width=300px|caption=Silktide-Testergebnis für Masken-Seite}}<br /> <br /> <br /> <br /> '''Tabellen-Seite mit Testergebnissen:'''<br /> {{ImagePara |imgsrc=Tabelle.jpg|width=500px|caption=Tabellen-Seite}}<br /> <br /> ARC-Testergebnisse (Firefox):<br /> * Fehler: 0<br /> * Warnungen: 38<br /> * Anerkennungen: 3<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=500px|caption=Testergebnis für Tabellen-Seite}}<br /> <br /> Silktide-Testergebnisse (Chromium):<br /> noch nicht verfügbar<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=Datei:Silktide4Abfragen.jpg&diff=15727 Datei:Silktide4Abfragen.jpg 2026-03-24T15:26:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:Silktide4Portlets.jpg&diff=15726 Datei:Silktide4Portlets.jpg 2026-03-24T15:26:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:Silktide4Maske.jpg&diff=15725 Datei:Silktide4Maske.jpg 2026-03-24T15:26:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:Silktide4Menu.jpg&diff=15724 Datei:Silktide4Menu.jpg 2026-03-24T15:26:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:Silktide4Login.jpg&diff=15723 Datei:Silktide4Login.jpg 2026-03-24T15:26:29Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:ARC.jpg&diff=15719 Datei:ARC.jpg 2026-03-21T16:21:35Z <p>Floss: (Benutzername entfernt) (Logbucheinzelheiten entfernt)</p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=Datei:ARC.jpg&diff=15717 Datei:ARC.jpg 2026-03-21T15:51:15Z <p>Floss: </p> <hr /> <div></div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15713 SuperX barrierefrei 2026-03-18T14:03:48Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> '''Login-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Login.jpg|'''Login-Seite'''<br /> ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> '''Portlet-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Portlets.jpg|'''Portlet-Seite'''<br /> ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> '''Menü-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Menue.jpg|'''Menü-Seite'''<br /> ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> '''Abfragen-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Abfragen.jpg|'''Abfragen-Seite'''<br /> ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> '''Masken-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Maske.jpg|'''Masken-Seite'''<br /> ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> '''Tabellen-Seite mit Testergebnissen:'''<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Tabelle.jpg|'''Tabellen-Seite'''<br /> ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;!--<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;--&gt;<br /> <br /> &lt;div&gt;&lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''1. Vorgaben zur WAHRNEHMBARKEIT &amp;gt; Level 1&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&amp;nbsp;SuperX-Status, 05.2025&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit &lt;strong&gt;Alternativtexte&lt;/strong&gt;n versehen.&lt;br class=&quot;mw_emptyline&quot;&gt; &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. &lt;strong&gt;10-12px&lt;/strong&gt; anbieten.&lt;/td&gt;&lt;td&gt; ok. <br /> (sh. sx_common.css) <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches &lt;strong&gt;Layout&lt;/strong&gt; (Wort-, Zeilenabstände) sicherstellen, auch &lt;strong&gt;bei&lt;/strong&gt; &lt;strong&gt;Textverdoppelung und&lt;/strong&gt; &lt;strong&gt;Responsivität:&lt;/strong&gt; von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt; ok.&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Kontrastverhältnis&lt;/strong&gt; sichern.<br /> (gem. WCAG 2.0).<br /> &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;ARIA-Attribute für Screenreader&lt;/strong&gt; einsetzen&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''2. Vorgaben zur BEDIENBARKEIT &amp;gt; Level 2'''&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 165)&lt;/span&gt;<br /> &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Bedienbarkeit per Tastatur''' ermöglichen. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Maus- und Tastaturinteraktionen''' (hover/focus) darstellen. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok. &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT &amp;gt; Level 3&lt;/span&gt;&lt;/strong&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 166)&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader.&lt;/span&gt;&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren.&lt;/td&gt;&lt;td&gt;ok <br /> (sh. Tooltips)<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;mit ARIA-Label beschriften. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden. &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15712 SuperX barrierefrei 2026-03-18T14:02:52Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> Login-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Login.jpg|'''Login-Seite'''<br /> ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> Portlet-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Portlets.jpg|'''Portlet-Seite'''<br /> ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> Menü-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Menue.jpg|'''Menü-Seite'''<br /> ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> Abfragen-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Abfragen.jpg|'''Abfragen-Seite'''<br /> ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> Masken-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Maske.jpg|'''Masken-Seite'''<br /> ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> Tabellen-Seite mit Testergebnissen:<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Tabelle.jpg|'''Tabellen-Seite'''<br /> ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;!--<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;--&gt;<br /> <br /> &lt;div&gt;&lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''1. Vorgaben zur WAHRNEHMBARKEIT &amp;gt; Level 1&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&amp;nbsp;SuperX-Status, 05.2025&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit &lt;strong&gt;Alternativtexte&lt;/strong&gt;n versehen.&lt;br class=&quot;mw_emptyline&quot;&gt; &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. &lt;strong&gt;10-12px&lt;/strong&gt; anbieten.&lt;/td&gt;&lt;td&gt; ok. <br /> (sh. sx_common.css) <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches &lt;strong&gt;Layout&lt;/strong&gt; (Wort-, Zeilenabstände) sicherstellen, auch &lt;strong&gt;bei&lt;/strong&gt; &lt;strong&gt;Textverdoppelung und&lt;/strong&gt; &lt;strong&gt;Responsivität:&lt;/strong&gt; von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt; ok.&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Kontrastverhältnis&lt;/strong&gt; sichern.<br /> (gem. WCAG 2.0).<br /> &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;ARIA-Attribute für Screenreader&lt;/strong&gt; einsetzen&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''2. Vorgaben zur BEDIENBARKEIT &amp;gt; Level 2'''&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 165)&lt;/span&gt;<br /> &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Bedienbarkeit per Tastatur''' ermöglichen. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Maus- und Tastaturinteraktionen''' (hover/focus) darstellen. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok. &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT &amp;gt; Level 3&lt;/span&gt;&lt;/strong&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 166)&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader.&lt;/span&gt;&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren.&lt;/td&gt;&lt;td&gt;ok <br /> (sh. Tooltips)<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;mit ARIA-Label beschriften. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden. &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15707 SuperX barrierefrei 2026-03-18T13:16:24Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Login.jpg|'''Login-Seite'''<br /> Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Portlet-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Portlets.jpg|'''Portlet-Seite'''<br /> Image:ARC4Portlets.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Menü-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Menue.jpg|'''Menü-Seite'''<br /> Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Abfragen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Abfragen.jpg|'''Abfragen-Seite'''<br /> Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Masken-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Maske.jpg|'''Masken-Seite'''<br /> Image:ARC4Maske.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Tabellen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Tabelle.jpg|'''Tabellen-Seite'''<br /> Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;!--<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;--&gt;<br /> <br /> &lt;div&gt;&lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''1. Vorgaben zur WAHRNEHMBARKEIT &amp;gt; Level 1&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&amp;nbsp;SuperX-Status, 05.2025&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit &lt;strong&gt;Alternativtexte&lt;/strong&gt;n versehen.&lt;br class=&quot;mw_emptyline&quot;&gt; &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. &lt;strong&gt;10-12px&lt;/strong&gt; anbieten.&lt;/td&gt;&lt;td&gt; ok. <br /> (sh. sx_common.css) <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches &lt;strong&gt;Layout&lt;/strong&gt; (Wort-, Zeilenabstände) sicherstellen, auch &lt;strong&gt;bei&lt;/strong&gt; &lt;strong&gt;Textverdoppelung und&lt;/strong&gt; &lt;strong&gt;Responsivität:&lt;/strong&gt; von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt; ok.&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Kontrastverhältnis&lt;/strong&gt; sichern.<br /> (gem. WCAG 2.0).<br /> &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;ARIA-Attribute für Screenreader&lt;/strong&gt; einsetzen&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''2. Vorgaben zur BEDIENBARKEIT &amp;gt; Level 2'''&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 165)&lt;/span&gt;<br /> &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Bedienbarkeit per Tastatur''' ermöglichen. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Maus- und Tastaturinteraktionen''' (hover/focus) darstellen. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok. &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT &amp;gt; Level 3&lt;/span&gt;&lt;/strong&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 166)&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader.&lt;/span&gt;&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren.&lt;/td&gt;&lt;td&gt;ok <br /> (sh. Tooltips)<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;mit ARIA-Label beschriften. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden. &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15703 SuperX barrierefrei 2026-03-18T12:52:22Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Login.jpg|'''Login-Seite'''<br /> Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Portlet-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Portlet.jpg|'''Portlet-Seite'''<br /> Image:ARC4Portlet.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Menü-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Menue.jpg|'''Menü-Seite'''<br /> Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Abfragen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Abfragen.jpg|'''Abfragen-Seite'''<br /> Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Masken-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Masken.jpg|'''Masken-Seite'''<br /> Image:ARC4Masken.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Tabellen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Tabelle.jpg|'''Tabellen-Seite'''<br /> Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;!--<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;--&gt;<br /> <br /> &lt;div&gt;&lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''1. Vorgaben zur WAHRNEHMBARKEIT &amp;gt; Level 1&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&amp;nbsp;SuperX-Status, 05.2025&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit &lt;strong&gt;Alternativtexte&lt;/strong&gt;n versehen.&lt;br class=&quot;mw_emptyline&quot;&gt; &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. &lt;strong&gt;10-12px&lt;/strong&gt; anbieten.&lt;/td&gt;&lt;td&gt; ok. <br /> (sh. sx_common.css) <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches &lt;strong&gt;Layout&lt;/strong&gt; (Wort-, Zeilenabstände) sicherstellen, auch &lt;strong&gt;bei&lt;/strong&gt; &lt;strong&gt;Textverdoppelung und&lt;/strong&gt; &lt;strong&gt;Responsivität:&lt;/strong&gt; von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt; ok.&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Kontrastverhältnis&lt;/strong&gt; sichern.<br /> (gem. WCAG 2.0).<br /> &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (Accessible Rich Internet Applications)'''&lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;ARIA-Attribute für Screenreader&lt;/strong&gt; einsetzen&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''2. Vorgaben zur BEDIENBARKEIT &amp;gt; Level 2'''&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 165)&lt;/span&gt;<br /> &lt;/th&gt;&lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Bedienbarkeit per Tastatur''' ermöglichen. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Spezielle '''Reihenfolge''' anzuspringender Elemente zulassen/unterbinden: &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''Maus- und Tastaturinteraktionen''' (hover/focus) darstellen. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok. &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;In Bearbeitung.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT &amp;gt; Level 3&lt;/span&gt;&lt;/strong&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;&lt;span style=&quot;color: #000080;&quot; data-mce-style=&quot;color: #000080;&quot;&gt;(vgl. Beispiele in c't 2022, Heft 15, S. 166)&lt;/span&gt;&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader.&lt;/span&gt;&lt;/td&gt;&lt;td&gt; Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren.&lt;/td&gt;&lt;td&gt;ok <br /> (sh. Tooltips)<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;mit ARIA-Label beschriften. &lt;/td&gt;&lt;td&gt;Partiell ok. <br /> Rest in Bearbeitung. <br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden. &lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen.&lt;/td&gt;&lt;td&gt;ok.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15698 SuperX barrierefrei 2026-03-17T11:58:08Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Login.jpg|'''Login-Seite'''<br /> Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Portlet-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Portlet.jpg|'''Portlet-Seite'''<br /> Image:ARC4Portlet.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Menü-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Menue.jpg|'''Menü-Seite'''<br /> Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Abfragen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Abfragen.jpg|'''Abfragen-Seite'''<br /> Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Masken-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Masken.jpg|'''Masken-Seite'''<br /> Image:ARC4Masken.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Tabellen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Tabelle.jpg|'''Tabellen-Seite'''<br /> Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15697 SuperX barrierefrei 2026-03-17T11:56:58Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Login.jpg|'''Login-Seite'''<br /> Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Portlet-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Portlet.jpg|'''Portlet-Seite'''<br /> Image:ARC4Portlet.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Menü-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Menue.jpg|'''Menü-Seite'''<br /> Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Abfragen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Abfragen.jpg|'''Abfragen-Seite'''<br /> Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Masken-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Masken.jpg|'''Masken-Seite'''<br /> Image:ARC4Masken.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Tabellen-Seite mit Testergebnissen====<br /> &lt;!--{{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}--&gt;<br /> &lt;gallery&gt;<br /> Image:Tabelle.jpg|'''Tabellen-Seite'''<br /> Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Tools/Hilfen&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt;<br /> *WAVE (Browsererweiterung)<br /> *Color Contrast Analyzer<br /> *Color Contrast Checker (zum Messen von Farbwerten)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;sh. ct.de/yxcd&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;td&gt; Nu Validator - https:/validator.nu: &lt;div&gt;&lt;ul&gt;&lt;li&gt;prüft statisches HTML (nicht jedoch js-gerendertes HTML), &lt;/li&gt;&lt;li&gt; interpretiert und moniert HTML-Regeln. &lt;/li&gt;&lt;li&gt;Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. &lt;br&gt;(sh. ct.de/yxcd)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15696 SuperX barrierefrei 2026-03-17T11:48:15Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Login.jpg|'''Login-Seite'''<br /> Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Portlet-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Portlet.jpg|'''Portlet-Seite'''<br /> Image:ARC4Portlet.jpg| '''ARC-Testergebnis für Portlet-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Menü-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Menue.jpg|'''Menü-Seite'''<br /> Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Abfragen-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Abfragen.jpg|'''Abfragen-Seite'''<br /> Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Masken-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Masken.jpg|'''Masken-Seite'''<br /> Image:ARC4Masken.jpg| '''ARC-Testergebnis für Masken-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ====Tabellen-Seite mit Testergebnissen====<br /> {{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}<br /> <br /> &lt;gallery&gt;<br /> Image:Tabelle.jpg|'''Tabellen-Seite'''<br /> Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''<br /> &lt;/gallery&gt;<br /> <br /> ===Barrierefreiheit-Detailvorgaben===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Tools/Hilfen&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> *jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;'' <br /> <br /> *Sonderfall: inline svg&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> *'''Textverdoppelung'''<br /> *'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt;<br /> *WAVE (Browsererweiterung)<br /> *Color Contrast Analyzer<br /> *Color Contrast Checker (zum Messen von Farbwerten)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> *für Fließtext: 4,5: 1<br /> **für Überschriften: 3:1<br /> **Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> *'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen.&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;sh. ct.de/yxcd&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> *oder nur für einzelne Wörte&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt; &lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt;<br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;td&gt; Nu Validator - https:/validator.nu: &lt;div&gt;&lt;ul&gt;&lt;li&gt;prüft statisches HTML (nicht jedoch js-gerendertes HTML), &lt;/li&gt;&lt;li&gt; interpretiert und moniert HTML-Regeln. &lt;/li&gt;&lt;li&gt;Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. &lt;br&gt;(sh. ct.de/yxcd)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> *Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15693 SuperX barrierefrei 2026-03-17T07:32:04Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Login-Seite ====<br /> {{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=Testergebnis für Login-Seite}}<br /> <br /> ==== Portlet-Seite ====<br /> {{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}<br /> <br /> ==== Menü-Seite ====<br /> {{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}<br /> <br /> ==== Abfragen-Seite ====<br /> {{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}<br /> <br /> ==== Masken-Seite ====<br /> {{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}<br /> <br /> ==== Tabellen-Seite ====<br /> {{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}<br /> <br /> &lt;!--===Barrierefreiheit-Detailvorgaben mit Realisierungsgrad in SuperX, Stand 02.2026===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Realisierungsgrad&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Tools/Hilfen&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> * jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> * falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;''<br /> <br /> * Sonderfall: inline svg&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;td&gt; irrrelevant für SuperX-UI&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;td&gt;ok, vgl.:<br /> <br /> * sx_common.css (mit font-size: 10-12px)&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> * '''Textverdoppelung'''<br /> * '''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;<br /> *WAVE (Browsererweiterung)<br /> *Color Contrast Analyzer<br /> *Color Contrast Checker (zum Messen von Farbwerten)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> * für Fließtext: 4,5: 1<br /> ** für Überschriften: 3:1<br /> ** Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = &quot;submit_button&quot; verwenden ...)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> * '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (sx-relevant?)'''&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen. &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (volllständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;td&gt; ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;irrrelevant für SuperX-UI&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;sh. ct.de/yxcd&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt; '''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> * oder nur für einzelne Wörte&lt;/td&gt;&lt;td&gt; ok&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt;&lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;td&gt;ok &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt; <br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;td&gt;'''ok''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;td&gt;'''ok'''&lt;/td&gt;&lt;td&gt; Nu Validator - https:/validator.nu: &lt;div&gt;&lt;ul&gt;&lt;li&gt;prüft statisches HTML (nicht jedoch js-gerendertes HTML), &lt;/li&gt;&lt;li&gt; interpretiert und moniert HTML-Regeln. &lt;/li&gt;&lt;li&gt;Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. &lt;br&gt;(sh. ct.de/yxcd)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff --&gt;</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15692 SuperX barrierefrei 2026-03-17T07:29:25Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026 ===<br /> ==== Übersicht ====<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ==== Ergebnis je Seite ====<br /> ===== Login-Seite =====<br /> {{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}<br /> {{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=Testergebnis für Login-Seite}}<br /> <br /> ===== Portlet-Seite =====<br /> {{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}<br /> {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}<br /> <br /> ===== Menü-Seite =====<br /> {{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}<br /> {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}<br /> <br /> ===== Abfragen-Seite =====<br /> {{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}<br /> <br /> ===== Masken-Seite =====<br /> {{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}<br /> {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}<br /> <br /> ===== Tabellen-Seite =====<br /> {{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}<br /> {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}<br /> <br /> &lt;!--===Barrierefreiheit-Detailvorgaben mit Realisierungsgrad in SuperX, Stand 02.2026===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Realisierungsgrad&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Tools/Hilfen&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> * jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> * falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;''<br /> <br /> * Sonderfall: inline svg&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;td&gt; irrrelevant für SuperX-UI&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;td&gt;ok, vgl.:<br /> <br /> * sx_common.css (mit font-size: 10-12px)&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> * '''Textverdoppelung'''<br /> * '''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;<br /> *WAVE (Browsererweiterung)<br /> *Color Contrast Analyzer<br /> *Color Contrast Checker (zum Messen von Farbwerten)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> * für Fließtext: 4,5: 1<br /> ** für Überschriften: 3:1<br /> ** Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = &quot;submit_button&quot; verwenden ...)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> * '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (sx-relevant?)'''&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen. &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (volllständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;td&gt; ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;irrrelevant für SuperX-UI&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;sh. ct.de/yxcd&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt; '''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> * oder nur für einzelne Wörte&lt;/td&gt;&lt;td&gt; ok&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt;&lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;td&gt;ok &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt; <br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;td&gt;'''ok''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;td&gt;'''ok'''&lt;/td&gt;&lt;td&gt; Nu Validator - https:/validator.nu: &lt;div&gt;&lt;ul&gt;&lt;li&gt;prüft statisches HTML (nicht jedoch js-gerendertes HTML), &lt;/li&gt;&lt;li&gt; interpretiert und moniert HTML-Regeln. &lt;/li&gt;&lt;li&gt;Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. &lt;br&gt;(sh. ct.de/yxcd)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff --&gt;</div> Floss https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&diff=15691 SuperX barrierefrei 2026-03-17T07:16:55Z <p>Floss: </p> <hr /> <div>==Wie barrierefrei ist SuperX?==<br /> ===Barrierefreiheit - Geltende Vorschriften===<br /> Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:<br /> *'''Barrierefreie Informationstechnik-Verordnung (BITV)''', <br /> **mit Neuauflage von 2019,<br /> **mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die<br /> * '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''', <br /> ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.<br /> **deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''<br /> * '''Barrierefreiheitsstärkungsgesetz (BFSG) = Gesetz zur Umsetzung der VO 2029/882 (European Accessibility Act, EAA) des EU-Parlaments u. des Rats für Barrierefreiheitsanaforderungen für Produkte und Dienstleistungen''',<br /> ** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.<br /> <br /> Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.<br /> Die Barrierefreiheit umfasst lt. WCAG Anforderungen an:<br /> *Wahrnehmbarkeit<br /> *Bedienbarkeit<br /> *Verständlichkeit<br /> *Robustheit<br /> <br /> Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).<br /> Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web<br /> <br /> === Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 02.2026 ===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''Testergebnisse nach'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''WCAG 2.2'''&lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;color: #204a87&quot;&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;'''gem.'''&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;'''ARC-Toolkit'''&lt;/span&gt; &lt;span class=&quot;col-blue-navy&quot;&gt;(V. 5.7.10)&lt;/span&gt; &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Login-Seite'''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Portlet-Seite'''(nach Login)<br /> ''(index.jsp)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Menü-Seite''' <br /> (nach Klick auf Standardberichte)<br /> <br /> (''menuhtml.xsl und submenu_html.xsl)''<br /> &lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Abfragen-Seite'''(nach Themenwahl)&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Masken-Seite'''''(maske_html.xsl)''&lt;/th&gt;&lt;th style=&quot;background-color:#eeeeec;&quot; class=&quot;&quot;&gt;'''Tabellen-Seite'''''(tabelle_html.xsl)''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;vertical-align:middle;text-align:left;background-color:#eeeeec;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Seitennavigation und Sprache&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Tastaturbedienbarkeit, Fokusreihenfolge&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;&lt;span style=&quot;color: #204a87&quot;&gt;'''Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert'''&lt;/span&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Pflichtfeldkennzeichnung&lt;/span&gt;''' &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Textwiederholung (repetitive content)&lt;/span&gt;''' &lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt; ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Autocomplete&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Struktur und Semantik&lt;/span&gt;'''&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;color: #204a87&quot;&gt;Usability&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;ok&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;background-color:#eeeeec;vertical-align:middle;text-align:left;width:0px;&quot; class=&quot;&quot;&gt;'''&lt;span style=&quot;color: #204a87&quot;&gt;Fehlermeldung&lt;/span&gt;''' <br /> &lt;/td&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;vorbereitet&lt;/th&gt;&lt;th style=&quot;&quot; class=&quot;col-white-bg&quot;&gt;--&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;<br /> &lt;!--===Barrierefreiheit-Detailvorgaben mit Realisierungsgrad in SuperX, Stand 02.2026===<br /> &lt;table class=&quot;wikitable&quot;&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;1. Vorgaben zur WAHRNEHMBARKEIT = Level 1&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Realisierungsgrad&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;Tools/Hilfen&lt;/span&gt;'''&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.1. Textalternativen für audiovisuelle Inhalte'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bilder mit '''Alternativtexte'''n versehen:<br /> <br /> * jedem &lt;img&gt; ein &lt;alt&gt;-Attribut hinzufügen,&lt;/alt&gt;<br /> * falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): &lt;img''src=&quot;...&quot; alt=&quot;&quot;&gt; &lt;/img_src=&quot;...&quot;&gt;''<br /> <br /> * Sonderfall: inline svg&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Videos mit '''Untertitel'''n versehen:<br /> sh. Beispiel in c't 2022, Heft 14, S. 137<br /> &lt;/td&gt;&lt;td&gt; irrrelevant für SuperX-UI&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.2 Textgröße''' &lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Text mit mind. '''10-12px''' anbieten.&lt;/td&gt;&lt;td&gt;ok, vgl.:<br /> <br /> * sx_common.css (mit font-size: 10-12px)&lt;/td&gt;&lt;td&gt;&lt;br data-mce-bogus=&quot;1&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':<br /> <br /> * '''Textverdoppelung'''<br /> * '''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;<br /> *WAVE (Browsererweiterung)<br /> *Color Contrast Analyzer<br /> *Color Contrast Checker (zum Messen von Farbwerten)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.3 Kontraste'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;'''Kontrastverhältnis''' sichern; lt WCAG 2.0:<br /> <br /> * für Fließtext: 4,5: 1<br /> ** für Überschriften: 3:1<br /> ** Problemfall: Text über Bildern<br /> &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = &quot;submit_button&quot; verwenden ...)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''1.4 ARIA-Attribute (*)'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;(*) Accessible Rich Internet Applications <br /> '''ARIA-Attribute für Screenreader''' einsetzen<br /> &lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;'''&lt;span class=&quot;col-blue-navy&quot;&gt;2. Vorgaben zur BEDIENBARKEIT = Level 2&lt;/span&gt;'''&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Bedienbarkeit per Tastatur ermöglichen dazu:<br /> <br /> * '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Tablisten-Handling&lt;/strong&gt; (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) &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (sx-relevant?)'''&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Die Barrierefreiheit störende &lt;strong&gt;div&lt;/strong&gt;S und &lt;strong&gt;span&lt;/strong&gt;S &lt;strong&gt;in Formularen&lt;/strong&gt; möglichst vermeiden. &lt;br&gt;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Downloadlinks&lt;/strong&gt; ergänzen um Format der verknüpften Dokumente, z.B.: &quot;PDF, 6,8 Megabyte, nicht barrierefrei&quot;&lt;/td&gt;&lt;td&gt;ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Jeden größeren&lt;strong&gt; Inhaltsblock&lt;/strong&gt; (&quot;landmark&quot;) mit: <br /> <br /> *Überschrift und/oder<br /> *aria-label bzw. aria-labelledeby versehen. &lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (volllständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Suchfunktionen&lt;/strong&gt; integrieren in komplexe Websites, &lt;/td&gt;&lt;td&gt; ok&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Modenen&lt;strong&gt; Spamschutz &lt;/strong&gt;wie&lt;strong&gt; &quot;&lt;/strong&gt;reCaptcha v 3&quot; von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.&lt;/td&gt;&lt;td&gt;irrrelevant für SuperX-UI&lt;/td&gt;&lt;td&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;sh. ct.de/yxcd&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Zeitdruck &lt;/strong&gt;zum und&lt;strong&gt; Datenverlust &lt;/strong&gt;beim Beenden einer Session vermeiden.&lt;/td&gt;&lt;td&gt; '''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;&lt;span class=&quot;col-blue-navy&quot;&gt;3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3&lt;br&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot; data-mce-style=&quot;color: #000000;&quot;&gt;&lt;strong&gt;Sprache&lt;/strong&gt; angeben zum besseren Artikulieren durch Screeenreader:&lt;/span&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;<br /> <br /> *lang=&quot;de&quot; im -Element<br /> *oder nur für Textblöcke<br /> * oder nur für einzelne Wörte&lt;/td&gt;&lt;td&gt; ok&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Textalternativen&lt;/strong&gt; integrieren:'''&lt;br class=&quot;mw_emptyline&quot;&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;in einfacher Sprache, &lt;/li&gt;&lt;li&gt;in Gehörlosensprache, &lt;br&gt;&lt;/li&gt;&lt;li&gt;Worterklärungen oder&lt;/li&gt;&lt;li&gt;Abkürzungsumschreibungen.&lt;/li&gt;&lt;li&gt; z.B. Tooltip erzeugen &lt;br&gt;&lt;/li&gt;&lt;li&gt;sh. Beispiel in c't 2022, Heft 15, S. 166&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;'''&lt;/td&gt;&lt;td&gt;ok &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Eingabefelder &lt;/strong&gt;beschriften:<br /> <br /> *mit aria-label:&lt;button type=&quot;button&quot; &lt;br=&quot;&quot;&gt;aria-label=&quot;Info-Fenster schließen&quot; &lt;br&gt;title=&quot;Schließen&quot;&amp;gt;X&lt;/button&gt; <br /> *oder &lt;label&gt; Ihre Mail &lt;br&gt;&lt;input type=&quot;email&quot; name=&quot;email&quot;&gt; &lt;br&gt;&lt;/label&gt;<br /> &lt;/td&gt;&lt;td&gt;'''ok''' &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Formularabschnitte&lt;/strong&gt; beschriften:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von &lt;legend&gt; zur Beschriftung von &lt;fieldset&gt;-Formularabschnitten&lt;br&gt;&lt;/fieldset&gt;&lt;/legend&gt;<br /> (sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;strong&gt;Clientseitige Validierung der Eingaben&lt;/strong&gt; vor dem Absenden:&lt;div&gt;&lt;ul&gt;&lt;li&gt;z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. &lt;/li&gt;&lt;li&gt; z.B. Hinweisdialoge für ungültige Eingaben mit role=&quot;alterdialog&quot; &lt;br&gt;(sh. Beispiel in c't 2022, Heft 15, S. 166)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;'''Klärungsbedarf (vollständig?)'''&lt;/td&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;color: rgb(0, 0, 128);&quot; data-mce-style=&quot;color: #000080;&quot;&gt;'''4. Vorgaben zur ROBUSTHEIT &amp;gt; Level 4&lt;br&gt;'''&lt;/span&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align:left;&quot; data-mce-style=&quot;text-align: left;&quot;&gt;Für &lt;strong&gt;sauberes HTML&lt;/strong&gt; sorgen. &lt;/td&gt;&lt;td&gt;'''ok'''&lt;/td&gt;&lt;td&gt; Nu Validator - https:/validator.nu: &lt;div&gt;&lt;ul&gt;&lt;li&gt;prüft statisches HTML (nicht jedoch js-gerendertes HTML), &lt;/li&gt;&lt;li&gt; interpretiert und moniert HTML-Regeln. &lt;/li&gt;&lt;li&gt;Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. &lt;br&gt;(sh. ct.de/yxcd)<br /> &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br /> <br /> ===Literatur===<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff<br /> * Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff --&gt;</div> Floss