#601

Globales Ranking · von 601 Skills

accessibility AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill accessibility

43

Installationen

Web Accessibility (WCAG 2.2 AA)

Build for everyone — accessibility is a requirement, not a feature.

Contrast Ratios (WCAG AA)

Element Minimum Ratio
Normal text (< 18pt) 4.5:1
Large text (>= 18pt or 14pt bold) 3:1
UI components and focus indicators 3:1

WCAG 2.2 New AA Criteria

Criterion Requirement
Target Size Minimum (2.5.8) Interactive targets at least 24x24 CSS pixels
Focus Not Obscured Minimum (2.4.11) Focused element at least partially visible, not hidden by sticky headers or overlays
Focus Appearance (2.4.13) Focus indicator has minimum area (2px perimeter) and 3:1 contrast change
Dragging Movements (2.5.7) Provide single-pointer alternative for any drag interaction
Redundant Entry (3.3.7) Do not require re-entering previously provided information
Consistent Help (3.2.6) Help mechanisms (chat, phone, FAQ) appear in same relative order across pages
Accessible Authentication (3.3.8) No cognitive function test for login (allow paste, autofill, or alternatives)

Essential Keyboard Patterns

Key Action
Tab / Shift+Tab Navigate between focusable elements
Enter / Space Activate buttons and links
Arrow keys Navigate within widgets (tabs, menus)
Escape Close dialogs and menus
Home / End Jump to first/last item in widget

Element Selection

Need Element
Navigates to page <a href="...">
Submits form <button type="submit">
Opens dialog <button aria-haspopup="dialog">
Other action <button type="button">
Self-contained article <article>
Navigation links <nav>
Supplementary info <aside>

Common ARIA Attributes

Attribute Purpose
aria-label Name when no visible label exists
aria-labelledby Reference existing text as label
aria-describedby Additional description (hints, errors)
aria-live Announce dynamic updates (polite or assertive)
aria-expanded Collapsible/expandable state
aria-hidden="true" Hide decorative elements from screen readers
aria-invalid Mark form fields with errors
aria-required="true" Mark required fields
aria-busy Indicate loading state

WCAG 2.2 AA Checklist Summary

Principle Key Requirements
Perceivable Alt text on images, contrast >= 4.5:1, color not sole indicator, text resizable to 200%, captions on video, prefers-reduced-motion support
Operable Keyboard accessible, visible focus not obscured, focus appearance meets minimum, targets >= 24px, skip links, dragging alternatives
Understandable <html lang="en">, consistent navigation, consistent help placement, form labels, error identification, no redundant entry, accessible auth
Robust Valid HTML, name/role/value on all UI components, aria-live for status messages (SC 4.1.1 Parsing is obsolete in WCAG 2.2)

Anti-Patterns

Anti-Pattern Fix
<div onClick> instead of <button> Use semantic HTML elements
outline: none without replacement Use :focus-visible with visible outline
Placeholder as label Use <label> element
tabindex > 0 Use DOM order or tabindex="0" / tabindex="-1"
Color-only state indicators Add icon and text label
Skipped heading levels Use sequential h1-h6, style with CSS
role="button" on <button> Remove redundant ARIA
aria-hidden on interactive elements Never hide interactive content
Fixed font sizes (px) Use rem units
No focus trap in modal dialogs Trap focus, close on Escape

Common Mistakes

Mistake Correct Pattern
Adding aria-label to elements that already have visible text Use aria-labelledby to reference existing visible text instead
Using aria-live="assertive" for non-urgent updates Use aria-live="polite" for most dynamic content; reserve assertive for errors and alerts
Setting alt="" on informative images Provide descriptive alt text; only use empty alt on purely decorative images
Adding keyboard handlers to non-focusable elements Use native interactive elements or add tabindex="0" plus role and key handlers
Testing only with automated tools like axe Automated scans catch ~30% of issues; always supplement with keyboard-only and screen reader testing

Screen Reader and Browser Pairings

Screen Reader Browser Platform
JAWS Chrome Windows
NVDA Chrome Windows (free)
NVDA Firefox Windows (free)
VoiceOver Safari macOS / iOS
TalkBack Chrome Android
Narrator Edge Windows (built-in)

Testing Quick Guide

Method Tool Effort
Keyboard-only Hide mouse, Tab through page 5 min
Screen reader JAWS + Chrome or NVDA + Chrome/Firefox 10 min
Screen reader VoiceOver + Safari (macOS) 10 min
Automated scan axe DevTools browser extension 2 min
Lighthouse Chrome F12 > Lighthouse > Accessibility 2 min
Unit tests jest-axe (Jest) or vitest-axe (Vitest) Ongoing

Delegation

When working on accessibility, delegate to:

  • design-system — Color tokens and contrast verification
  • react-patterns — Component patterns and hooks
  • testing — jest-axe integration and test patterns

Resources

References

  • Semantic HTML and Structure — Document landmarks, heading hierarchy, element selection, skip links
  • Focus Management — Focus indicators, focus not obscured, dialog focus traps, SPA route focus, focus-visible patterns
  • ARIA Patterns — Accessible tabs, live regions, data tables with ARIA attributes
  • Forms and Validation — Label association, error announcement, redundant entry, accessible authentication
  • Color and Media — Contrast requirements, reduced motion, dragging alternatives, video captions, alt text
  • Testing — Keyboard testing, screen reader pairings, axe DevTools, jest-axe and vitest-axe unit tests

Installationen

Installationen 43
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install accessibility by running npx skills add oakoss/agent-skills --skill accessibility in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für accessibility, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport