greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility: ARIA-Labels, Focus-Management, Skip-Navigation #18

New Issue
Closed
opened 2026-05-14 00:29:42 +02:00 by greggy · 2 comments
greggy commented 2026-05-14 00:29:42 +02:00
Owner
Copy Link
Copy Source

Problem

Keine ARIA-Labels, kein Focus-Management, keine Skip-Navigation. Seite für Screenreader und Tastatur-Nutzer kaum bedienbar.

Nutzen

Barrierefreiheit für alle Nutzer. Rechtliche Absicherung (BITV 2.0). Bessere UX.

Technische Umsetzung

  1. Skip-to-content Link
  2. ARIA-Labels für interaktive Elemente
  3. Focus-Management bei Lightbox
  4. Alt-Texte ergänzen
  5. Keyboard-Navigation für Galerie und Akkordeon
  6. Farbkontraste prüfen (WCAG 2.1 AA)

Aufwand: Mittel | Risiko: Niedrig | Empfehlung: Sinnvoll

## Problem Keine ARIA-Labels, kein Focus-Management, keine Skip-Navigation. Seite für Screenreader und Tastatur-Nutzer kaum bedienbar. ## Nutzen Barrierefreiheit für alle Nutzer. Rechtliche Absicherung (BITV 2.0). Bessere UX. ## Technische Umsetzung 1. Skip-to-content Link 2. ARIA-Labels für interaktive Elemente 3. Focus-Management bei Lightbox 4. Alt-Texte ergänzen 5. Keyboard-Navigation für Galerie und Akkordeon 6. Farbkontraste prüfen (WCAG 2.1 AA) ## Aufwand: Mittel | Risiko: Niedrig | Empfehlung: Sinnvoll
greggy added the KI label 2026-05-14 00:29:42 +02:00
greggy commented 2026-05-14 00:58:53 +02:00
Author
Owner
Copy Link
Copy Source

🔍 Analyse & Architektur – Spezifikation (Phase 1)

Komplexität: M (Medium) – Mehrere in sich abgeschlossene Teilaufgaben, geschätzt 2-3h
Risiko: Niedrig

Ist-Zustand – Accessibility-Probleme

Problem Betroffene Elemente WCAG-Kriterium
Kein Skip-to-Content Link <body> Start 2.4.1 (A)
Keine ARIA-Rollen/Landmarks <nav>, <section>, <footer> 1.3.1 (A)
Fehlende aria-expanded Akkordeon-Header (.floor-header) 4.1.2 (A)
Kein Focus-Trap in Lightbox #lightbox 2.4.3 (A)
Galerie-Items nicht tastaturbedienbar .grid-item (click-only) 2.1.1 (A)
Akkordeon nicht tastaturbedienbar .floor-header (click-only <div>) 2.1.1 (A)
Alt-Texte teilweise generisch Lightbox-Bild, einige Galerie-Bilder 1.1.1 (A)
Keine focus-visible Styles Alle interaktiven Elemente 2.4.7 (AA)
Farbkontraste unter AA --stone auf --white (~3.1:1) 1.4.3 (AA)

8 Teilaufgaben

  1. TA-1: Skip-to-Content Link – Versteckter Link → <main id="main-content">, bei Tab sichtbar
  2. TA-2: ARIA-Landmarks – <nav aria-label>, <main>, <footer role>, Sections mit aria-label
  3. TA-3: Akkordeon ARIA + Keyboard – role="button", tabindex="0", aria-expanded, Enter/Space-Handler
  4. TA-4: Lightbox Focus-Management – Focus-Trap, role="dialog", Fokus auf Close-Button, Return-Fokus
  5. TA-5: Galerie Keyboard – role="button", tabindex="0", Enter/Space öffnet Lightbox
  6. TA-6: Alt-Texte optimieren – Generische Alt-Texte durch beschreibende ersetzen
  7. TA-7: Focus-Visible Styles – *:focus-visible mit klarem Outline für alle Elemente
  8. TA-8: Farbkontraste – --stone dunkler setzen (~5:1 auf White) für AA-Konformität

Architektur

  • Nur Änderungen an 3 Dateien: HTML, CSS, JS
  • Keine neuen Dependencies
  • Kein Backend-Änderungsbedarf

Empfohlene Reihenfolge

TA-2 → TA-1 → TA-7 → TA-8 → TA-3 → TA-5 → TA-4 → TA-6

📝 Vollständige Spezifikation: memory/gitea-specs/issue-18.md

## 🔍 Analyse & Architektur – Spezifikation (Phase 1) **Komplexität:** **M (Medium)** – Mehrere in sich abgeschlossene Teilaufgaben, geschätzt 2-3h **Risiko:** Niedrig --- ### Ist-Zustand – Accessibility-Probleme | Problem | Betroffene Elemente | WCAG-Kriterium | |---|---|---| | Kein Skip-to-Content Link | `<body>` Start | 2.4.1 (A) | | Keine ARIA-Rollen/Landmarks | `<nav>`, `<section>`, `<footer>` | 1.3.1 (A) | | Fehlende `aria-expanded` | Akkordeon-Header (`.floor-header`) | 4.1.2 (A) | | Kein Focus-Trap in Lightbox | `#lightbox` | 2.4.3 (A) | | Galerie-Items nicht tastaturbedienbar | `.grid-item` (click-only) | 2.1.1 (A) | | Akkordeon nicht tastaturbedienbar | `.floor-header` (click-only `<div>`) | 2.1.1 (A) | | Alt-Texte teilweise generisch | Lightbox-Bild, einige Galerie-Bilder | 1.1.1 (A) | | Keine `focus-visible` Styles | Alle interaktiven Elemente | 2.4.7 (AA) | | Farbkontraste unter AA | `--stone` auf `--white` (~3.1:1) | 1.4.3 (AA) | ### 8 Teilaufgaben 1. **TA-1: Skip-to-Content Link** – Versteckter Link → `<main id="main-content">`, bei Tab sichtbar 2. **TA-2: ARIA-Landmarks** – `<nav aria-label>`, `<main>`, `<footer role>`, Sections mit aria-label 3. **TA-3: Akkordeon ARIA + Keyboard** – `role="button"`, `tabindex="0"`, `aria-expanded`, Enter/Space-Handler 4. **TA-4: Lightbox Focus-Management** – Focus-Trap, `role="dialog"`, Fokus auf Close-Button, Return-Fokus 5. **TA-5: Galerie Keyboard** – `role="button"`, `tabindex="0"`, Enter/Space öffnet Lightbox 6. **TA-6: Alt-Texte optimieren** – Generische Alt-Texte durch beschreibende ersetzen 7. **TA-7: Focus-Visible Styles** – `*:focus-visible` mit klarem Outline für alle Elemente 8. **TA-8: Farbkontraste** – `--stone` dunkler setzen (~5:1 auf White) für AA-Konformität ### Architektur - Nur Änderungen an 3 Dateien: `HTML`, `CSS`, `JS` - Keine neuen Dependencies - Kein Backend-Änderungsbedarf ### Empfohlene Reihenfolge TA-2 → TA-1 → TA-7 → TA-8 → TA-3 → TA-5 → TA-4 → TA-6 📝 Vollständige Spezifikation: `memory/gitea-specs/issue-18.md`
greggy added the ReadyForDev label 2026-05-14 00:59:04 +02:00
greggy added the ImplementingInReviewReadyForMerge labels 2026-05-14 01:17:08 +02:00
greggy commented 2026-05-14 01:20:06 +02:00
Author
Owner
Copy Link
Copy Source

🔗 Abhängigkeit: Dieses Issue hängt von #19 (jQuery entfernen) ab.

Grund: #19 schreibt das JS komplett auf Vanilla JS um. Accessibility-Änderungen am JS (Focus-Trap, Keyboard-Navigation) sollten auf der Vanilla-JS-Basis aufsetzen, nicht auf der jQuery-Basis.

Empfehlung: #19 zuerst mergen, dann #18.

🔗 **Abhängigkeit:** Dieses Issue hängt von #19 (jQuery entfernen) ab. Grund: #19 schreibt das JS komplett auf Vanilla JS um. Accessibility-Änderungen am JS (Focus-Trap, Keyboard-Navigation) sollten auf der Vanilla-JS-Basis aufsetzen, nicht auf der jQuery-Basis. **Empfehlung:** #19 zuerst mergen, dann #18.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
Accessibility / a11y (44x44px, ARIA, contrast)
 i18n
Internationalization / translation
 Implementing
InQA
InReview
InValidation
KI
Von KI bearbeitet
 KI
KI
KI
priority/P1
High priority (do soon)
 ReadyForDev
Bereit zur Implementierung
 ReadyForMerge
responsive
Responsive design (mobile/tablet/desktop)
 type/feature
Feature request (new user-facing capability)
No labels Implementing InReview KI ReadyForDev ReadyForMerge
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
greggy
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: greggy/landingpage-haus-schleusingen#18