name	accessibility-audit
description	Audit and fix accessibility issues across the portfolio to ensure WCAG 2.1 AA compliance.

Accessibility Audit Skill

Ensures the portfolio meets WCAG 2.1 AA standards. Covers semantic HTML, ARIA, keyboard navigation, color contrast, screen reader compatibility, and focus management.

When to use this skill

Before shipping any UI change
When adding interactive components (modals, dropdowns, tabs, forms)
When adding new images, icons, or media
When fixing a reported accessibility issue
During code review of UI components

Workflow

Scan for semantic issues — Check that interactive elements use correct HTML (<button>, <a>, <input>, <select>, <textarea>). Never use <div> or <span> with click handlers for actions/navigation.
Verify keyboard support — Every interactive element must be reachable and operable via keyboard (Tab, Enter, Space, Escape, Arrow keys per WAI-ARIA APG patterns).
Check focus indicators — All focusable elements must have a visible :focus-visible style. Never use outline: none without providing a visible replacement.
Audit ARIA usage — Icon-only buttons need descriptive aria-label. Decorative icons need aria-hidden="true". Announce async updates with aria-live="polite".
Validate color contrast — Use APCA or WCAG 2.1 AA contrast ratios. Text needs 4.5:1 (normal) / 3:1 (large). Interactive states should increase contrast.
Test screen reader flow — Verify heading hierarchy (<h1>–<h6>), skip-to-content link, form label associations, and image alt text.
Run automated tools — Use browser DevTools Lighthouse audit, axe DevTools, or WAVE.

Common fixes in this codebase

Missing aria-label on icon buttons — Add aria-label="Description" to buttons with only icon children
Missing image alt text — Add alt="Descriptive text" or alt="" for decorative images
Non-semantic click handlers — Replace <div onClick> with <button> or <a>/<Link>
Low contrast text — Adjust text color or background to meet 4.5:1 ratio
Missing form labels — Add <label htmlFor="id"> or aria-label to form controls

Delivery Checks

All interactive elements are keyboard accessible
Focus rings visible on :focus-visible
Color contrast meets WCAG 2.1 AA
Screen reader announces content correctly
Skip-to-content link present and functional
Heading hierarchy is logical (<h1>–<h6>)
No outline: none without replacement

Accessibility Audit Skill

Ensures the portfolio meets WCAG 2.1 AA standards. Covers semantic HTML, ARIA, keyboard navigation, color contrast, screen reader compatibility, and focus management.

When to use this skill

Before shipping any UI change

When adding interactive components (modals, dropdowns, tabs, forms)

When adding new images, icons, or media

When fixing a reported accessibility issue

During code review of UI components

Workflow

Scan for semantic issues — Check that interactive elements use correct HTML (<button>, <a>, <input>, <select>, <textarea>). Never use <div> or <span> with click handlers for actions/navigation.

Verify keyboard support — Every interactive element must be reachable and operable via keyboard (Tab, Enter, Space, Escape, Arrow keys per WAI-ARIA APG patterns).

Check focus indicators — All focusable elements must have a visible :focus-visible style. Never use outline: none without providing a visible replacement.

Audit ARIA usage — Icon-only buttons need descriptive aria-label. Decorative icons need aria-hidden="true". Announce async updates with aria-live="polite".

Validate color contrast — Use APCA or WCAG 2.1 AA contrast ratios. Text needs 4.5:1 (normal) / 3:1 (large). Interactive states should increase contrast.

Test screen reader flow — Verify heading hierarchy (<h1>–<h6>), skip-to-content link, form label associations, and image alt text.

Run automated tools — Use browser DevTools Lighthouse audit, axe DevTools, or WAVE.

Common fixes in this codebase

Missing aria-label on icon buttons — Add aria-label="Description" to buttons with only icon children

Missing image alt text — Add alt="Descriptive text" or alt="" for decorative images

Non-semantic click handlers — Replace <div onClick> with <button> or <a>/<Link>

Low contrast text — Adjust text color or background to meet 4.5:1 ratio

Missing form labels — Add <label htmlFor="id"> or aria-label to form controls

Delivery Checks

All interactive elements are keyboard accessible

Focus rings visible on :focus-visible

Color contrast meets WCAG 2.1 AA

Screen reader announces content correctly

Skip-to-content link present and functional

Heading hierarchy is logical (<h1>–<h6>)

No outline: none without replacement

accessibility-audit