Barrierefreiheit (BFSG/WCAG 2.1 AA): Skip-Link, aria-live, Labels, Fokus-Sichtbarkeit, Überschriften-Hierarchie

Technisches Accessibility-Audit ergab sechs behebbare Punkte, alle jetzt gefixt:
- Skip-to-Content-Link ganz oben auf jeder Seite (WCAG 2.4.1)
- Fehler-/Statusmeldungen (Checkout, Login, Rezension, Gate-/Verwaltungs-Code) jetzt mit
  role="alert"/aria-live, damit Screenreader sie automatisch ansagen (WCAG 4.1.3)
- Warenkorb-Icon hatte fälschlich das "Konto"-Label geerbt, sagt jetzt korrekt "Warenkorb"
  (WCAG 4.1.2/2.4.4), dafür t.nav.cart in allen 4 Sprachen neu ergänzt
- Sichtbarer Fokus-Ring beim Mengenfeld auf der Produktseite wiederhergestellt (WCAG 2.4.7)
- Placeholder-only Formularfelder (Gate-Zugangscode, Verwaltungs-Suche/Filter/Tracking) haben
  jetzt echte Labels (sichtbar per sr-only-Klasse oder aria-label) statt nur Platzhaltertext
  (WCAG 1.3.1/3.3.2)
- Übersprungene Überschriften-Ebenen (h1→h3 ohne h2) in Checkout, Warenkorb, Kontakt, Konto
  korrigiert (WCAG 1.3.1)

Reine Accessibility-Nachrüstung, keine funktionale Änderung. Kleinstunternehmer-Ausnahme
(§3 Abs.3 BFSG) greift hier vermutlich, aber vorsorglich sauber umgesetzt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-04 12:08:52 +02:00
co-authored by Claude Sonnet 5
parent b70bad3e41
commit b944bcf724
11 changed files with 99 additions and 21 deletions
+13 -1
View File
@@ -21,6 +21,17 @@
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
/* Für Screenreader vorhanden, visuell aber unsichtbar — ersetzt bei den Formularfeldern dieser
Seite den (allein nicht ausreichenden) Placeholder-Text durch ein echtes <label>. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
html, body { height: 100%; }
body {
margin: 0;
@@ -133,10 +144,11 @@
<p>Diese Seite ist zusätzlich mit einem eigenen, festen Code geschützt, den nur ihr beide
kennt. Der Code bleibt immer gleich — ihr müsst ihn aber einmal pro Tag neu eingeben.</p>
<form id="vw-form">
<label class="sr-only" for="vw-code">Verwaltungs-Code</label>
<input type="text" id="vw-code" placeholder="Verwaltungs-Code" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus />
<button type="submit">Weiter</button>
</form>
<p class="gate-fehler" id="vw-fehler"></p>
<p class="gate-fehler" id="vw-fehler" role="alert" aria-live="assertive"></p>
<p class="gate-zurueck"><a href="/">← Zurück zur Startseite</a></p>
</div>
<script>