# 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 | Fehlende Landmark: Navigation: div.slider__navs (1 Stelle) | 1.3.1,2.4.1 | 1 | | 20 | High | Linkzweck nicht erkennbar: a.-md.-outline-black.button (1 Stelle) | 2.4.4 | 1 | | 21 | High | Formularfeld ohne Beschriftung: textarea[placeholder] (1 Stelle) | 1.3.1 | 1 | | 22 | High | Mehrdeutiger Linktext ("mehr", "hier"): a.-md.-white.button.text-black (1 Stelle) | 2.4.4 | 1 | | 23 | High | Nicht per Tastatur bedienbar: .barba-container (1 Stelle) | 2.1.1 | 1 | | 24 | High | Nicht per Tastatur bedienbar: main.light-version (1 Stelle) | 2.1.1 | 1 | | 25 | Medium | Mehrdeutiger Linktext ("mehr", "hier"): a[href] (9 Stellen) | 2.4.4 | 9 | | 26 | Medium | Sichtung: Mehrdeutiger Linktext ("mehr", "hier") an 2 Stellen ohne erkennbares Komponentenmuster (a) | 2.4.4 | 2 | | 27 | Medium | Information nur über Farbe: .rcb-cookie-settings-link (1 Stelle) | 1.4.1 | 1 | | 28 | Medium | Mehrdeutiger Linktext ("mehr", "hier"): button.js-ui-scroll-button.text-black.ui-element__scroll (1 Stelle) | 2.4.4 | 1 | | 29 | Medium | Linkzweck nicht erkennbar: a.-md.-outline-black.button.text-black (1 Stelle) | 2.4.4 | 1 | | 30 | Medium | Linkzweck nicht erkennbar: a.-black.-md.button.text-white (1 Stelle) | 2.4.4 | 1 | | 31 | Medium | Linkzweck nicht erkennbar: a[href] (1 Stelle) | 2.4.4 | 1 | | 32 | Low | Fehlende Textalternative: i.icon[data-feather] (1 Stelle) | 1.1.1 | 1 | | 33 | Low | Fehlende Textalternative: a.-md.-outline-black.button.text-black (1 Stelle) | 1.1.1 | 1 | | 34 | Low | Fehlende Textalternative: img[alt] (1 Stelle) | 1.1.1 | 1 | ### Zuerst messen (12 Aufgaben) Kontrast, Zielgröße und Umbruch kann die automatische Prüfung aus dem HTML nur vermuten. Diese Aufgaben beginnen mit einer Messung im Browser; liegt der Wert im zulässigen Bereich, ist kein Eingriff nötig. | # | Priorität | Aufgabe | WCAG | Stellen | |---|---|---|---|---| | 35 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: p.text-black (1 Stelle) | 1.4.11 | 1 | | 36 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: p.-black.sectionHeading__subtitle (1 Stelle) | 1.4.11 | 1 | | 37 | High | Sichtung: Seiteninhalt fließt nicht um an 1 Stellen ohne erkennbares Komponentenmuster (body) | 1.4.10 | 1 | | 38 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: a.-md.-outline-black.button.text-black (1 Stelle) | 1.4.11 | 1 | | 39 | High | Unzureichender Kontrast bei Bedienelementen oder Grafiken: h2.sectionHeading__title.text-black (1 Stelle) | 1.4.11 | 1 | | 40 | Medium | Sichtung: Unzureichender Textkontrast an 11 Stellen ohne erkennbares Komponentenmuster (p, h1, h2, h3, h4, h5) | 1.4.3 | 11 | | 41 | Medium | Sichtung: Unzureichender Kontrast bei Bedienelementen oder Grafiken an 5 Stellen ohne erkennbares Komponentenmuster (i, a) | 1.4.11 | 5 | | 42 | Medium | Unzureichender Kontrast bei Bedienelementen oder Grafiken: i.size-md.str-width-md.text-accent[data-feather] (3 Stellen) | 1.4.11 | 3 | | 43 | Medium | Seiteninhalt fließt nicht um: div.overflow-hidden.slider__button (3 Stellen) | 1.4.10 | 3 | | 44 | Medium | Unzureichender Textkontrast: .text-black (2 Stellen) | 1.4.3 | 2 | | 45 | Medium | Unzureichender Textkontrast: .sectionHeading__title.text-black (2 Stellen) | 1.4.3 | 2 | | 46 | Medium | Unzureichender Textkontrast: .-black.sectionHeading__subtitle (2 Stellen) | 1.4.3 | 2 | ## 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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:** Screenreader-Nutzer navigieren über Überschriften; Lücken oder fehlende H1 machen die Struktur unverständlich. **Ä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; Ebenen ohne Sprünge (H2 vor H3); Styling per Klasse statt per Überschriftenebene; optisch hervorgehobener Text ohne Gliederungsfunktion ist keine Überschrift. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Die Überschriften-Gliederung (z. B. per HeadingsMap) ist vollständig und ohne Sprünge; genau eine H1. - [ ] 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: Screenreader-Nutzer navigieren über Überschriften; Lücken oder fehlende H1 machen die Struktur unverständlich. Ä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; Ebenen ohne Sprünge (H2 vor H3); Styling per Klasse statt per Überschriftenebene; optisch hervorgehobener Text ohne Gliederungsfunktion ist keine Überschrift. 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 Überschriften-Gliederung (z. B. per HeadingsMap) ist vollständig und ohne Sprünge; genau eine H1. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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="" 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. - [ ] 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="" 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. - 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:** Screenreader-Nutzer, die Links auflisten, 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. Linktext beschreibt das Ziel („Zur Preisübersicht“ statt „mehr“); bei Icon-Links aria-label oder visuell verborgener Text; gleiche Texte führen zum gleichen Ziel. **Abnahmekriterien:** - [ ] Jede Fundstelle ist einer Komponente zugeordnet oder als Einzelfall behoben. - [ ] Jeder Link des Musters ist aus seinem zugänglichen Namen heraus verständlich, auch ohne umgebenden Text. - [ ] 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: Screenreader-Nutzer, die Links auflisten, 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. Linktext beschreibt das Ziel („Zur Preisübersicht“ statt „mehr“); bei Icon-Links aria-label oder visuell verborgener Text; gleiche Texte führen zum gleichen Ziel. 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 ist aus seinem zugänglichen Namen heraus verständlich, auch ohne umgebenden Text. - 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