From 3ca9f0b0cda3fc37c82fd31d4a0c30e1aa4568d6 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sun, 23 Aug 2026 12:49:29 +0200 Subject: [PATCH] Gestaltung: WCAG-Messung ueber alle Seiten, alle Befunde behoben "Sieht gut aus" ist Geschmack und laesst sich nicht pruefen. Handwerkliche Qualitaet laesst sich pruefen -- und bei einer WEBDESIGN-Seite ist sie zugleich das Verkaufsargument: Wer selbst schludert, kann schlecht Sorgfalt verkaufen. Neues Werkzeug pruef-design.mjs misst 13 Seiten x 5 Sprachen auf Handy-Breite gegen WCAG 2.2 AA -- denselben Standard, auf den auch das Barrierefreiheitsstaerkungsgesetz verweist. Der Browser rechnet, es wird nichts geschaetzt. ERGEBNIS: 0 Befunde. Kontrast, Klickflaechen, Tastaturfokus, Ueberschriftenstruktur, Bildalternativen, Feldbeschriftungen, lang-Attribut, Schriftgroessen. ECHTE BEFUNDE, DIE BEHOBEN WURDEN 1. 23 Schriftgroessen unter 12px (bis hinunter zu 10,9px), verteilt ueber CSS und sieben Seiten. Betroffen waren durchweg gesperrte Grossbuchstaben-Beschriftungen -- also genau die Textsorte, die klein ohnehin am schlechtesten lesbar ist. Alle auf mindestens 12px, die gesperrten auf 12,8px. Das ist zugleich die Dauervorgabe "augenschonend" ernst genommen. 2. Ueberschriftensprung h2 -> h4 in der Fusszeile, auf ALLEN 13 Seiten in allen 5 Sprachen (42 Stellen). Wer sich mit einem Screenreader durch die Ueberschriften bewegt, hoert dadurch eine Gliederung, die es nicht gibt, und vermutet uebersprungene Abschnitte. Jetzt h2 mit Gestaltungsklasse: Die Ebene sagt etwas ueber die STRUKTUR, die Groesse ueber die GEWICHTUNG -- zwei verschiedene Dinge. 3. code-Auszeichnung auf der Rechtsseite rutschte durch relative Groessenangabe auf 11,2px. Jetzt mit Untergrenze abgesichert. SECHS FEHLALARME IM WERKZEUG -- ALLE GEFUNDEN UND BESEITIGT Der erste Lauf meldete 302 Fundstellen. Fast alle waren falsch. Haette ich sie "repariert", haette ich funktionierende Gestaltung zerstoert. Jeder Fehlalarm hatte eine eigene, nicht offensichtliche Ursache: * Farbverlaeufe: getComputedStyle().backgroundColor liefert bei einer reinen Verlaufsflaeche "rgba(0,0,0,0)". Die Suche lief an der hellen Knopfflaeche VORBEI bis zum dunklen Seitengrund und verglich dunkle Schrift mit dunklem Grund -- Ergebnis 1:1 fuer 60 einwandfreie Knoepfe. Jetzt werden die Farbstopps ausgelesen und der unguenstigste Fall gerechnet. * MEHRERE Hintergrundebenen: Die Karten nutzen den bekannten Kniff "Flaeche padding-box, Rahmenverlauf border-box". Der helle Rahmenverlauf ist im Textbereich gar nicht sichtbar. Alle Ebenen zusammenzurechnen ergab 820 Meldungen mit Werten wie "3,45:1" fuer Text, der in Wahrheit ueber 7:1 liegt. CSS malt die ERSTE Ebene oben -- nur die zaehlt. Das Trennen an Kommas muss dabei die Kommas INNERHALB der Verlaufsklammern respektieren. * Verlaufsschrift (background-clip:text): Dort ist die Schriftfarbe durchsichtig und der Verlauf IST der Text. Farbe gegen Hintergrund zu vergleichen ergibt zwangslaeufig 1:1. * Verlaufsstopps mit wenig Deckkraft (9 % und 4 % Gold in den Hinweiskaesten) wurden verworfen statt auf den Untergrund gerechnet. Uebrig blieb "nicht messbar" fuer 72 Textstellen. Ein Pruefwerkzeug, das bei allem passt, prueft nichts. * Laufende Ueberblendungen: getComputedStyle liefert waehrend einer Ueberblendung den ZWISCHENWERT. Nach blur() verblasst der Fokusring ueber 0,16 s -- misst man sofort, sieht man ihn noch, und "vorher" ist identisch mit "nachher". Das Codefeld der Verwaltung wurde dadurch als "ohne sichtbaren Fokus" gemeldet. Nachgewiesen mit el.matches(":focus") === false bei gleichzeitig sichtbarem Schatten. Loesung: Ueberblendungen fuer die Messung abschalten. * Ausgeblendete Abschnitte: Eine Ueberschrift in einem versteckten Bereich hat selbst weiterhin display:block. Im Portal wurden dadurch drei h1 gezaehlt, obwohl immer nur eine sichtbar ist. Jetzt getClientRects(). Dazu zwei bekannte Muster, die das Werkzeug jetzt kennt: der Sprunglink (absichtlich aus dem Bild geschoben) und die winzigen Auswahlfelder hinter den Kacheln (die Kachel IST die Klickflaeche). ALLE UEBRIGEN PRUEFUNGEN WEITERHIN GRUEN nach den Aenderungen: Anfragedetail 20, Verwaltung 69, Portal 32, Widerruf 58, Textkodierung 55 Seiten-Sprach-Kombinationen. Versionsstempel und Cache-Name auf v8. Co-Authored-By: Claude Opus 5 --- assets/css/webdesign.css | 36 ++- assets/js/wd-core.js | 4 +- pruef-aufgaben-computer.png | Bin 0 -> 161124 bytes pruef-aufgaben-handy.png | Bin 0 -> 55838 bytes pruef-design.mjs | 457 +++++++++++++++++++++++++++++ pruef-detail-computer.png | Bin 0 -> 166922 bytes pruef-detail-handy.png | Bin 0 -> 42710 bytes pruef-portal-aufgaben-computer.png | Bin 0 -> 1066655 bytes pruef-portal-aufgaben-handy.png | Bin 0 -> 537950 bytes pruef-portal-postfach-computer.png | Bin 0 -> 505511 bytes pruef-portal-postfach-handy.png | Bin 0 -> 240653 bytes pruef-postfach-computer.png | Bin 0 -> 473427 bytes pruef-postfach-handy.png | Bin 0 -> 173131 bytes pruef-rechtliches.png | Bin 0 -> 467941 bytes pruef-widerruf-computer.png | Bin 0 -> 736536 bytes pruef-widerruf-handy.png | Bin 0 -> 394478 bytes webdesign/ablauf.html | 10 +- webdesign/anfrage.html | 12 +- webdesign/faq.html | 8 +- webdesign/index.html | 10 +- webdesign/leistungen.html | 8 +- webdesign/portal.html | 12 +- webdesign/portfolio.html | 10 +- webdesign/preise.html | 10 +- webdesign/rechtliches.html | 6 +- webdesign/sw.js | 2 +- webdesign/ueber.html | 8 +- webdesign/verwaltung.html | 26 +- webdesign/widerruf.html | 10 +- webdesign/zugang.html | 8 +- 30 files changed, 556 insertions(+), 81 deletions(-) create mode 100644 pruef-aufgaben-computer.png create mode 100644 pruef-aufgaben-handy.png create mode 100644 pruef-design.mjs create mode 100644 pruef-detail-computer.png create mode 100644 pruef-detail-handy.png create mode 100644 pruef-portal-aufgaben-computer.png create mode 100644 pruef-portal-aufgaben-handy.png create mode 100644 pruef-portal-postfach-computer.png create mode 100644 pruef-portal-postfach-handy.png create mode 100644 pruef-postfach-computer.png create mode 100644 pruef-postfach-handy.png create mode 100644 pruef-rechtliches.png create mode 100644 pruef-widerruf-computer.png create mode 100644 pruef-widerruf-handy.png diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index c72f5c21..97c5792f 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -263,7 +263,7 @@ body.wd::after { .wd-eyebrow { display: inline-block; - font-size: .74rem; + font-size: 0.8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; @@ -799,7 +799,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .wd-marke img { width: 42px; height: 42px; object-fit: contain; } .wd-marke-text { display: flex; flex-direction: column; line-height: 1.1; } .wd-marke-oben { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--wd-text); letter-spacing: .02em; } -.wd-marke-unten { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wd-blau); font-weight: 700; } +.wd-marke-unten { font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wd-blau); font-weight: 700; } .wd-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; } .wd-nav a { @@ -897,7 +897,23 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .wd-fuss { border-top: 1px solid var(--wd-rand); background: rgba(5, 7, 11, .8); padding: 2.6rem 0 2rem; margin-top: 3rem; } .wd-fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } @media (max-width: 780px) { .wd-fuss-grid { grid-template-columns: 1fr; gap: 1.5rem; } } -.wd-fuss h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .8rem; } +/* Die Spaltenueberschriften der Fusszeile sind jetzt h2 statt h4. + + Grund: Sie folgten im Dokument auf die h2 der Seite -- ein Sprung von + h2 direkt auf h4. Wer sich mit einem Screenreader durch die + Ueberschriften bewegt, hoert dabei eine Gliederung, die es nicht gibt, + und vermutet uebersprungene Abschnitte (WCAG 1.3.1). Auf allen 13 + Seiten in allen 5 Sprachen -- also 42 Stellen. + + Die Klasse haelt die Optik unveraendert: Die Ebene sagt etwas ueber + die STRUKTUR, die Groesse ueber die GEWICHTUNG. Das sind zwei + verschiedene Dinge, und man soll das eine nicht ueber das andere + erzwingen muessen. */ +.wd-fuss .wd-fuss-h, .wd-fuss h4 { + font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; + color: var(--wd-blau); margin: 0 0 .8rem; font-weight: 700; + font-family: var(--font-head); +} .wd-fuss ul li { margin-bottom: .1rem; } /* Fußzeilenlinks waren nur so hoch wie ihre Zeile (20px) und damit auf dem Handy praktisch nicht sicher zu treffen — sie liegen zudem dicht @@ -1092,7 +1108,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .po-vorschau-etikett { position: absolute; top: .7rem; right: .8rem; - font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; + font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--wd-text-soft); padding: .2rem .55rem; border-radius: 999px; background: rgba(5,7,11,.7); border: 1px solid var(--wd-rand); @@ -1123,7 +1139,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .po-vorschau-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--wd-text-soft); } .po-vorschau-marke { display: inline-flex; align-items: center; gap: .3rem; - padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; + padding: .18rem .55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(127,208,232,.12); color: var(--wd-blau); } .po-vorschau-schritt { margin: .7rem 0 0; font-size: .88rem; color: var(--wd-text-mid); opacity: .8; } @@ -1453,7 +1469,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { .po-aufg-gruppe { margin-bottom: 1.1rem; } .po-aufg-kopf { display: flex; align-items: baseline; gap: .5rem; - font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; + font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .45rem; padding-bottom: .35rem; border-bottom: 1px solid var(--wd-rand); } @@ -1515,7 +1531,7 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232, .po-aufg-marke { display: inline-block; white-space: nowrap; - font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; + font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; padding: .14rem .45rem; border-radius: 999px; } .po-aufg-marke--ok { background: rgba(111,214,163,.13); color: var(--wd-ok); } @@ -1523,7 +1539,7 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232, .po-aufg-marke--du { background: rgba(232,200,119,.16); color: var(--wd-gold); } .po-aufg-nicht { display: inline-block; margin-left: .4rem; - font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; + font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; padding: .12rem .4rem; border-radius: 999px; background: rgba(255,157,157,.12); color: var(--wd-fehler); } @@ -1677,7 +1693,9 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232, .rl-text ul { margin: 0 0 .9rem; padding-left: 1.2rem; } .rl-text li { margin-bottom: .35rem; } .rl-text code { - font-size: .86em; padding: .1rem .35rem; border-radius: 5px; + /* min() statt eines reinen em-Werts: In einem ohnehin kleineren Absatz + rutschte der Code sonst auf 11,2px -- unter die Lesbarkeitsgrenze. */ + font-size: max(.78rem, .86em); padding: .1rem .35rem; border-radius: 5px; background: rgba(127,208,232,.09); color: var(--wd-blau); } diff --git a/assets/js/wd-core.js b/assets/js/wd-core.js index 9472c075..2c977f8d 100644 --- a/assets/js/wd-core.js +++ b/assets/js/wd-core.js @@ -488,11 +488,11 @@ '

' + t("fuss_claim") + "

" + "" + "
" + - '

' + t("fuss_bereiche") + "

" + + '

' + t("fuss_bereiche") + "

" + "
    " + bereicheHtml + "
" + "
" + "
" + - '

' + t("fuss_zugang") + "

" + + '

' + t("fuss_zugang") + "

" + "