SuperX barrierefrei: Unterschied zwischen den Versionen

Version vom 17. März 2026, 11:48 Uhr

Wie barrierefrei ist SuperX?

Barrierefreiheit - 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.

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

Wahrnehmbarkeit
Bedienbarkeit
Verständlichkeit
Robustheit

Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe). Testangebote siehe: https://bitvtest.de/tests-und-beratung/bik-bitv-test-web

Barrierefreiheit mit Realisierungsgrad in SuperX-Dialogen, Stand 03.2026

Testergebnisse nach WCAG 2.2 gem. ARC-Toolkit (V. 5.7.10)	Login-Seite	Portlet-Seite(nach Login) (index.jsp)	Menü-Seite (nach Klick auf Standardberichte) (menuhtml.xsl und submenu_html.xsl)	Abfragen-Seite(nach Themenwahl)	Masken-Seite(maske_html.xsl)	Tabellen-Seite(tabelle_html.xsl)
Seitennavigation und Sprache	ok	--	--	ok	--	ok
Tastaturbedienbarkeit, Fokusreihenfolge	ok	ok	ok	ok	ok	ok
Interaktive Controls/Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert	ok	ok	ok	ok	ok	ok
Pflichtfeldkennzeichnung	ok	--	--	--	ok	--
Textwiederholung (repetitive content)	ok	ok	ok	ok	ok	ok
Autocomplete	ok	--	--	--	--	--
Struktur und Semantik	ok	ok	ok	ok	ok	ok
Usability	ok	ok	ok	ok	--	ok
Fehlermeldung	vorbereitet	--	--	--	vorbereitet	--

Login-Seite mit Testergebnissen

Login-Seite
ARC-Testergebnis für Login-Seite

Portlet-Seite mit Testergebnissen

Portlet.jpg

Portlet-Seite
ARC4Portlet.jpg

ARC-Testergebnis für Portlet-Seite

Menü-Seite mit Testergebnissen

Menü-Seite
ARC-Testergebnis für Menü-Seite

Abfragen-Seite mit Testergebnissen

Abfragen-Seite
ARC-Testergebnis für Abfragen-Seite

Masken-Seite mit Testergebnissen

Masken.jpg

Masken-Seite
ARC4Masken.jpg

ARC-Testergebnis für Masken-Seite

Tabellen-Seite mit Testergebnissen

Tabellen-Seite
ARC-Testergebnis für Tabellen-Seite

Barrierefreiheit-Detailvorgaben

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1	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
Videos mit Untertiteln versehen: sh. Beispiel in c't 2022, Heft 14, S. 137
1.2 Textgröße
Text mit mind. 10-12px anbieten.
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)	WAVE (Browsererweiterung) Color Contrast Analyzer Color Contrast Checker (zum Messen von Farbwerten)
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
*1.4 ARIA-Attribute ()**
() Accessible Rich Internet Applications ARIA-Attribute für Screenreader* einsetzen
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)
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)	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.
Downloadlinks ergänzen um Format der verknüpften Dokumente, z.B.: "PDF, 6,8 Megabyte, nicht barrierefrei"
Jeden größeren Inhaltsblock ("landmark") mit: Überschrift und/oder aria-label bzw. aria-labelledeby versehen.
Suchfunktionen integrieren in komplexe Websites,
Modenen Spamschutz wie "reCaptcha v 3" von Google verwenden, der im Gegensatz zu herkömmlichen captchas ohne Benutzerinteraktion funktioniert.	sh. ct.de/yxcd
Zeitdruck zum und Datenverlust beim Beenden einer Session vermeiden.
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
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
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>
Formularabschnitte beschriften: z.B. Nutzung von <legend> zur Beschriftung von <fieldset>-Formularabschnitten </fieldset></legend> (sh. Beispiel in c't 2022, Heft 15, S. 166)
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)
4. Vorgaben zur ROBUSTHEIT > Level 4
Für sauberes HTML sorgen.	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 31: / Zeile 31: @@
 </td><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">--</th><th style="" class="col-white-bg">vorbereitet</th><th style="" class="col-white-bg">--</th></tr></table>
-==== Login-Seite ====
+==== Login-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Login.jpg|width=800px|caption=Login-Seite}}
-{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=Testergebnis für Login-Seite}}
+{{ImagePara |imgsrc=ARC4Login.jpg|width=800px|caption=ARC-Testergebnis für Login-Seite}}
-==== Portlet-Seite ====
+<gallery>
+Image:Login.jpg|'''Login-Seite'''
+Image:ARC4Login.jpg| '''ARC-Testergebnis für Login-Seite'''
+</gallery>
+====Portlet-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Portlets.jpg|width=800px|caption=Portlet-Seite}}
 {{ImagePara |imgsrc=ARC4Portlets.jpg|width=800px|caption=Testergebnis für Portlet-Seite}}
-==== Menü-Seite ====
+<gallery>
+Image:Portlet.jpg|'''Portlet-Seite'''
+Image:ARC4Portlet.jpg| '''ARC-Testergebnis für Portlet-Seite'''
+</gallery>
+====Menü-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Menue.jpg|width=800px|caption=Menü-Seite}}
 {{ImagePara |imgsrc=ARC4Menue.jpg|width=800px|caption=Testergebnis für Menü-Seite}}
-==== Abfragen-Seite ====
+<gallery>
+Image:Menue.jpg|'''Menü-Seite'''
+Image:ARC4Menue.jpg| '''ARC-Testergebnis für Menü-Seite'''
+</gallery>
+====Abfragen-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Abfragen.jpg|width=800px|caption=Abfragen-Seite}}
 {{ImagePara |imgsrc=ARC4Abfragen.jpg|width=800px|caption=Testergebnis für Abfragen-Seite}}
-==== Masken-Seite ====
+<gallery>
+Image:Abfragen.jpg|'''Abfragen-Seite'''
+Image:ARC4Abfragen.jpg| '''ARC-Testergebnis für Abfragen-Seite'''
+</gallery>
+====Masken-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Maske.jpg|width=800px|caption=Masken-Seite}}
 {{ImagePara |imgsrc=ARC4Maske.jpg|width=800px|caption=Testergebnis für Masken-Seite}}
-==== Tabellen-Seite ====
+<gallery>
+Image:Masken.jpg|'''Masken-Seite'''
+Image:ARC4Masken.jpg| '''ARC-Testergebnis für Masken-Seite'''
+</gallery>
+====Tabellen-Seite mit Testergebnissen====
 {{ImagePara |imgsrc=Tabelle.jpg|width=800px|caption=Tabellen-Seite}}
 {{ImagePara |imgsrc=ARC4Tabelle.jpg|width=800px|caption=Testergebnis für Tabellen-Seite}}
-<!--===Barrierefreiheit-Detailvorgaben mit Realisierungsgrad in SuperX, Stand 02.2026===
+<gallery>
-<table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">1. Vorgaben zur WAHRNEHMBARKEIT = Level 1</span>'''</th><th>'''<span class="col-blue-navy">Realisierungsgrad</span>'''</th><th>'''<span class="col-blue-navy">Tools/Hilfen</span>'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit '''Alternativtexte'''n versehen:
+Image:Tabelle.jpg|'''Tabellen-Seite'''
+Image:ARC4Tabelle.jpg| '''ARC-Testergebnis für Tabellen-Seite'''
+</gallery>
-* jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
+===Barrierefreiheit-Detailvorgaben===
-* falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):  <img''src="..." alt=""> </img_src="...">''
+<table class="wikitable"><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">1. Vorgaben zur WAHRNEHMBARKEIT = Level 1</span>'''</th><th>'''<span class="col-blue-navy">Tools/Hilfen</span>'''</th></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.1. Textalternativen für audiovisuelle Inhalte'''</th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bilder mit '''Alternativtexte'''n versehen:
-* Sonderfall: inline svg</td><td>ok</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit '''Untertitel'''n versehen:
+*jedem <img>  ein <alt>-Attribut hinzufügen,</alt>
+*falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):  <img''src="..." alt=""> </img_src="...">''
+*Sonderfall: inline svg</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Videos mit '''Untertitel'''n versehen:
 sh. Beispiel in c't 2022, Heft 14, S. 137
-</td><td> irrrelevant für SuperX-UI</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße''' </th><th></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. '''10-12px''' anbieten.</td><td>ok, vgl.:
+</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.2 Textgröße''' </th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Text mit mind. '''10-12px''' anbieten.</td><td><br data-mce-bogus="1"></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"> Ordentliches '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':
-* 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 '''Layout''' (Wort-, Zeilenabstände) sicherstellen, auch '''bei''':
-* '''Textverdoppelung'''
+*'''Textverdoppelung'''
-* '''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</td><td>ok</td><td>
+*'''Responsivität:''' von Viewport 1280 * 1024px (mit 400%igem Zoom) zu Viewport 320 * 265px (ca 50 Zeichen Text/Zeile)</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.3 Kontraste'''</th><th></th><th></th></tr><tr><td>'''Kontrastverhältnis''' sichern; lt WCAG 2.0:
+*Color Contrast Checker (zum Messen von Farbwerten)</td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</th><th></th></tr><tr><td>'''Kontrastverhältnis''' sichern; lt WCAG 2.0:
-* für Fließtext: 4,5: 1
+*für Fließtext: 4,5: 1
-** für Überschriften: 3:1
+**für Überschriften: 3:1
-** Problemfall: Text über Bildern
+**Problemfall: Text über Bildern
-</td><td>'''Klärungsbedarf (hellgrüner kleiner Export-Button: ggf. vereinheitlichen und span class = "submit_button" verwenden ...)'''</td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)'''</th><th></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications
+</td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.4 ARIA-Attribute (*)''' </th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">(*) Accessible Rich Internet Applications
 '''ARIA-Attribute für Screenreader''' einsetzen
-</td><td>ok</td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">2. Vorgaben zur BEDIENBARKEIT = Level 2</span>'''</th><th></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
+</td><td></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''<span class="col-blue-navy">2. Vorgaben zur BEDIENBARKEIT = Level 2</span>'''</th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Bedienbarkeit per Tastatur ermöglichen dazu:
-* '''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</td><td>'''Klärungsbedarf''' </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 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>ok</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</td><td></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Jeden größeren<strong> Inhaltsblock</strong> ("landmark") mit:
+*'''Jump-, Skiplink'''s als Sprungmarken am Dokumentbeginn definieren (sh. Beispiel in c't 2022, Heft 15, S. 165)</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><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></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></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></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Suchfunktionen</strong> integrieren in komplexe Websites, </td><td> ok</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 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></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span class="col-blue-navy">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th><th></th><th></th></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></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"> <strong>Suchfunktionen</strong> integrieren in komplexe Websites, </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><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></td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><strong><span class="col-blue-navy">3. Vorgaben zur VERSTÄNDLICHKEIT = Level 3<br></span></strong></th><th></th></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<br class="mw_emptyline"><br class="mw_emptyline"></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></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></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></td></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;"><strong>Eingabefelder </strong>beschriften:
 *mit aria-label:<button type="button" <br="">aria-label="Info-Fenster schließen" <br>title="Schließen"&gt;X</button>
 *oder <label> Ihre Mail <br><input type="email" name="email"> <br></label>
-</td><td>'''ok''' </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>
+</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> </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)
+</li> </ul></div></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)
-</li></ul></div></td><td>'''Klärungsbedarf (vollständig?)'''</td><td> </td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"><span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''4. Vorgaben zur ROBUSTHEIT &gt; Level 4<br>'''</span></th><th></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td><td>'''ok'''</td><td> Nu Validator - https:/validator.nu: <div><ul><li>prüft statisches HTML (nicht jedoch js-gerendertes HTML), </li><li> interpretiert und moniert HTML-Regeln. </li><li>Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br>(sh. ct.de/yxcd)
+</li></ul></div></td><td> </td></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;"> <span style="color: rgb(0, 0, 128);" data-mce-style="color: #000080;">'''4. Vorgaben zur ROBUSTHEIT &gt; Level 4<br>'''</span></th><th></th></tr><tr><td style="text-align:left;" data-mce-style="text-align: left;">Für <strong>sauberes HTML</strong> sorgen. </td><td> Nu Validator - https:/validator.nu: <div><ul><li>prüft statisches HTML (nicht jedoch js-gerendertes HTML), </li><li> interpretiert und moniert HTML-Regeln. </li><li>Ggf. als Dockerfile, npm-brew-Paket oder pip-Paket in Entwicklungsumgebung integrieren. <br>(sh. ct.de/yxcd)
 </li></ul></div></td></tr></table>
 ===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