# Entwickleraufgaben Barrierefreiheit – Beispiel: rockstardevelopers.de Quelle: automatisierte Prüfung von https://rockstardevelopers.de am 17.09.2026. 46 Aufgaben aus 109 Befunden. Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; jede Aufgabe enthält deshalb eine manuelle Abnahme. | # | Priorität | Aufgabe | WCAG | Stellen | |---|---|---|---|---| | 1 | Highest | Sichtung: Fehlende Textalternative an 13 Stellen ohne erkennbares Komponentenmuster (img, *) | 1.1.1 | 13 | | 2 | Highest | Fehlende Textalternative: div.bg-image.js-image.swiper-lazy[data-background] (3 Stellen) | 1.1.1 | 3 | | 3 | Highest | Fehlende Textalternative: div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) | 1.1.1 | 3 | | 4 | Highest | Fehlende Textalternative: a.-black.-md.button.text-white[href] (3 Stellen) | 1.1.1 | 3 | | 5 | Highest | Fehlende Textalternative: a > div.portfolioCard__img > div.portfolioCard__img__inner > div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) | 1.1.1 | 3 | | 6 | Highest | Fehlende Textalternative: img[src] (2 Stellen) | 1.1.1 | 2 | | 7 | Highest | Sichtung: Mehrere H1-Überschriften an 2 Stellen ohne erkennbares Komponentenmuster (h1) | 2.4.6,1.3.1 | 2 | | 8 | Highest | Sichtung: Schaltfläche ohne Namen an 2 Stellen ohne erkennbares Komponentenmuster (button) | 4.1.2 | 2 | | 9 | Highest | Fehlende Textalternative: img.attachment-large.vc_single_image-img (2 Stellen) | 1.1.1 | 2 | | 10 | Highest | Fehlende Textalternative: a.-black.-md.button.text-white (1 Stelle) | 1.1.1 | 1 | | 11 | Highest | Fehlende Textalternative: div.bg-image.js-lazy (1 Stelle) | 1.1.1 | 1 | | 12 | Highest | Fehlende Textalternative: div.bg-image.js-lazy.overlay-black-md (1 Stelle) | 1.1.1 | 1 | | 13 | Highest | Fehlende Textalternative: .preloader__bg (1 Stelle) | 1.1.1 | 1 | | 14 | Highest | Fehlende Textalternative: .bg-image.js-lazy (1 Stelle) | 1.1.1 | 1 | | 15 | Highest | Fehlende Textalternative: div.js-lazy[data-bg] (1 Stelle) | 1.1.1 | 1 | | 16 | Highest | Fehlende Textalternative: .preloader__pulse (1 Stelle) | 1.1.1 | 1 | | 17 | High | Sichtung: Linkzweck nicht erkennbar an 9 Stellen ohne erkennbares Komponentenmuster (a) | 2.4.4 | 9 | | 18 | High | Formularfeld ohne Beschriftung: input[placeholder] (2 Stellen) | 1.3.1 | 2 | | 19 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: p.text-black (1 Stelle) | 1.4.11 | 1 | | 20 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: p.-black.sectionHeading__subtitle (1 Stelle) | 1.4.11 | 1 | | 21 | High | Fehlende Landmark für Navigation: div.slider__navs (1 Stelle) | 1.3.1,2.4.1 | 1 | | 22 | High | Sichtung: Seiteninhalt fließt nicht um an 1 Stellen ohne erkennbares Komponentenmuster (body) | 1.4.10 | 1 | | 23 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: a.-md.-outline-black.button.text-black (1 Stelle) | 1.4.11 | 1 | | 24 | High | Linkzweck nicht erkennbar: a.-md.-outline-black.button (1 Stelle) | 2.4.4 | 1 | | 25 | High | Formularfeld ohne Beschriftung: textarea[placeholder] (1 Stelle) | 1.3.1 | 1 | | 26 | High | Mehrdeutiger Linktext ("mehr", "hier"): a.-md.-white.button.text-black (1 Stelle) | 2.4.4 | 1 | | 27 | High | Nicht per Tastatur bedienbar: .barba-container (1 Stelle) | 2.1.1 | 1 | | 28 | High | Nicht per Tastatur bedienbar: main.light-version (1 Stelle) | 2.1.1 | 1 | | 29 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: h2.sectionHeading__title.text-black (1 Stelle) | 1.4.11 | 1 | | 30 | Medium | Sichtung: Unzureichender Textkontrast an 11 Stellen ohne erkennbares Komponentenmuster (p, h1, h2, h3, h4, h5) | 1.4.3 | 11 | | 31 | Medium | Mehrdeutiger Linktext ("mehr", "hier"): a[href] (9 Stellen) | 2.4.4 | 9 | | 32 | Medium | Sichtung: Unzureichender Kontrast bei Bedienelementen oder Grafiken an 5 Stellen ohne erkennbares Komponentenmuster (i, a) | 1.4.11 | 5 | | 33 | Medium | Unzureichender Kontrast bei Bedienelementen oder Grafiken: i.size-md.str-width-md.text-accent[data-feather] (3 Stellen) | 1.4.11 | 3 | | 34 | Medium | Inhalt fließt bei 320 px Breite nicht um: div.overflow-hidden.slider__button (3 Stellen) | 1.4.10 | 3 | | 35 | Medium | Unzureichender Textkontrast: .text-black (2 Stellen) | 1.4.3 | 2 | | 36 | Medium | Unzureichender Textkontrast: .sectionHeading__title.text-black (2 Stellen) | 1.4.3 | 2 | | 37 | Medium | Sichtung: Mehrdeutiger Linktext ("mehr", "hier") an 2 Stellen ohne erkennbares Komponentenmuster (a) | 2.4.4 | 2 | | 38 | Medium | Unzureichender Textkontrast: .-black.sectionHeading__subtitle (2 Stellen) | 1.4.3 | 2 | | 39 | Medium | Information nur über Farbe: .rcb-cookie-settings-link (1 Stelle) | 1.4.1 | 1 | | 40 | Medium | Mehrdeutiger Linktext ("mehr", "hier"): button.js-ui-scroll-button.text-black.ui-element__scroll (1 Stelle) | 2.4.4 | 1 | | 41 | Medium | Linkzweck nicht erkennbar: a.-md.-outline-black.button.text-black (1 Stelle) | 2.4.4 | 1 | | 42 | Medium | Linkzweck nicht erkennbar: a.-black.-md.button.text-white (1 Stelle) | 2.4.4 | 1 | | 43 | Medium | Linkzweck nicht erkennbar: a[href] (1 Stelle) | 2.4.4 | 1 | | 44 | Low | Fehlende Textalternative: i.icon[data-feather] (1 Stelle) | 1.1.1 | 1 | | 45 | Low | Fehlende Textalternative: a.-md.-outline-black.button.text-black (1 Stelle) | 1.1.1 | 1 | | 46 | Low | Fehlende Textalternative: img[alt] (1 Stelle) | 1.1.1 | 1 | ## 1. Sichtung: Fehlende Textalternative an 13 Stellen ohne erkennbares Komponentenmuster (img, *) - **ID:** `task-aa58fc47` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `img | *` (nur Tag) - **Auto-Fix möglich:** 13 · **manuell:** 0 **Fundstellen (Auswahl):** - `img` – sections_large #8, sections #14, sections_large #11, sections_chunk #4 - `#a37bcb7e1-1154-495f-8839-bf645d578b54` – content_chunk #32 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 13 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Sichtung: Fehlende Textalternative an 13 Stellen ohne erkennbares Komponentenmuster (img, *) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 13 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `img | *` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `img` (sections_large #8, sections #14, sections_large #11, sections_chunk #4) - `#a37bcb7e1-1154-495f-8839-bf645d578b54` (content_chunk #32) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints f7d50e9b, f6d50d08, f9d511c1, f8d5102e, fbd514e7, fad51354, fdd5180d, fcd5167a, …. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 2. Fehlende Textalternative: div.bg-image.js-image.swiper-lazy[data-background] (3 Stellen) - **ID:** `task-74dc2c25` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `div.bg-image.js-image.swiper-lazy[data-background]` (Komponente) - **Auto-Fix möglich:** 3 · **manuell:** 0 **Fundstellen (Auswahl):** - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7095-e1696602197129.jpg']` – sections_sub_sub_chunk #1 - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7090.jpg']` – sections_sub_sub_chunk #1 - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7089.jpg']` – sections_sub_sub_chunk #1 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 3 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: div.bg-image.js-image.swiper-lazy[data-background] (3 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 3 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `div.bg-image.js-image.swiper-lazy[data-background]` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7095-e1696602197129.jpg']` (sections_sub_sub_chunk #1) - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7090.jpg']` (sections_sub_sub_chunk #1) - `div.bg-image.swiper-lazy.js-image[data-background='https://rockstardevelopers.de/wp-content/uploads/2023/10/IMG_7089.jpg']` (sections_sub_sub_chunk #1) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 1fb77255, f6163161, 1c2c99df. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 3. Fehlende Textalternative: div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) - **ID:** `task-9f64dd78` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `div.bg-image.js-lazy.ratio.ratio-3:4` (Komponente) - **Auto-Fix möglich:** 3 · **manuell:** 0 **Fundstellen (Auswahl):** - `div.ratio.ratio-3:4.bg-image.js-lazy` – sections_large #6 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 3 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 3 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `div.bg-image.js-lazy.ratio.ratio-3:4` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `div.ratio.ratio-3:4.bg-image.js-lazy` (sections_large #6) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 65bcef38, 66bcf0cb, 67bcf25e. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 4. Fehlende Textalternative: a.-black.-md.button.text-white[href] (3 Stellen) - **ID:** `task-bf671a31` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `a.-black.-md.button.text-white[href]` (Komponente) - **Auto-Fix möglich:** 3 · **manuell:** 0 **Fundstellen (Auswahl):** - `a.button.-md.-black.text-white[href='/software-engineering']` – sections_sub_sub_chunk #0 - `a.button.-md.-black.text-white[href='/software-consulting']` – sections_sub_sub_chunk #0 - `a.button.-md.-black.text-white[href='/artificial-intelligence-solutions']` – sections_sub_sub_chunk #0 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 3 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: a.-black.-md.button.text-white[href] (3 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 3 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `a.-black.-md.button.text-white[href]` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `a.button.-md.-black.text-white[href='/software-engineering']` (sections_sub_sub_chunk #0) - `a.button.-md.-black.text-white[href='/software-consulting']` (sections_sub_sub_chunk #0) - `a.button.-md.-black.text-white[href='/artificial-intelligence-solutions']` (sections_sub_sub_chunk #0) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints ec0220d8, 0c1e2245, 00adb778. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 5. Fehlende Textalternative: a > div.portfolioCard__img > div.portfolioCard__img__inner > div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) - **ID:** `task-c477e997` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `a > div.portfolioCard__img > div.portfolioCard__img__inner > div.bg-image.js-lazy.ratio.ratio-3:4` (Komponente) - **Auto-Fix möglich:** 3 · **manuell:** 0 **Fundstellen (Auswahl):** - `a > div.portfolioCard__img > div.portfolioCard__img__inner > div.ratio.ratio-3:4.bg-image.js-lazy` – sections_oversized #16 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 3 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: a > div.portfolioCard__img > div.portfolioCard__img__inner > div.bg-image.js-lazy.ratio.ratio-3:4 (3 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 3 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `a > div.portfolioCard__img > div.portfolioCard__img__inner > div.bg-image.js-lazy.ratio.ratio-3:4` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `a > div.portfolioCard__img > div.portfolioCard__img__inner > div.ratio.ratio-3:4.bg-image.js-lazy` (sections_oversized #16) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints af80264f, ae8024bc, b1802975. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 6. Fehlende Textalternative: img[src] (2 Stellen) - **ID:** `task-513f9885` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `img[src]` (Komponente) - **Auto-Fix möglich:** 2 · **manuell:** 0 **Fundstellen (Auswahl):** - `img[src='https://rockstardevelopers.de/wp-content/plugins/real-cookie-banner/public/images/accessibleAI-logo.svg']` – content_chunk #26 - `img[src='https://rockstardevelopers.de/wp-content/uploads/2023/12/02-logogeneral-image-image.png']` – sections_oversized #21 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 2 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: img[src] (2 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 2 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `img[src]` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `img[src='https://rockstardevelopers.de/wp-content/plugins/real-cookie-banner/public/images/accessibleAI-logo.svg']` (content_chunk #26) - `img[src='https://rockstardevelopers.de/wp-content/uploads/2023/12/02-logogeneral-image-image.png']` (sections_oversized #21) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 9cb622b4, ff2fa895. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 7. Sichtung: Mehrere H1-Überschriften an 2 Stellen ohne erkennbares Komponentenmuster (h1) - **ID:** `task-78cf4481` - **Priorität:** Highest (Schwere critical) - **WCAG:** 2.4.6,1.3.1 · **Regel:** multiple-h1-headings - **Muster:** `h1` (nur Tag) - **Auto-Fix möglich:** 2 · **manuell:** 0 **Fundstellen (Auswahl):** - `h1` – skeleton_main #35 **Nutzerwirkung:** Die Seitenstruktur ist für Screenreader-Navigation unklar. **Änderungsvorschlag:** Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Genau eine H1 je Seite; weitere Überschriften auf H2/H3 herabstufen, Styling per Klasse statt per Ebene. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Die Seite enthält genau eine H1; die Überschriftenreihenfolge ist ohne Sprünge. - [ ] Nachprüfung ohne Befund für 2 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Sichtung: Mehrere H1-Überschriften an 2 Stellen ohne erkennbares Komponentenmuster (h1) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 2.4.6,1.3.1, Regel multiple-h1-headings, Schwere critical, 2 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `h1` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `h1` (skeleton_main #35) Nutzerwirkung: Die Seitenstruktur ist für Screenreader-Navigation unklar. Änderungsvorschlag: Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Genau eine H1 je Seite; weitere Überschriften auf H2/H3 herabstufen, Styling per Klasse statt per Ebene. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - Die Seite enthält genau eine H1; die Überschriftenreihenfolge ist ohne Sprünge. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 828df52f, 818df39c. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 8. Sichtung: Schaltfläche ohne Namen an 2 Stellen ohne erkennbares Komponentenmuster (button) - **ID:** `task-a284174b` - **Priorität:** Highest (Schwere critical) - **WCAG:** 4.1.2 · **Regel:** button-name - **Muster:** `button` (nur Tag) - **Auto-Fix möglich:** 2 · **manuell:** 0 **Fundstellen (Auswahl):** - `button` – sections_sub_chunk #2 **Nutzerwirkung:** Die Schaltfläche wird als "Schaltfläche" ohne Funktion vorgelesen. **Änderungsvorschlag:** Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Sichtbaren Text oder aria-label ergänzen; bei Icon-Buttons visuell verborgenen Text. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Jede Schaltfläche des Musters hat einen zugänglichen Namen, der die Aktion beschreibt. - [ ] Nachprüfung ohne Befund für 2 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Sichtung: Schaltfläche ohne Namen an 2 Stellen ohne erkennbares Komponentenmuster (button) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 4.1.2, Regel button-name, Schwere critical, 2 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `button` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `button` (sections_sub_chunk #2) Nutzerwirkung: Die Schaltfläche wird als "Schaltfläche" ohne Funktion vorgelesen. Änderungsvorschlag: Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Sichtbaren Text oder aria-label ergänzen; bei Icon-Buttons visuell verborgenen Text. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - Jede Schaltfläche des Musters hat einen zugänglichen Namen, der die Aktion beschreibt. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints dd456f82, de457115. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 9. Fehlende Textalternative: img.attachment-large.vc_single_image-img (2 Stellen) - **ID:** `task-adff6e8e` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `img.attachment-large.vc_single_image-img` (Komponente) - **Auto-Fix möglich:** 2 · **manuell:** 0 **Fundstellen (Auswahl):** - `img.vc_single_image-img.attachment-large` – sections_oversized #18 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 2 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: img.attachment-large.vc_single_image-img (2 Stellen) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 2 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `img.attachment-large.vc_single_image-img` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `img.vc_single_image-img.attachment-large` (sections_oversized #18) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints af1acfae, b01ad141. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 10. Fehlende Textalternative: a.-black.-md.button.text-white (1 Stelle) - **ID:** `task-029f0fca` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `a.-black.-md.button.text-white` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `a.button.-md.-black.text-white` – sections #20 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: a.-black.-md.button.text-white (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `a.-black.-md.button.text-white` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `a.button.-md.-black.text-white` (sections #20) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints b4130a0e. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 11. Fehlende Textalternative: div.bg-image.js-lazy (1 Stelle) - **ID:** `task-371af02a` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `div.bg-image.js-lazy` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `div.bg-image.js-lazy` – sections #19 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: div.bg-image.js-lazy (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `div.bg-image.js-lazy` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `div.bg-image.js-lazy` (sections #19) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 05417616. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 12. Fehlende Textalternative: div.bg-image.js-lazy.overlay-black-md (1 Stelle) - **ID:** `task-68f596cc` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `div.bg-image.js-lazy.overlay-black-md` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `div.overlay-black-md.bg-image.js-lazy` – sections #22 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: div.bg-image.js-lazy.overlay-black-md (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `div.bg-image.js-lazy.overlay-black-md` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `div.overlay-black-md.bg-image.js-lazy` (sections #22) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints b49c1e26. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 13. Fehlende Textalternative: .preloader__bg (1 Stelle) - **ID:** `task-73962641` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `.preloader__bg` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `.preloader__bg` – content_chunk #32 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: .preloader__bg (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `.preloader__bg` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `.preloader__bg` (content_chunk #32) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 81490c95. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 14. Fehlende Textalternative: .bg-image.js-lazy (1 Stelle) - **ID:** `task-dd6be47b` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `.bg-image.js-lazy` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `.bg-image.js-lazy` – sections_chunk #9 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: .bg-image.js-lazy (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `.bg-image.js-lazy` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `.bg-image.js-lazy` (sections_chunk #9) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints 3dfa286f. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 15. Fehlende Textalternative: div.js-lazy[data-bg] (1 Stelle) - **ID:** `task-e7c1424d` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `div.js-lazy[data-bg]` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `div.js-lazy[data-bg]` – sections_chunk #12 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: div.js-lazy[data-bg] (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `div.js-lazy[data-bg]` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `div.js-lazy[data-bg]` (sections_chunk #12) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints e23166e9. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 16. Fehlende Textalternative: .preloader__pulse (1 Stelle) - **ID:** `task-ea1437f7` - **Priorität:** Highest (Schwere critical) - **WCAG:** 1.1.1 · **Regel:** missing-alt-text - **Muster:** `.preloader__pulse` (Komponente) - **Auto-Fix möglich:** 1 · **manuell:** 0 **Fundstellen (Auswahl):** - `.preloader__pulse` – content_chunk #32 **Nutzerwirkung:** Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. **Änderungsvorschlag:** Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. **Abnahmekriterien:** - [ ] Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - [ ] Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - [ ] Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - [ ] Nachprüfung ohne Befund für 1 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Fehlende Textalternative: .preloader__pulse (1 Stelle) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 1.1.1, Regel missing-alt-text, Schwere critical, 1 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `.preloader__pulse` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `.preloader__pulse` (content_chunk #32) Nutzerwirkung: Screenreader-Nutzer erfahren nicht, was das Bild oder der bildhafte Link zeigt bzw. wohin er führt. Änderungsvorschlag: Aussagekräftiges alt-Attribut für informative Bilder; alt="" (leer) für rein dekorative Bilder; bei Bild-Links beschreibt der Text das Linkziel (aria-label oder alt des Bildes). Bei CSS-Hintergrundbildern mit Bedeutung ein visuell verborgener Text oder role="img" mit aria-label. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jedes Element des Musters hat eine Textalternative oder ist explizit als dekorativ markiert (alt="" / aria-hidden="true"). - Bild-Links beschreiben das Ziel, nicht das Bild ("Zur Leistung Software Engineering" statt "Pfeil"). - Stichprobe mit einem Screenreader (VoiceOver oder NVDA): Der vorgelesene Text ist verständlich. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints c5d91f33. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 17. Sichtung: Linkzweck nicht erkennbar an 9 Stellen ohne erkennbares Komponentenmuster (a) - **ID:** `task-1b862cf6` - **Priorität:** High (Schwere high) - **WCAG:** 2.4.4 · **Regel:** link-purpose - **Muster:** `a` (nur Tag) - **Auto-Fix möglich:** 3 · **manuell:** 0 **Fundstellen (Auswahl):** - `a` – sections_large #13, sections_large #6, sections_oversized #24 **Nutzerwirkung:** Nutzer von Screenreadern oder Linklisten wissen nicht, wohin der Link führt. **Änderungsvorschlag:** Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Zugänglichen Namen ergänzen: sichtbaren Linktext präzisieren, oder aria-label/aria-labelledby setzen; bei Icon-Links visuell verborgenen Text ergänzen. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Jeder Link des Musters hat einen zugänglichen Namen, der das Ziel im Kontext beschreibt. - [ ] In der Linkliste eines Screenreaders sind die Links unterscheidbar. - [ ] Nachprüfung ohne Befund für 9 Fingerprint(s)
Prompt für den Coding-Agenten ```text Aufgabe: Sichtung: Linkzweck nicht erkennbar an 9 Stellen ohne erkennbares Komponentenmuster (a) Website: https://rockstardevelopers.de (Projekt: Beispiel: rockstardevelopers.de) WCAG 2.4.4, Regel link-purpose, Schwere high, 9 Fundstelle(n). Kontext: Alle Fundstellen teilen das Selektormuster `a` – die Ursache liegt sehr wahrscheinlich in einer gemeinsamen Komponente oder einem Template, nicht in den einzelnen Stellen. Beispiel-Fundstellen (gerenderte Seite): - `a` (sections_large #13, sections_large #6, sections_oversized #24) Nutzerwirkung: Nutzer von Screenreadern oder Linklisten wissen nicht, wohin der Link führt. Änderungsvorschlag: Die Fundstellen teilen nur den Tag. Zuerst im Quelltext klären, welche Templates/Komponenten diese Elemente erzeugen, dann je Komponente eine eigene Aufgabe ableiten. Zugänglichen Namen ergänzen: sichtbaren Linktext präzisieren, oder aria-label/aria-labelledby setzen; bei Icon-Links visuell verborgenen Text ergänzen. Vorgehen: 1. Finde im Quelltext die Komponente bzw. das Template, das dieses Muster erzeugt (suche nach den Klassen im Muster). 2. Behebe die Ursache dort einmal, nicht an den einzelnen Instanzen. 3. Ergänze einen Regressionstest auf Komponentenebene, der vor der Änderung fehlschlägt und danach besteht. 4. Ändere nichts außerhalb dieser Komponente; nenne alle geänderten Dateien. Abnahmekriterien: - Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - Jeder Link des Musters hat einen zugänglichen Namen, der das Ziel im Kontext beschreibt. - In der Linkliste eines Screenreaders sind die Links unterscheidbar. - Erneute Prüfung findet keine Befunde mehr mit den Fingerprints c7f13abb, c6f13928, c9f13de1, c8f13c4e, cbf14107, caf13f74, cdf1442d, ccf1429a, …. Hinweis: Automatische Prüfungen decken nicht alle WCAG-Kriterien ab; die manuelle Prüfung im Abnahmekriterium ist Teil der Aufgabe. ```
## 18. Formularfeld ohne Beschriftung: input[placeholder] (2 Stellen) - **ID:** `task-640faa53` - **Priorität:** High (Schwere high) - **WCAG:** 1.3.1 · **Regel:** missing-form-label - **Muster:** `input[placeholder]` (Komponente) - **Auto-Fix möglich:** 2 · **manuell:** 0 **Fundstellen (Auswahl):** - `input[placeholder='Name']` – content_chunk #29 - `input[placeholder='E-Mail']` – content_chunk #29 **Nutzerwirkung:** Der Placeholder verschwindet beim Tippen; Screenreader-Nutzer kennen den Zweck des Feldes nicht. **Änderungsvorschlag:** Sichtbares