SuperX barrierefrei: Unterschied zwischen den Versionen

Aktuelle Version vom 31. Januar 2026, 14:13 Uhr

Wie barrierefrei ist SuperX?

Geltende Vorschriften

Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:

Barrierefreie Informationstechnik-Verordnung (BITV),
- mit Neuauflage von 2019,
- mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
Web Content Accessibility Guidelines (aktuell WCAG 2.2) ,
- herausgegeben von der Web-Standardisierungsorganisation W3C bzw.
- deren Arbeitsgruppe Web Accessability Initiative (WAI)
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,
- es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.

Barrierefreiheit

Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen. Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:

Wahrnehmbarkeit
Bedienbarkeit
Verständlichkeit
Robustheit

Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).

Grad der Barrierefreiheit von SuperX

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1	SuperX-Status, 05.2025/02.2026*	Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen: jedem <img> ein <alt>-Attribut hinzufügen,</alt> falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <imgsrc="..." alt=""> </img_src="..."> Sonderfall: inline svg	ok, vgl.: nd_templates (Stand 24.05.2025)	web Developer (Bowsererweitertung)
Videos mit Untertiteln versehen: sh. Beispiel in c't 2022, Heft 14, S. 137	irrrelevant für SuperX-UI	HappyScribe (zur autom. Untertitelerzeugung)
1.2 Textgröße
Text mit mind. 10-12px anbieten.	ok, vgl.: sx_common.css (mit font-size: 10-12px)
Ordentliches Layout (Wort-, Zeilenabstände) sicherstellen, auch bei: Textverdoppelung Responsivität: von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)	ok, vgl.: sx_menue sx_maske sx_tabelle
1.3 Kontraste
Kontrastverhältnis sichern; lt WCAG 2.0: für Fließtext: 4,5: 1 für Überschriften: 3:1 Problemfall: Text über Bildern	Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)	WAVE (Browsererweiterung) Color Contrast Analyzer Color Contrast Checker (zum Messen von Farbwerten)
*1.4 ARIA-Attribute ()**
() Accessible Rich Internet Applications ARIA-Attribute für Screenreader* einsetzen	ok, vgl.: nd navi top, nd navi bottom (Stand 24.05.2025) nd buttonbar table, nd buttonbar export nd button Keyfield/BackToMask/UserDoc/Bookmark/DeepLink/Konfig/intoWord/Excel/PDF/HTML/CSV/Copy/MaskInfoEdit/MaskToSachgeb/StyleToMask
2. Vorgaben zur BEDIENBARKEIT = Level 2
Bedienbarkeit per Tastatur ermöglichen dazu: Jump-, Skiplinks als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)	Klärungsbedarf
Fieldlabels einsetzen	ok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen *
Autocomplete von Feldern ermöglichen	ok für Login-Dialog *
Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden: HTML-Attribut tabindex setzen	in Bearbeitung Klärungsbedarf (Stand?)
Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: "hover" (für Mausinteraktionen), "focus" (für Tastaturbedienung).	ok, vgl.: sx_menue sx_maske sx_tabelle Klärungsbedarf (vollständig?)
Ggf. css-outline als Orientierungshilfe nutzen.	Klärungsbedarf (Bedeutung?)
Ggf. focus traps (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; relevant z.B. für: modale Dialoge, Einverständniserklärungen, wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll. (sh. Beispiel in c't 2022, Heft 15, S. 165)	Klärungsbedarf (sx-relevant?)
Tablisten-Handling (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected. (sh. Erläuterung in c't 2022, Heft 15, S. 165)	Klärungsbedarf (sx-relevant?)	Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)
Die Barrierefreiheit störende divS und spanS in Formularen möglichst vermeiden.	Klärungsbedarf (zutreffend?)
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"	ok, vgl. Exportoptionen
Jeden größeren Inhaltsblock ("landmark") mit: Überschrift und/oder aria-label bzw. aria-labelledeby versehen.	Klärungsbedarf (volllständig?)
Suchfunktionen integrieren in komplexe Websites,	ok, vgl. sx_menue
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.	irrrelevant für SuperX-UI	sh. ct.de/yxcd
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.	Klärungsbedarf (vollständig?)
3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3
Sprache angeben zum besseren Artikulieren durch Screeenreader: lang="de" im -Element oder nur für Textblöcke oder nur für einzelne Wörte	ok, vgl.: sx_menue Klärungsbedarf (vollständig?)
Textalternativen integrieren: in einfacher Sprache, in Gehörlosensprache, Worterklärungen oder Abkürzungsumschreibungen. z.B. Tooltip erzeugen sh. Beispiel in c't 2022, Heft 15, S. 166	ok
Eingabefelder beschriften: mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" title="Schließen">X</button> oder <label> Ihre Mail <input type="email" name="email"> </label>	Klärungsbedarf (vollständig?)
Formularabschnitte beschriften: z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten </fieldset></legend> (sh. Beispiel in c't 2022, Heft 15, S. 166)	Klärungsbedarf (vollständig?)
Clientseitige Validierung der Eingaben vor dem Absenden: z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" (sh. Beispiel in c't 2022, Heft 15, S. 166)	Klärungsbedarf (vollständig?)
4. Vorgaben zur ROBUSTHEIT > Level 4
Für sauberes HTML sorgen.	ok	Nu Validator - https:/validator.nu: prüft statisches HTML (nicht jedoch js-gerendertes HTML), interpretiert und moniert HTML-Regeln. Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. (sh. ct.de/yxcd)

Literatur

Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff
Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff

@@ Zeile 1: / Zeile 1: @@
 ==Wie barrierefrei ist SuperX?==
 ===Geltende Vorschriften===
-Die Verpflichtung zur Barrierefreiheit von Websites gilt derzeit (noch) nur für Bundesbehörden. Sie geht hervor aus der
+Die Verpflichtung zur Barrierefreiheit von Websites geht hervor aus:
-* '''Barrierefreie Informationstechnik-Verordnung (BITV)''',
+*'''Barrierefreie Informationstechnik-Verordnung (BITV)''',
-** mit Neuauflage von 2019,
+**mit Neuauflage von 2019,
-** mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
+**mit Testverfahren aus 92 Einzeltests. Angelehnt ist die BITV an die
-* '''Web Content Accessibility Guidelines (WCAG 2.0)''',
+* '''Web Content Accessibility Guidelines (aktuell WCAG 2.2) ''',
 ** herausgegeben von der Web-Standardisierungsorganisation '''W3C''' bzw.
-** deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''.
+**deren Arbeitsgruppe '''Web Accessability Initiative (WAI)'''
+* '''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''',
+** es verlangt: ab 28.06.2025 müssen online angebotene Produkte barrierefrei sein.
 ===Barrierefreiheit===
 Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
 Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
-* Wahrnehmbarkeit
+*Wahrnehmbarkeit
 * Bedienbarkeit
-* Verständlichkeit
+*Verständlichkeit
-* Robustheit
+*Robustheit
 Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).
-<div><h3>Grad der Barrierefreiheit von SuperX</h3></div><div><table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''1. Vorgaben zur WAHRNEHMBARKEIT = Level 1<br>'''</span></th><th>'''SuperX-Status, 05.2025'''</th><th>'''SX-/MT-Website-Status<br data-mce-bogus="1">'''</th><th>'''Tools/Hilfen'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen:
+<div><h3>Grad der Barrierefreiheit von SuperX</h3></div><div><table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''1. Vorgaben zur WAHRNEHMBARKEIT = Level 1<br>'''</span></th><th>'''SuperX-Status, 05.2025/02.2026*'''</th><th>'''SX-/MT-Website-Status<br data-mce-bogus="1">'''</th><th>'''Tools/Hilfen'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit <strong>Alternativtexte</strong>n versehen:
-* jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
+*jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
 *falls kein Alternativtext existiert (für Bild mit reinem Dekozweck): <br> <img''src="..." alt=""> </img_src="...">''
 *Sonderfall: inline svg</td><td>ok, vgl.:
@@ Zeile 28: / Zeile 32: @@
 </td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">web Developer (Bowsererweitertung)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit <strong>Untertitel</strong>n versehen:
 sh. Beispiel in c't 2022, Heft 14, S. 137
-</td><td>für sx irrrelevant</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">HappyScribe (zur autom. Untertitelerzeugung)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. <strong>10-12px</strong> anbieten.</td><td> ok, vgl.:
+</td><td>irrrelevant für SuperX-UI </td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">HappyScribe (zur autom. Untertitelerzeugung)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. <strong>10-12px</strong> anbieten.</td><td> ok, vgl.:
-* sx_common.css  (mit font-size: 10-12px)
-</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ordentliches <strong>Layout</strong> (Wort-, Zeilenabstände) sicherstellen, auch <strong>bei</strong>: <div><ul><li><strong>Textverdoppelung</strong></li><li><strong>Responsivität:</strong> von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</li></ul></div></td><td> ok, vgl.: <div><ul><li>sx_downloads_menue.htm</li><li>sx_downloads_maske.htm</li><li> sx_downloads_tabelle.htm</li></ul></div></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern; lt WCAG 2.0: <div>
-* für Fließtext: 4,5 : 1<ul>  <li>für Überschriften: 3:1</li><li> Problemfall: Text über Bildern</li></ul></div></td><td>ok</td><td><br data-mce-bogus="1"></td><td>
-* WAVE (Browsererweiterung)
-* Color Contrast Analyzer
-* Color Contrast Checker (zum Messen von Farbwerten)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications <br class="mw_emptyline"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> ok, vgl.:
-*nd navi top,
+*sx_common.css  (mit font-size: 10-12px)
+</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ordentliches <strong>Layout</strong> (Wort-, Zeilenabstände) sicherstellen, auch <strong>bei</strong>: <div><ul><li><strong>Textverdoppelung</strong></li><li><strong>Responsivität:</strong> von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</li></ul></div> </td><td> ok, vgl.: <div><ul><li>sx_menue</li><li>sx_maske</li><li> sx_tabelle</li></ul></div></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Kontrastverhältnis</strong> sichern; lt WCAG 2.0: <div>
+*für Fließtext: 4,5: 1<ul>   <li>für Überschriften: 3:1</li><li> Problemfall: Text über Bildern</li></ul></div></td><td>'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)'''</td><td><br data-mce-bogus="1"></td><td>
+*WAVE (Browsererweiterung)
+*Color Contrast Analyzer
+*Color Contrast Checker (zum Messen von Farbwerten)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)'''</th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications <br class="mw_emptyline"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> ok, vgl.:
-*nd navi  bottom  (Stand 24.05.2025)
+*nd navi top, nd navi  bottom  (Stand 24.05.2025)
-</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''2. Vorgaben zur BEDIENBARKEIT = Level 2<br>'''</span></th><th></th><th><br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
+*nd buttonbar table, nd buttonbar export
+*nd button Keyfield/BackToMask/UserDoc/Bookmark/DeepLink/Konfig/intoWord/Excel*/PDF/HTML/CSV*/Copy/MaskInfoEdit/MaskToSachgeb/StyleToMask</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''2. Vorgaben zur BEDIENBARKEIT = Level 2<br>'''</span></th><th></th><th> <br data-mce-bogus="1"></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
-* <strong>Jump-, Skiplink</strong>s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf'''<br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
+*<strong>Jump-, Skiplink</strong>s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf'''<br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td>Fieldlabels einsetzen</td><td>ok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen *</td><td></td><td></td></tr><tr><td>Autocomplete von Feldern ermöglichen</td><td>ok für Login-Dialog *</td><td></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Spezielle Reihenfolge anzuspringender Elemente zulassen/unterbinden:
-* HTML-Attribut <strong>tabindex</strong> setzen</td><td>in Bearbeitung
+*HTML-Attribut <strong>tabindex</strong> setzen</td><td> in Bearbeitung
 '''Klärungsbedarf (Stand?)'''
-</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <div><ul><li>"<strong>hover</strong>" (für Mausinteraktionen),</li><li>"<strong>focus</strong>" (für Tataturbedienung).</li></ul></div></td><td>ok, vgl.:
+</td><td> <br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Maus- und Tastaturinteraktionen über css-Pseudoklassen darstellen: <div><ul><li>"<strong>hover</strong>" (für Mausinteraktionen),</li><li>"<strong>focus</strong>" (für Tastaturbedienung).</li></ul></div></td><td>ok, vgl.:
-* sx_menue
+*sx_menue
-* sx_maske
+*sx_maske
-* sx_tabelle
+*sx_tabelle
 '''Klärungsbedarf (vollständig?)'''
 </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>css-outline</strong> als Orientierungshilfe nutzen.</td><td>'''Klärungsbedarf (Bedeutung?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Ggf. <strong>focus traps</strong> (via java script-Bibliothek) verwenden, um den Tastaturfokus innerhalb einer Elementgruppe festzuhalten; <br>relevant z.B. für:
-*modale Dialoge,
+* modale Dialoge,
 *Einverständniserklärungen, wobei einander überlagernde Dialogfenster geöffnet sind, aber keine Interaktion mit dem überlagerten Element möglich sein soll.
-(sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf (sx-relevant?)'''<br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Tablisten-Handling</strong> (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected.  (sh. Erläuterung in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf (sx-relevant?)'''</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Die Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></td><td>'''Klärungsbedarf (zutreffend?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Downloadlinks</strong> ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"</td><td>'''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:
+(sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf (sx-relevant?)'''<br class="mw_emptyline"> </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Tablisten-Handling</strong> (via java script), so dass der im Fokus befindliche Karteireiter korrekt arbeitet inkl. Anpassung des ARIA-Attributes aria-selected.  (sh. Erläuterung in c't 2022, Heft 15, S. 165) </td><td>'''Klärungsbedarf (sx-relevant?)'''</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">Github-Repository vonW3C für copy-paste-taugliche Beispiele (sh. ct.de/yxcd)</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Die Barrierefreiheit störende <strong>div</strong>S und <strong>span</strong>S <strong>in Formularen</strong> möglichst vermeiden. <br></td><td>'''Klärungsbedarf (zutreffend?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Downloadlinks</strong> ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"</td><td>ok, vgl.
+*Exportoptionen</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:
+*Überschrift und/oder
+*aria-label bzw. aria-labelledeby versehen. </td><td>'''Klärungsbedarf (volllständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites, </td><td> ok, vgl.
-* Überschrift und/oder
+* sx_menue</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Modenen<strong> Spamschutz </strong>wie<strong> "</strong>reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.</td><td>irrrelevant für SuperX-UI</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">sh. ct.de/yxcd</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>zum und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td><td>   '''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th><td></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><strong>Sprache</strong> angeben zum besseren Artikulieren durch Screeenreader:</span><br class="mw_emptyline">
-* aria-label bzw. aria-labelledeby versehen.</td><td>'''Klärungsbedarf (volllständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites, </td><td> ok, vgl.
-* sx_menue</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Modenen<strong> Spamschutz </strong>wie<strong> "</strong>reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.</td><td>für sx irrrelevant</td><td><br data-mce-bogus="1"></td><td><br class="mw_emptyline">sh. ct.de/yxcd</td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Zeitdruck </strong>zum und<strong> Datenverlust </strong>beim Beenden einer Session vermeiden.</td><td>  '''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span style="color: #000080;" data-mce-style="color: #000080;">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th><td></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 0);" data-mce-style="color: #000000;"><strong>Sprache</strong> angeben zum besseren Artikulieren durch Screeenreader:</span><br class="mw_emptyline">
+*lang="de" im -Element
+*oder nur für Textblöcke
+* oder nur für einzelne Wörte</td><td> ok, vgl.:
-* lang="de" im -Element
+*sx_menue
-* oder nur für Textblöcke
+<strong>Klärungsbedarf (vollständig?)</strong><br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren:'''<br class="mw_emptyline"><div><ul><li>in einfacher Sprache, </li><li>in Gehörlosensprache, <br></li><li>Worterklärungen oder</li><li>Abkürzungsumschreibungen.</li><li> z.B. Tooltip erzeugen <br></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li> </ul></div>'''</td><td>ok </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:
-* oder nur für einzelne Wörte</td><td> ok, vgl.:
-* sx_menue
+*mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button><div><ul><li>oder  </li></ul></div><label> Ihre Mail <br><input type="email" name="email"> <br></label></td><td>'''Klärungsbedarf (vollständig?)''' </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften:<div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend>
-<strong>Klärungsbedarf (vollständig?9</strong><br class="mw_emptyline"><br class="mw_emptyline"></td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Textalternativen</strong> integrieren:'''<br class="mw_emptyline"><div><ul><li>in einfacher Sprache, </li><li>in Gehörlosensprache, <br></li><li>Worterklärungen oder</li><li>Abkürzungsumschreibungen.</li><li> z.B. Tooltip erzeugen <br></li><li>sh. Beispiel in c't 2022, Heft 15, S. 166</li></ul></div>'''</td><td>ok </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:<div><ul><li> mit aria-label: </li></ul></div><button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button><div><ul><li>oder  </li></ul></div><label> Ihre Mail <br><input type="email" name="email"> <br></label></td><td>'''Klärungsbedarf (vollständig?)''' </td><td><br data-mce-bogus="1"></td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Formularabschnitte</strong> beschriften:<div><ul><li>z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten<br></fieldset></legend>
 (sh. Beispiel in c't 2022, Heft 15, S. 166)
 </li></ul></div></td><td>'''Klärungsbedarf (vollständig?)'''</td><td><br data-mce-bogus="1"></td><td> </td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Clientseitige Validierung der Eingaben</strong> vor dem Absenden:<div><ul><li>z.B. Nutzung von HTML-Attributen wie required, pattern, min-/maxlength u.ä. </li><li> z.B. Hinweisdialoge für ungültige Eingaben mit role="alterdialog" <br>(sh. Beispiel in c't 2022, Heft 15, S. 166)
@@ Zeile 75: / Zeile 82: @@
 </li></ul></div></td></tr></table></div>
-=== Literatur===
+===Literatur===
-* Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff
+*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 1. Teil c't 14/2022, S136 ff
-*Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff
+* Herbert Braun, Web ohne Hürden, Websites barrierearm gestalten, 2. Teil c't 15/2022, S164 ff