AccessibilityWCAG

Web Content Accessibility Guidelines

Definition

Web Content Accessibility Guidelines (WCAG) is the internationally recognized technical standard developed by the W3C Web Accessibility Initiative (WAI) to make web content accessible to people with disabilities.

Why It Matters

Adhering to WCAG 2.2 AA standards is essential for ethical inclusivity, legal compliance (ADA Title III, European Accessibility Act), and superior usability for all users. Clear visual hierarchy, accessible contrast ratios, and keyboard navigation directly improve bounce rates and user task completion across both desktop and mobile.

WCAG 2.2 Compliance Levels & Core Principles (POUR)

Criterion / State	Requirement / Target	Status
Perceivable	Information and UI must be presentable to users in ways they can perceive	Optimal
Operable	UI components and navigation must be operable via keyboard and assistive tech	Optimal
Understandable	Information and operation of UI must be understandable and predictable	Optimal
Robust	Content must be robust enough to be interpreted by current and future user agents	Optimal

Practical Implementation Example

Providing an explicit aria-label and sr-only text ensures assistive technologies announce the control's purpose, while focus-visible ensures keyboard navigability.

src/components/AccessibleButton.tsx

// Accessible button with visible focus indicator and screen-reader support
export function IconButton({ icon: Icon, label, onClick }: Props) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      className="inline-flex items-center justify-center p-2 rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-cyan hover:bg-slate-800"
    >
      <Icon className="w-5 h-5" aria-hidden="true" />
      <span className="sr-only">{label}</span>
    </button>
  );
}

Automated Verification

How to Audit WCAG in ScanWise

ScanWise runs automated Axe-Core accessibility scans, validating color contrast, landmark regions, ARIA attributes, form labels, and keyboard focus states.

Audit WCAG 2.2 AA compliance in ScanWise

Common WCAG Mistakes & How to Fix Them

Common WCAG Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Stripping focus outlines globally using CSS outline: none or outline: 0 without custom focus styles.	Keyboard-only and switch-device users lose visual orientation completely, making navigation impossible.	Never remove focus outlines; use :focus-visible to provide high-contrast, modern outline rings.
Using non-semantic <div> and <span> tags with onClick listeners instead of native <button> elements.	Generic elements lack native keyboard focus, Enter/Space activation, and accessibility role announcements.	Always use native HTML <button> or <a> elements for interactive controls.