skills.rest
Protagonistss
ProtagonistssCOMMUNITY
Explore all skills by this author →
Website𝕏@protagonisthssGitHub

ui-design-a11y

Audit and fix web accessibility to meet WCAD standards across interfaces.

Updated Nov 25, 2025
Search Tags:#accessibility#a11y#audit#wcag#contrast#keyboard#aria
One-click install
npx skills add https://github.com/Protagonistss/ithinku-plugins --skill ui-design-a11y
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-a11y
Source: https://github.com/Protagonistss/ithinku-plugins/tree/main/plugins/ui-design/skills/ui-design-a11y
Command: npx skills add https://github.com/Protagonistss/ithinku-plugins --skill ui-design-a11y

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

本技能帮助开发者发现并修复网页无障碍问题，使产品符合 WCAG 标准。

Core Features & Use Cases

  • 无障碍审计与合规性检查，覆盖语义化标签、ARIA 属性、键盘导航与图片替代文本。
  • 提供可直接应用于代码的修复建议和示例，帮助提升对比度、焦点管理和表单标签关联等。
  • Use Case: 针对 Web 应用中的登录、表单、模态对话框等组件执行无障碍改进，提升可访问性评分和用户体验。

Quick Start

对给定的网页组件进行无障碍快速审查并给出修复建议。

Frequently Asked Questions about ui-design-a11y

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit web accessibility to meet WCAG standards?▼

To audit web accessibility for WCAG compliance, check semantic HTML structure, validate ARIA attributes, verify keyboard navigation, and measure color contrast ratios across all interface components.

How do I fix keyboard navigation and focus management in a modal dialog?▼

Fix keyboard navigation in modal dialogs by enforcing proper focus trapping, restoring focus upon closure, and ensuring all interactive elements are reachable via logical tab order using semantic HTML.

What is the best way to check color contrast for web accessibility?▼

Checking color contrast for web accessibility involves calculating the luminance ratio between foreground and background elements to ensure they meet WCAG thresholds, providing actionable code adjustments if ratios fail.

How do I correctly associate form labels using ARIA and semantic HTML?▼

Correctly associate form labels by wrapping inputs in label elements or using ARIA attributes like aria-labelledby, ensuring screen readers accurately announce form fields and their purposes for WCAG compliance.

Can I use this accessibility audit on dynamic web components and forms?▼

Yes, you can perform accessibility audits on dynamic web components and forms, applying standards-compliant code changes to manage focus, validate ARIA usage, and ensure semantic structure across interactive interfaces.

Related Skills

Explore More Design & Creative Skills→
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced