AliNQualityAliNQuality

WCAG 2.1 AA Showcase

Accessibility isn't a checklist. It's how we build.

Every feature on this page is a live demonstration of WCAG 2.1 AA compliance. Inspect it, test it, break it.

Keyboard navigation

Keyboard users navigate without a mouse. Every interactive element on this site is reachable and operable via keyboard alone, and every focus state is visible.

Use Tab to enter the grid, then ← → ↑ ↓ to move between cards. Enter or Space to expand.

Currently focused: Alpha. Focus is moved here.

Semantic structure

Screen readers navigate by landmarks and headings. Semantic HTML gives structure that visual design alone cannot, and this page uses the same shape you'd expect.

Landmarks

  • <body>
    • <header>role=banner(Navbar)
      • <nav>role=navigation(Primary nav)
    • <main>role=main
      • <section>(Hero (H1))
      • <section>(Keyboard nav (H2))
      • <section>(Semantic map (H2))
      • <section>(Contrast (H2))
      • <section>(Motion (H2))
      • <section>(Font scaling (H2))
      • <section>(Forms (H2))
      • <section>(Closing CTA (H2))
    • <footer>role=contentinfo(Site footer)

Heading hierarchy

  • H1Accessibility isn’t a checklist. It’s how we build.
  • H2Keyboard navigation
  • H2Semantic structure
  • H2Color contrast
  • H2Motion control
  • H2Font scaling
  • H2Form accessibility
  • H2We build every project to this standard.

Color contrast

Every text token on the site has been measured against WCAG's 4.5:1 minimum for normal text and 3:1 for large text. These are the actual pairs you'll find in the live design.

  • Aa: primary text
    19.05:1AAA

    Body text on white

    #0F0F0F on #FFFFFF

  • Aa: muted detail
    4.54:1AA

    Muted text on white

    #767676 on #FFFFFF

  • Aa: link / accent
    4.50:1AA

    Accent (hover) on white

    #A8832E on #FFFFFF

  • Aa: accent on dark
    7.42:1AAA

    Decorative gold on dark

    #C49A3C on #0F0F0F

  • Aa: text on dark
    19.05:1AAA

    Inverse text on dark

    #FFFFFF on #0F0F0F

Decorative gold (#C49A3C) is reserved for large-display use and accents on dark backgrounds. Readable accent text uses the darker variant (#A8832E).

Motion control

This site respects your system's prefers-reduced-motion setting automatically. The toggle in our accessibility panel adds manual control on top, and the toggle below shows it in action.

Standard

Gentle entrance

A 600 ms fade-up applied once on mount, never repeating, never looping.

Reduced motion

Static: no entrance

Same content, no movement: what reduced-motion users see across the whole site.

Font scaling

All type on this site uses relative units. When you increase the base font size (via our accessibility panel or your browser settings), every element scales proportionally. Layouts reflow; nothing clips.

The same paragraph at different sizes, written in rem so every element scales with the root font size. Lines reflow, the card grows with the text, and nothing clips or overflows.

Current sample size: 16px (1rem)

Form accessibility

Every form on this site associates labels with inputs, announces errors to screen readers, and moves focus to the first problem on submission. Try the demo: submit empty, then with an invalid email.

Try submitting empty fields to see focus management and error announcements.

Where this fits

Where this earns its keep

The same demo, dropped into real businesses. Find yours.

  • Government

    A resident using a keyboard or a screen reader reaches a form they cannot complete, and the only way left is to call the office.

    In the demo: Test the baseline yourself: keyboard only, AA contrast, motion off.

    Everything we build for Government →

  • Healthcare

    Patients booking with a screen reader or navigating one-handed do not report a broken form. They quietly become another practice's patients.

    In the demo: Try the keyboard, contrast, motion, and form checks on a patient-facing interface.

    Everything we build for Healthcare →

  • A client with low vision or a keyboard-only setup reaches an intake form they cannot complete.

    In the demo: See the accessibility baseline on stage: the same one every demo on this page runs on.

    Everything we build for Legal →

We build every project to this standard.

Accessibility is built in at the component level, not bolted on before launch. If you'd like the same standard for your project, let's talk.

Request a Free Workflow Audit

Already know what you need? Tell us what you're trying to build or fix. Talk Through Your Project

View our accessibility statement