Zuletzt bearbeitet vor einem Tag
von Bettina Floss

SuperX barrierefrei: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 13: Zeile 13:




===Barrierefreiheit===
===Barrierefreiheit - Vorgaben===
Die Barrierefreiheit soll Menschen mit unterschiedlichen Einschränkungen die Nutzung von Software bzw. Websites ermöglichen.
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:
Die Barrierefreiheit umfasst lt. WCAG 2.0 Anforderungen an:
Zeile 20: Zeile 20:
*Verständlichkeit
*Verständlichkeit
*Robustheit
*Robustheit
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe).  
Die Einstufung des Grades von Barrierefreiheit erfolgt über die Level A, AA, AAA (höchste Stufe). <div><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:
 
===Grad der Barrierefreiheit von SuperX===
<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>
Zeile 97: Zeile 94:
</li></ul></div></td></tr></table></div>
</li></ul></div></td></tr></table></div>


=== Grad der Barrierefreiheit von SuperX ===
<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></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 <strong>Alternativtexte</strong>n versehen:
*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.: 
*nd_templates  (Stand 24.05.2025)
</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>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></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></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></tr><tr><th style="text-align:left;" data-mce-style="text-align: left;">'''1.3 Kontraste'''</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></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 <br class="mw_emptyline"><strong>ARIA-Attribute für Screenreader</strong> einsetzen</td><td> 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</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></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></tr><tr><td>Fieldlabels einsetzen</td><td>ok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen *</td></tr><tr><td>
* Autocomplete
* Tastaturbedienbarkeit, Fokusreihenfolge
* Pflichtfeldkennzeichnung
* Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert
* Fehlermeldung vorbereitet '''>> Klärungsbedarf'''
</td><td>
* ok für Login-Dialog
* ok für  Portletseite - nach Login (index.jsp)
* ok für MenueSeite - nach Klick auf Standardberichte (menu''html.xsl und submenu''_html.xsl)
* ok für AbfragenSeite - nach Themenwahl
TODO:
* MaskenSeite (maske_html.xsl)
* TabellenSeite (tabelle_html.xsl)</td></tr></table>
===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

Version vom 16. Februar 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 - Vorgaben

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

1. Vorgaben zur WAHRNEHMBARKEIT = Level 1
SuperX-Status, 05.2025/02.2026*SX-/MT-Website-Status
Tools/Hilfen
1.1. Textalternativen für audiovisuelle Inhalte
Bilder mit Alternativtexten versehen:
  • jedem <img> ein <alt>-Attribut hinzufügen,</alt>
  • falls kein Alternativtext existiert (für Bild mit reinem Dekozweck):
    <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 einsetzenok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen *
  • Autocomplete
  • Tastaturbedienbarkeit, Fokusreihenfolge
  • Pflichtfeldkennzeichnung
  • Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert
  • Fehlermeldung vorbereitet >> Klärungsbedarf
    		•
    • ok für Login-Dialog
    • ok für Portletseite - nach Login (index.jsp)
    • ok für MenueSeite - nach Klick auf Standardberichte (menuhtml.xsl und submenu_html.xsl)
    • ok für AbfragenSeite - nach Themenwahl

    TODO:

    • MaskenSeite (maske_html.xsl)
    • TabellenSeite (tabelle_html.xsl)
    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)

    Grad der Barrierefreiheit von SuperX

    1. Vorgaben zur WAHRNEHMBARKEIT = Level 1
    		SuperX-Status, 05.2025/02.2026*
    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)
    Videos mit Untertiteln versehen:

    sh. Beispiel in c't 2022, Heft 14, S. 137

    		irrrelevant für SuperX-UI
    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 ...)
    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 einsetzenok. Separate Schlüsselfeldlabels durch responsive Tooltips abgefangen *
  • Autocomplete
  • Tastaturbedienbarkeit, Fokusreihenfolge
  • Pflichtfeldkennzeichnung
  • Beschriftungen: Labelkennzeichnung, Name, Rolle, Wert
  • Fehlermeldung vorbereitet >> Klärungsbedarf
    		•
    • ok für Login-Dialog
    • ok für Portletseite - nach Login (index.jsp)
    • ok für MenueSeite - nach Klick auf Standardberichte (menuhtml.xsl und submenu_html.xsl)
    • ok für AbfragenSeite - nach Themenwahl

    TODO:

    • MaskenSeite (maske_html.xsl)
    • TabellenSeite (tabelle_html.xsl)

    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
    Abgerufen von „https://superxhosting.de/wiki/index.php?title=SuperX_barrierefrei&oldid=15606“