WCAG Skill Demos

Interactive, local-first examples

See accessibility fixes in action

Compare intentionally flawed examples with improved implementations. Each example explains the user impact and lets you try the change with a pointer or keyboard.

These examples are demonstrations, not a conformance claim. WCAG 2.2 AAA includes every applicable Level A and AA criterion as well as AAA. A real audit must cover the complete site, all relevant states, and assistive technology. WCAG 4.1.2 is Level A and is shown because it is inherited by an AAA target.

How the WCAG skill approaches a fix

  1. 1. InventoryIdentify routes, controls, states, and applicable criteria.
  2. 2. ImprovePrefer native HTML and repair names, roles, values, and interaction.
  3. 3. VerifyRun automated checks plus focused keyboard and state tests.
  4. 4. RecordKeep evidence and human-review items; do not overclaim.

See the skill workflow, AAA evidence matrix, and manual test protocol.

Before and after examples

AI-generated page · Side-by-side comparison

Compare the same prompt with and without the WCAG skill

Generate a simple webpage with the same model and prompt, then compare both previews and run axe-core checks on each result.

Open the AI comparison demo

4.1.2 · Name, Role, Value · Level A (inherited)

A toggle must expose its state

Click each “Dark theme” button. Both change the appearance, but only the improved button exposes and updates its pressed state.

Before · state missing

Not programmatically exposed

ARIA state: missing · Appearance: light

After · state synchronized

Pressed state exposed

Button state: aria-pressed=false · Appearance: light

1.4.6 · Contrast (Enhanced) · Level AAA

Normal text needs at least 7:1 contrast

The before sample is approximately 4.54:1: enough for AA normal text, but below this AAA criterion. The improved sample exceeds 7:1.

Before · AA-level contrast

Account settings

Update your contact preferences and notification details.

Contrast ratio: approximately 4.54:1

After · AAA contrast

Account settings

Update your contact preferences and notification details.

Contrast ratio: approximately 17.2:1
2.4.13 · Focus Appearance · Level AAA

A visible focus indicator needs enough area and contrast

Use Tab to focus both buttons. The before indicator is a thin, low-contrast dotted line. The improved indicator is 3 CSS pixels thick with strong contrast against the page.

Before · insufficient indicator

Focus is easy to miss

After · enhanced indicator

Focus is clearly visible

2.5.5 · Target Size (Enhanced) · Level AAA

Pointer targets should be at least 44 × 44 CSS pixels

The small target is 24 × 24 pixels; the improved target is 48 × 48. Activate either one to see that its hit area works.

Before · 24 × 24

Small hit area

Not activated

After · 48 × 48

Larger hit area

Not activated
2.1.3 · Keyboard (No Exception) · Level AAA

Every function must work from the keyboard

Tab to the first example and press Enter or Space: it receives focus but does not activate. The native button works with both keys.

Before · pointer-only handler

Keyboard activation is missing

Activate example

Not activated

After · native button

Mouse and keyboard both work

Not activated

1.4.8 · Visual Presentation · Level AAA

Let readers choose a usable presentation

The improved example provides user-selectable foreground and background colors and keeps the text measure to 80 characters or fewer. This illustrates these parts of 1.4.8, not every requirement.

Before · fixed presentation

Colors cannot be changed

Readers have no control over the colors or width of this text.

After · user-selectable presentation

Choose a color presentation

Text and background colors

Readers can choose a foreground and background combination that works for them.

The text stays left aligned and within a readable line length.

2.4.9 · Link Purpose (Link Only) · Level AAA

A link should make sense on its own

Read each link without its surrounding sentence. The improved link identifies its destination directly.

Before · ambiguous link text

For information about refunds, click More.

After · descriptive link text

Read the full refund policy.

Refund policy: This demo policy explains how to request a refund.

3.3.6 · Error Prevention (All) · Level AAA

Give users a chance to review important submissions

For financial, legal, test, or data-changing submissions, users need a way to review, correct, or reverse the action. These controls are simulations and do not submit or charge anything.

Before · immediate action

No review step

Sample total: $49.00 per item

No order submitted.

After · review and confirmation

Review before confirming

Sample total: $49.00

No order submitted.