Fähigkeiten web-accessibility
📦

web-accessibility

Sicher

Barrierefreie Web-Oberflächen entwickeln

Auch verfügbar von: Joseph OBrien,Joseph OBrien

Webanwendungen schließen häufig Benutzer mit Behinderungen aufgrund schlechter Barrierefreiheits-Implementierung aus. Diese Fähigkeit bietet WCAG 2.1-Leitlinien für die Erstellung inklusiver, bildschirmlesegerät-freundlicher, tastaturnavigierbarer Schnittstellen.

Unterstützt: Claude Codex Code(CC)
📊 70 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "web-accessibility". Erstelle ein barrierefreies Modal in React

Erwartetes Ergebnis:

  • Gibt eine Modal-Komponente mit role='dialog', aria-modal='true', aria-labelledby, Fokus-Falle, ESC-Handler und Klicken-außerhalb-zum-Schließen zurück
  • Inkludiert Barrierefreiheits-Checkliste: semantisches HTML, Tastaturnavigation, Bildschirmlesegerät-Ankündigungen

Verwendung von "web-accessibility". Erstelle barrierefreies Login-Formular

Erwartetes Ergebnis:

  • Formular mit <label htmlFor>-Zuordnungen, aria-required, aria-invalid, aria-describedby für Fehlermeldungen
  • Inkludiert role='alert' für Fehlerankündigungen und korrektes Fokus-Management bei Validierungsfehlern

Sicherheitsaudit

Sicher
v1 • 3/9/2026

All 113 static findings are FALSE POSITIVES. The skill is documentation about web accessibility (WCAG 2.1). The scanner detected backticks in markdown, legitimate reference URLs to accessibility resources, relative paths in docs, and false positives for 'key' (keyboard) and 'cryptographic' (MDN). No executable code, no shell commands, no malicious patterns exist.

2
Gescannte Dateien
655
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
26
Community
100
Sicherheit
87
Spezifikationskonformität

Was du bauen kannst

Neue barrierefreie Komponenten entwickeln

Erstellen Sie React-Modale, Dropdowns oder Formulare mit korrektem Fokus-Management, ARIA-Beschriftungen und Tastaturunterstützung von Beginn an.

Bestehende Barrierefreiheitsprobleme beheben

Identifizieren und beheben Sie Barrierefreiheitsprobleme in Legacy-Code durch Einhaltung von WCAG-Checklisten und Implementierung korrekten semantischen HTMLs.

Barrierefreiheitstests implementieren

Richten Sie automatisierte Barrierefreiheitstests mit axe-core in Jest ein, um Regressionen vor dem Deployment zu erkennen.

Probiere diese Prompts

Barrierefreies Modal erstellen 
Erstellen Sie eine barrierefreie Modal-Komponente mit diesen Anforderungen:
- Framework: [React/Vue/Vanilla JS]
- WCAG-Level: AA
- Features: Fokus-Falle, ESC zum Schließen, Klicken außerhalb zum Schließen
- Inklusive korrekter ARIA-Attribute und Bildschirmlesegerät-Ankündigungen
Barrierefreies Formular erstellen 
Erstellen Sie ein barrierefreies Formular mit:
- Pflichtfeld-Validierung
- Klaren Fehlermeldungen mit aria-describedby
- Korrekten Label-Zuordnungen
- Erfolg/Fehler-Zustandsankündigungen
- Fokus-Management bei Validierungsfehlern
Tastaturnavigation hinzufügen 
Fügen Sie vollständige Tastaturnavigationsunterstützung für [Dropdown/Tabs/Menü] hinzu, einschließlich:
- Pfeiltasten-Navigation
- Home/End-Tasten-Unterstützung
- Enter/Space-Aktivierung
- Escape zum Schließen
- Sichtbare Fokus-Indikatoren
Barrierefreiheits-Code-Review 
Überprüfen Sie diesen Komponenten-Code auf Barrierefreiheitsprobleme:
[CODE EINFÜGEN]
Prüfen auf: semantisches HTML, ARIA-Nutzung, Tastaturbarrierefreiheit, Farbkontrast, Formular-Beschriftungen, Fokus-Management

Bewährte Verfahren

  • Verwenden Sie zuerst semantische HTML-Elemente, bevor Sie ARIA-Attribute hinzufügen - native HTML-Elemente haben eingebaute Barrierefreiheit
  • Behalten Sie immer sichtbare Fokus-Indikatoren bei - verwenden Sie niemals outline: none ohne eine Alternative bereitzustellen
  • Testen Sie während der Entwicklung mit tatsächlicher Tastaturnavigation und Bildschirmlesegeräten, nicht nur mit automatisierten Tools

Vermeiden

  • Verwendung von div mit role='button' statt nativem <button>-Element
  • Verwendung von placeholder als einzige Beschriftung für Formulareingaben
  • Entfernen von outline:focus-Styles ohne Bereitstellung sichtbarer Fokus-Indikatoren

Häufig gestellte Fragen

Was ist WCAG?
Web Content Accessibility Guidelines (WCAG) ist eine Sammlung von Empfehlungen zur Barrierefreiheit von Webinhalten für Menschen mit Behinderungen. Es definiert drei Level: A, AA und AAA.
Was ist ARIA?
Accessible Rich Internet Applications (ARIA) ist eine Reihe von Attributen, die definieren, wie Webinhalte barrierefreier gestaltet werden können. Es ergänzt die native HTML-Semantik.
Was ist ein Bildschirmlesegerät?
Bildschirmlesegeräte sind Softwareanwendungen, die visuelle Inhalte in Sprache oder Braille für blinde oder sehbehinderte Benutzer umwandeln. Gängige sind NVDA, JAWS und VoiceOver.
Was ist Tastaturbarrierefreiheit?
Tastaturbarrierefreiheit bedeutet, dass alle Website-Funktionen ausschließlich mit der Tastatur ausgeführt werden können (Tab, Enter, Space, Pfeiltasten, Escape). Dies hilft Benutzern, die keine Maus verwenden können.
Was ist Fokus-Falle?
Fokus-Falle hält den Tastaturfokus innerhalb eines Modals oder Dialogs, bis es geschlossen wird. Dies verhindert, dass Benutzer zu Hintergrundinhalten tabben, während das Modal geöffnet ist.
Wie teste ich Barrierefreiheit?
Verwenden Sie automatisierte Tools wie axe-core oder Lighthouse für grundlegende Prüfungen. Manuelles Testen nur mit Tastatur und Bildschirmlesegeräten ist für eine umfassende Evaluierung unerlässlich.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/web-accessibility/

Ref

main

Dateistruktur

📄 SKILL.md

📄 SKILL.toon