Real-time accessibility guidance during coding. Provides inline a11y best practices, ARIA patterns, and fix suggestions as you write UI code. Scope: proactive a11y guidance while coding ONLY. For full WCAG compliance auditing with axe-core scans, use the accessibility-auditor agent instead.
From atum-systemnpx claudepluginhub arnwaldn/atum-system --plugin atum-systemThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Integrates PayPal payments with express checkout, subscriptions, refunds, and IPN. Includes JS SDK for frontend buttons and Python REST API for backend capture.
Real-time accessibility guidance during UI development. Provides inline best practices, ARIA patterns, and fix suggestions as you write code.
IN SCOPE: Proactive accessibility guidance while writing UI code. Inline suggestions for ARIA attributes, keyboard navigation, focus management, semantic HTML, color contrast awareness, and accessible component patterns.
OUT OF SCOPE: Full WCAG compliance auditing with axe-core runtime scans, eslint-plugin-jsx-a11y static analysis, or multi-page audit reports. For those, use the accessibility-auditor agent instead.
Always prefer native HTML elements over ARIA:
<button> over <div role="button"><nav> over <div role="navigation"><input type="checkbox"> over custom checkbox with ARIAEvery interactive element must be:
tabindex="0")outline: none without replacement)role="presentation" or aria-hidden="true" on focusable elements<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Dialog Title</h2>
<!-- Focus trap: Tab cycles within dialog -->
<!-- Escape key closes dialog -->
<!-- Return focus to trigger element on close -->
</div>
<button aria-haspopup="true" aria-expanded="false" aria-controls="menu-id">
Menu
</button>
<ul id="menu-id" role="menu">
<li role="menuitem" tabindex="-1">Option 1</li>
<!-- Arrow keys navigate, Enter selects, Escape closes -->
</ul>
<!-- Always associate labels -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-help" required>
<span id="email-help">We will never share your email</span>
<!-- Error states -->
<input aria-invalid="true" aria-errormessage="email-error">
<span id="email-error" role="alert">Please enter a valid email</span>
<!-- For dynamic content updates -->
<div aria-live="polite" aria-atomic="true">
<!-- Content changes announced to screen readers -->
</div>
<!-- For urgent alerts -->
<div role="alert">Error: Something went wrong</div>
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">General</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Advanced</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>
| Issue | Fix |
|---|---|
| Image without alt | Add alt="description" or alt="" for decorative |
| Button without text | Add text content, aria-label, or aria-labelledby |
| Link without text | Add text content or aria-label |
| Form input without label | Add <label> with for attribute or aria-label |
| Color-only information | Add text/icon alongside color indicator |
| Auto-playing media | Add pause/stop controls |
| Missing skip link | Add "Skip to main content" link before navigation |
| Missing page language | Add lang attribute to <html> |
| Missing heading structure | Use h1-h6 in logical order, one h1 per page |
| Custom widget no keyboard | Add tabindex, onKeyDown handlers |
| Element | Ratio | WCAG Level |
|---|---|---|
| Normal text | 4.5:1 | AA |
| Large text (18px+ or 14px+ bold) | 3:1 | AA |
| UI components and graphics | 3:1 | AA |
| Normal text | 7:1 | AAA |
| Large text | 4.5:1 | AAA |
aria-live, don't move focustabindex values > 0 (disrupts natural tab order)aria-hidden="true" on focusable elements