greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 2 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

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

🔍 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
Implementing
InReview
ReadyForMerge
 labels 2026-05-14 01:17:08 +02:00
greggy commented 2026-05-14 01:20:06 +02:00
Author
Owner
Copy Link

🔗 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
Implementing
InQA
InReview
InValidation
KI
Von KI bearbeitet
KI
KI
KI
ReadyForDev
Bereit zur Implementierung
ReadyForMerge
No Label
Implementing
InReview
KI
ReadyForDev
ReadyForMerge
Milestone
No items
No Milestone
Projects
Clear projects
No project
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
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?