How to Test Your Website for Accessibility (2026 Guide)

PPerceivable

• 1.1.1 Alt text — Every meaningful image has descriptive alt text
• 1.4.3 Contrast — Text has 4.5:1 contrast ratio (3:1 for large text)
• 1.4.4 Resize text — Content is usable when zoomed to 200%
• 1.4.11 Non-text contrast — UI components and graphics have 3:1 contrast

OOperable

• 2.1.1 Keyboard — All functionality works with keyboard alone
• 2.1.2 No keyboard trap — Users can escape any component
• 2.4.7 Focus visible — Keyboard focus indicator is always visible
• 2.4.11 Focus not obscured — Focused elements aren't hidden by sticky headers (WCAG 2.2)
• 2.5.8 Target size — Touch targets are at least 24×24px (WCAG 2.2)

UUnderstandable

• 3.1.1 Language — Page has lang attribute on HTML element
• 3.2.6 Consistent help — Help mechanisms appear in same location (WCAG 2.2)
• 3.3.2 Labels — Form inputs have visible, associated labels
• 3.3.7 Redundant entry — Don't ask users to re-enter information (WCAG 2.2)
• 3.3.8 Accessible auth — Login doesn't require cognitive tests (WCAG 2.2)

RRobust

• 4.1.2 Name, Role, Value — Custom components have proper ARIA roles and states
• 4.1.3 Status messages — Dynamic content changes are announced to screen readers

For decorative images, use alt="" to skip them in screen readers.

Light gray text on white backgrounds is the most common offender. Use a contrast checker to verify your colors meet the 4.5:1 ratio for normal text.

Removing the default focus outline without a replacement makes keyboard navigation impossible.

/* Don't do this */
*:focus { outline: none; }

/* Do this instead */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Social media icons, hamburger menus, and close buttons often have no accessible name.