Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing W
复制下面这句话，粘贴给 Claude Code、Codex、Cursor 等 AI 编程工具，它会读取安装说明并在你确认后完成安装。
请阅读 https://ai.atlankj.com/install/asset/gh-accessibility-auditor-806a612fab13 ，按照其中的说明把「Accessibility Auditor」安装到你（当前 AI 工具）中。执行前先告诉我将运行的命令和写入的位置，等我确认。
查看 AI 将读取的安装说明正在读取 GitHub 原文…
内容来自 GitHub 原始文件，由原作者维护。在 GitHub 查看
Comprehensive guidance for creating accessible web experiences that comply with WCAG standards and serve users of all abilities effectively.
Use this skill when:
Users must be able to perceive the information being presented.
Users must be able to operate the interface.
Users must be able to understand the information and interface.
Content must be robust enough to work with current and future technologies.
❌ Problem:
<img src="/products/shoes.jpg">
✅ Solution:
<!-- Informative image -->
<img src="/products/shoes.jpg" alt="Red Nike Air Max running shoes with white swoosh">
<!-- Decorative image -->
<img src="/decorative-pattern.svg" alt="" role="presentation">
<!-- Logo that links -->
<a href="/">
<img src="/logo.png" alt="Company Name - Home">
</a>
Rules:
❌ Problem:
/* Contrast ratio 2.5:1 - Fails WCAG */
.text {
color: #767676;
background: #ffffff;
}
✅ Solution:
/* Contrast ratio 4.5:1+ - Passes AA */
.text {
color: #595959;
background: #ffffff;
}
/* Contrast ratio 7:1+ - Passes AAA */
.text-high-contrast {
color: #333333;
background: #ffffff;
}
Requirements:
❌ Problem:
<div class="button" onclick="submitForm()">Submit</div>
<div class="heading">Page Title</div>
<div class="nav-menu">...</div>
✅ Solution:
<button type="submit" onclick="submitForm()">Submit</button>
<h1>Page Title</h1>
<nav aria-label="Main navigation">...</nav>
Semantic Elements:
<button> for buttons<a> for links<h1> - <h6> for headings (hierarchical)<nav>, <main>, <aside>, <article>, <section> for landmarks<ul>, <ol>, <li> for lists<table>, <th>, <td> for tabular data❌ Problem:
<input type="email" placeholder="Enter your email">
✅ Solution:
<!-- Explicit label -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<!-- Implicit label -->
<label>
Email Address
<input type="email" name="email">
</label>
<!-- Hidden label (for tight layouts) -->
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" placeholder="Search...">
Best Practices:
<fieldset> and <legend>❌ Problem:
<div onclick="handleClick()">Click me</div>
<a href="javascript:void(0)" onclick="doSomething()">Action</a>
✅ Solution:
<!-- Use proper button -->
<button onclick="handleClick()">Click me</button>
<!-- If div required, make it accessible -->
<div
role="button"
tabindex="0"
onclick="handleClick()"
onkeydown="handleKeyPress(event)"
>
Click me
</div>
<script>
function handleKeyPress(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
handleClick();
}
}
</script>
Keyboard Requirements:
❌ Problem:
<div class="header">...</div>
<div class="main-content">...</div>
<div class="sidebar">...</div>
<div class="footer">...</div>
✅ Solution:
<header role="banner">
<nav aria-label="Main navigation">...</nav>
</header>
<main role="main">
<h1>Page Title</h1>
<article>...</article>
</main>
<aside role="complementary" aria-label="Related articles">
...
</aside>
<footer role="contentinfo">
...
</footer>
Common Landmarks:
banner - Site headernavigation - Navigation menusmain - Primary content (one per page)complementary - Supporting contentcontentinfo - Site footersearch - Search functionalityform - Form regions❌ Problem:
<div class="modal">
<div class="content">
Modal content
<button onclick="closeModal()">Close</button>
</div>
</div>
✅ Solution:
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
aria-describedby="modal-desc"
>
<h2 id="modal-title">Confirm Action</h2>
<p id="modal-desc">Are you sure you want to delete this item?</p>
<button onclick="confirmAction()">Confirm</button>
<button onclick="closeModal()">Cancel</button>
</div>
<script>
// Focus management
function openModal() {
const modal = document.querySelector('[role="dialog"]');
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
// Store previous focus
previousFocus = document.activeElement;
// Focus first element
focusableElements[0].focus();
// Trap focus
modal.addEventListener('keydown', trapFocus);
}
function closeModal() {
// Return focus
if (previousFocus) previousFocus.focus();
}
function trapFocus(event) {
if (event.key !== 'Tab') return;
const focusableElements = Array.from(
modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
if (event.shiftKey && document.activeElement === firstElement) {
lastElement.focus();
event.preventDefault();
} else if (!event.shiftKey && document.activeElement === lastElement) {
firstElement.focus();
event.preventDefault();
}
}
</script>
Modal Requirements:
role="dialog" or role="alertdialog"aria-modal="true" to indicate modal behavioraria-labelledby pointing to titlearia-describedby for description (optional)✅ Solution:
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>
<nav>...</nav>
</header>
<main id="main-content" tabindex="-1">
<!-- Page content -->
</main>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
States:
aria-checked - Checkbox/radio statearia-disabled - Disabled statearia-expanded - Expanded/collapsed statearia-hidden - Hidden from assistive technologyaria-pressed - Toggle button statearia-selected - Selected stateProperties:
aria-label - Accessible namearia-labelledby - ID reference for labelaria-describedby - ID reference for descriptionaria-live - Live region updatesaria-required - Required fieldaria-invalid - Validation state<!-- Polite: Wait for pause in speech -->
<div aria-live="polite" aria-atomic="true">
Item added to cart
</div>
<!-- Assertive: Interrupt immediately -->
<div aria-live="assertive" role="alert">
Error: Payment failed
</div>
<!-- Status message -->
<div role="status" aria-live="polite">
Saving changes...
</div>
Accordion:
<div class="accordion">
<button
aria-expanded="false"
aria-controls="panel-1"
id="accordion-1"
>
Section 1
</button>
<div id="panel-1" role="region" aria-labelledby="accordion-1" hidden>
Panel content
</div>
</div>
Tabs:
<div role="tablist" aria-label="Content sections">
<button
role="tab"
aria-selected="true"
aria-controls="panel-1"
id="tab-1"
>
Tab 1
</button>
<button
role="tab"
aria-selected="false"
aria-controls="panel-2"
id="tab-2"
tabindex="-1"
>
Tab 2
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
Panel 1 content
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
Panel 2 content
</div>
VoiceOver (Mac):
NVDA (Windows):
Test Scenarios:
Include on website:
# Accessibility Statement
We are committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone and apply relevant accessibility standards.
## Conformance Status
This website is partially conformant with WCAG 2.1 Level AA. "Partially conformant" means that some parts of the content do not fully conform to the accessibility standard.
## Feedback
We welcome your feedback on the accessibility of this site. Please contact us:
- Email: accessibility@example.com
- Phone: +1-555-0123
## Known Issues
- [List any known accessibility issues and planned fixes]
Last updated: [Date]
Tools:
Guidelines:
Accessibility is not optional—it's a fundamental requirement for creating inclusive web experiences. Prioritize it from the start of every project, not as an afterthought.