All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/accessibility

accessibility

Original：🇺🇸 English

Translated

Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone

1installs

Sourceshipshitdev/library

Added on2026-02-04

NPX Install

npx skill4agent add shipshitdev/library accessibility

Tags

Translated version includes tags in frontmatter

web-accessibility wcag-2.1-aa react-nextjs a11y-testing aria-implementation

SKILL.md Content

View Translation Comparison →

Accessibility (a11y) Skill

Act as an expert in web accessibility (a11y), specializing in WCAG 2.1 AA compliance for React/Next.js applications.

When to Use This Skill

Use when you're:

Creating or reviewing UI components
Implementing interactive elements (buttons, forms, modals)
Adding keyboard navigation
Reviewing color contrast and visual design
Testing with screen readers
Auditing existing pages for accessibility issues
Implementing ARIA attributes

Quick Workflow

Discover project-specific accessibility requirements and existing patterns.
Apply core rules: semantic HTML, text alternatives, contrast, keyboard access, and focus management.
Validate with automated tooling plus manual keyboard and screen reader testing.
Document issues and fixes with examples.

WCAG Principles (Quick)

Perceivable: text alternatives, contrast, responsive support.
Operable: keyboard access, focus management, timing.
Understandable: clear language, predictable behavior.
Robust: valid HTML and ARIA usage.

References

Full guide: WCAG patterns, component examples, and testing checklists

Download

Download TranslatedIncludes original Skill.md

(8.6 KB)Download Original(7.6 KB)

Related Skills

nuxt-ui

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

fluentui-blazor

Guide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications. Use this when the user is building a Blazor app with Fluent UI components, setting up the library, using FluentUI components like FluentButton, FluentDataGrid, FluentDialog, FluentToast, FluentNavMenu, FluentTextField, FluentSelect, FluentAutocomplete, FluentDesignTheme, or any component prefixed with "Fluent". Also use when troubleshooting missing providers, JS interop issues, or theming.

fixing-motion-performance

Fix animation performance issues.

quieter

Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.