A11y Debugging
Skill AktivNutzt Chrome DevTools MCP für Barrierefreiheits- (a11y) Debugging und Auditing basierend auf web.dev-Richtlinien. Verwenden Sie dies beim Testen von semantischem HTML, ARIA-Labels, Fokusstatus, Tastaturnavigation, Tap-Targets und Farbkontrast.
Um Entwicklern und Testern zu ermöglichen, die Barrierefreiheit von Webseiten mithilfe automatisierter Prüfungen und manueller Inspektionsmethoden gründlich zu überprüfen und zu debuggen.
Funktionen
- Automatisierte Barrierefreiheitsprüfungen (Lighthouse)
- Inspektion des Barrierefreiheitsbaums für semantische Struktur
- Überprüfung von Formularlabels und Bild-Alt-Texten
- Testen von Tastaturnavigation und Fokusverwaltung
- Messung von Tap-Target-Größen
- Prüfung von Farbkontrastverhältnissen
- Analyse von Konsolennachrichten auf Barrierefreiheitsprobleme
Anwendungsfälle
- Beim Sicherstellen, dass die semantische HTML-Struktur und die Überschriftenhierarchie korrekt sind.
- Bei der Überprüfung, ob interaktive Elemente zugängliche Namen und Formularelemente zugeordnete Labels haben.
- Beim Testen der Tastatur-Only-Navigation und Fokusverwaltung für Benutzer mit motorischen Beeinträchtigungen.
- Bei der Prüfung von Tap-Target-Größen und Farbkontrastverhältnissen gemäß den WCAG-Richtlinien.
Nicht-Ziele
- Durchführung allgemeiner Web-Scraping- oder Datenextraktionsaufgaben.
- Testen auf Leistungsengpässe, die nicht mit der Barrierefreiheit zusammenhängen.
- Automatisierung komplexer Benutzerinteraktionsflüsse über Barrierefreiheitsprüfungen hinaus.
Compliance
- warning:Telemetry-Opt-inDie Erfassung von Nutzungsstatistiken ist standardmäßig aktiviert, obwohl sie dokumentiert ist und über ein Flag oder eine Umgebungsvariable abgewählt werden kann. Das Schema der gesammelten Felder ist nicht explizit veröffentlicht.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp/plugin install chrome-devtools-mcp@chrome-devtools-pluginsQualitätspunktzahl
Vertrauenssignale
Ähnliche Erweiterungen
Use My Browser
100Verwenden Sie dies, wenn die Arbeit von den Live-Browsersitzungs- oder gerenderten Zustand des Benutzers abhängt und nicht von statischen Abrufen, insbesondere für Browser-Debugging-Kontexte oder von DevTools ausgewählte Elemente oder Anfragen, angemeldeten Dashboards oder CMS-Flows, localhost-Apps, Formularen, Uploads, Downloads, Medieninspektion, DOM- oder iframe-Inspektion, Shadow DOM oder Browserfehlern, die wie Soft-404s, Authentifizierungswände, Anti-Bot-Prüfungen oder Ratenbegrenzungen aussehen.
Fixing Accessibility
100Prüft und behebt HTML-Barrierefreiheitsprobleme, einschließlich ARIA-Labels, Tastaturnavigation, Fokusverwaltung, Farbkontrast und Formularfehlern. Verwenden Sie dies beim Hinzufügen interaktiver Steuerelemente, Formulare, Dialogfelder oder bei der Überprüfung der WCAG-Konformität.
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Noob Mode
100Plain-English translation layer for non-technical Copilot CLI users. Translates every approval prompt, error message, and technical output into clear, jargon-free English with color-coded risk indicators.
Android Design Guidelines
100Material Design 3- und Android-Plattformrichtlinien. Verwenden Sie dies beim Erstellen von Android-Apps mit Jetpack Compose oder XML-Layouts, bei der Implementierung von Material You, Navigation oder Barrierefreiheit. Löst bei Aufgaben aus, die sich auf Android UI, Compose-Komponenten, dynamische Farben oder die Einhaltung von Material Design beziehen.
Design Audit
100Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan