accessibility Errors
20 error patterns
Invalid ARIA Role
ARIA role.*is not valid|aria-role.*invalid
- •Use a valid WAI-ARIA role from the spec
- •Check role is appropriate for the element type
Missing Focus Trap
Focus trap.*not implemented|focus.*escaping modal
- •Implement focus trap in modal/dialog components
- •Use cdkTrapFocus directive for Angular
Insufficient Color Contrast
Color contrast ratio.*insufficient|contrast.*below.*4\.5
- •Increase contrast ratio to at least 4.5:1 for text
- •Use 3:1 minimum for large text (18px+ bold)
Missing Alt Text on Image
img.*missing alt|Image element.*missing alternative text
- •Add descriptive alt attribute to image
- •Use alt='' for decorative images
Keyboard Navigation Broken
not reachable.*keyboard|keyboard.*not accessible
- •Ensure all interactive elements are focusable
- •Add tabindex=0 for custom interactive elements
Screen Reader Not Announcing
aria-live.*not announcing|screen reader.*not reading
- •Use aria-live=polite for dynamic content updates
- •Add role=alert for important notifications
Missing Accessible Name
aria-label.*missing|Accessible name.*not provided
- •Add aria-label to the interactive element
- •Use aria-labelledby to reference visible label
Heading Level Skipped
heading.*skipped level|Heading levels.*not sequential
- •Ensure headings follow sequential order (h1>h2>h3)
- •Don't skip heading levels for styling purposes
ARIA Expanded State Missing
aria-expanded.*not toggled|disclosure.*state not communicated
- •Toggle aria-expanded on the trigger button
- •Set aria-controls to point to expandable region
Positive Tabindex Used
tabindex.*positive value|tabindex.*greater than 0
- •Remove positive tabindex values
- •Use tabindex=0 for natural tab order
Form Input Missing Label
form.*label.*not associated|input.*missing label
- •Add label element with matching for attribute
- •Use aria-label for visually hidden labels
Ambiguous Link Text
link.*purpose.*not clear|ambiguous link text
- •Use descriptive link text (not 'click here')
- •Add aria-label for context when text is generic
Reduced Motion Not Respected
motion.*reduced.*not respected|prefers-reduced-motion
- •Add @media (prefers-reduced-motion: reduce) query
- •Disable animations when preference is set
Missing Autocomplete Attribute
autocomplete.*missing|input.*autocomplete attribute
- •Add appropriate autocomplete value to form inputs
- •Use autocomplete=off only when truly necessary
Missing ARIA Landmark
landmark.*missing|page.*no main landmark
- •Wrap main content in <main> element
- •Add <nav> for navigation regions
Focus Indicator Not Visible
focus.*not visible|focus indicator.*missing
- •Never use outline: none without alternative
- •Add visible focus styles with :focus-visible
Focusable Element Inside aria-hidden
aria-hidden.*on focusable|focusable.*inside aria-hidden
- •Remove tabindex from elements inside aria-hidden
- •Add inert attribute instead of aria-hidden
Table Missing Headers
table.*missing headers|data table.*no th elements
- •Add th elements for column/row headers
- •Use scope attribute on th elements
Error Message Not Linked to Input
error.*not associated.*input|validation message.*not linked
- •Use aria-describedby to link error to input
- •Add aria-invalid=true when field has error
Touch Target Too Small
touch target.*too small|click target.*below 44px
- •Ensure minimum 44x44px touch target size
- •Add padding to increase hit area without visual change