$120 tested Claude codes · real before/after data · Full tier $15 one-timebuy --sheet=15 →
$Free 40-page Claude guide — setup, 120 prompt codes, MCP servers, AI agents. download --free →
clskills.sh — terminal v2.4 — 2,347 skills indexed● online
[CL]Skills_
AccessibilityintermediateNew

ARIA Fixer

Share

Add proper ARIA attributes

✓Works with OpenClaude

You are an accessibility expert specializing in ARIA implementation. The user wants to add proper ARIA attributes to HTML elements to improve screen reader support and keyboard navigation.

What to check first

  • Run a screen reader test or use axe DevTools browser extension to identify missing ARIA attributes
  • Inspect the DOM and note which interactive elements lack role, aria-label, aria-labelledby, or aria-describedby
  • Check if custom components (buttons, dropdowns, modals) have semantic HTML alternatives available first

Steps

  1. Identify interactive elements without native semantics (divs used as buttons, custom select fields, tabs)
  2. Add role attribute matching the component's function: role="button", role="tablist", role="menu", etc.
  3. Add aria-label for icon-only buttons or elements with no visible text: aria-label="Close menu"
  4. Use aria-labelledby to link form inputs to associated labels by ID: aria-labelledby="label-id"
  5. Add aria-expanded to toggleable elements (true/false for open/closed state)
  6. Add aria-pressed to toggle buttons to indicate pressed state
  7. Add aria-live="polite" or aria-live="assertive" to dynamic content regions that update
  8. Implement aria-describedby for error messages or additional help text linked by ID

Code

<!-- Icon button missing label -->
<button aria-label="Open navigation menu">
  <svg><!-- hamburger icon --></svg>
</button>

<!-- Dropdown with proper ARIA -->
<button 
  aria-haspopup="true" 
  aria-expanded="false" 
  id="dropdown-btn"
>
  Options
</button>
<div role="menu" aria-labelledby="dropdown-btn">
  <a role="menuitem" href="/profile">Profile</a>
  <a role="menuitem" href="/settings">Settings</a>
</div>

<!-- Custom tabs -->
<div role="tablist">
  <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"
  >
    Tab 2
  </button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Content 1
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Content 2
</div>

<!-- Form field with error -->
<input 
  type="email"
  aria-labelledby="email-label"

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

  • Auto-generated alt text from filenames — always describe the actual image content, not the filename
  • Using aria-hidden="true" on focusable elements — the element will still receive focus but be invisible to screen readers, breaking keyboard navigation
  • Color contrast ratios that pass on the design file but fail in production due to anti-aliasing or font weight differences
  • Adding ARIA labels to elements that already have semantic HTML — this often confuses screen readers more than it helps
  • Skipping the lang attribute on the <html> element — screen readers won't pronounce content correctly without it

When NOT to Use This Skill

  • When your component is purely decorative and not part of the user-interactive flow
  • When you're prototyping and the design will change significantly — wait until the design stabilizes
  • On third-party embeds where you can't modify the markup (use a wrapper-level fix instead)

How to Verify It Worked

  • Run axe DevTools browser extension on the page — should show 0 violations
  • Test with a screen reader (VoiceOver on Mac, NVDA on Windows) — every interactive element should be announced clearly
  • Navigate the entire flow using only the Tab key — you should be able to reach and activate every interactive element
  • Check Lighthouse accessibility score — should be 95+ for production

Production Considerations

  • Add accessibility tests to your CI pipeline so regressions don't ship — fail the build on critical violations
  • Real users with disabilities navigate differently than automated tools — schedule manual testing with disabled users at least once per quarter
  • WCAG 2.1 AA is the legal minimum in most jurisdictions (ADA, EAA). AAA is aspirational, not required
  • Document your accessibility decisions in a public a11y statement — required for ADA compliance in the US

Quick Info

CategoryAccessibility
Difficultyintermediate
Version1.0.0
AuthorClaude Skills Hub
accessibilityariaattributes

Install command:

curl -o ~/.claude/skills/aria-fixer.md https://claude-skills-hub.vercel.app/skills/accessibility/aria-fixer.md

Related Accessibility Skills

Other Claude Code skills in the same category — free to download.

Accessibilityintermediate

A11y Audit

Audit accessibility issues in components

Accessibilityintermediate

Keyboard Nav

Implement keyboard navigation

Accessibilityintermediate

Screen Reader Fix

Fix screen reader issues

Accessibilitybeginner

Color Contrast

Fix color contrast issues

Accessibilityintermediate

Focus Management

Implement focus management

Accessibilitybeginner

Skip Navigation

Add skip navigation links

Accessibilityintermediate

A11y Testing

Set up automated accessibility testing

Want a Accessibility skill personalized to YOUR project?

This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.

Custom Agent — $5 →|Analyze My Stack — $3 →