Skip to content
Airframe

Accessibility

WCAG 2.2 A/AA Compliance Promise

Section titled “WCAG 2.2 A/AA Compliance Promise”

Airframe is built to meet WCAG 2.2 Level A & AA for default styles and Airframe patterns when used as documented.

Final compliance depends on product content and implementation choices (copy, structure, alt text, validation messaging, etc.).

Built-In Accessibility

Section titled “Built-In Accessibility”

Airframe follows a semantic-first, CSS-only where possible approach that prevents common accessibility failures.

Semantic-First Defaults

Section titled “Semantic-First Defaults”

Airframe ships base styles that assume semantic HTML:

  • Headings are headings (h1-h6)
  • Buttons are <button>, links are <a>
  • Form fields use <label> + native controls
  • Lists are <ul>/<ol>, tables are <table>

This prevents the most common AA failures caused by “div soup” patterns.

<!-- Good -->
<button class="af-btn">
  Click me
</button>
<!-- Bad - don't do this -->
<div role="button" class="af-btn">
  Click me
</div>

Focus Indicators

Section titled “Focus Indicators”

All interactive elements have visible focus indicators. This is non-negotiable.

  • :focus-visible ring for all interactive elements
  • Thickness and offset controlled by tokens
  • Visible on all backgrounds
  • Never removed in base styles
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--af-focus-ring-width) solid var(--af-focus-ring-color);
  outline-offset: var(--af-focus-ring-offset);
}

Color Contrast

Section titled “Color Contrast”
  • Default palette meets AA contrast ratios (4.5:1 normal, 3:1 large)
  • Semantic tokens prevent accidental contrast failures
  • Hover states don’t reduce contrast below requirements

See Color & Contrast Guidance for details.

Motion

Section titled “Motion”
  • prefers-reduced-motion disables non-essential transitions
  • Default motion is subtle and tokenised
  • Critical animations (focus indicators) remain functional

Direction & Logical Properties

Section titled “Direction & Logical Properties”
  • Alignment utilities use start/end (RTL-safe)
  • Spacing uses logical properties where relevant

Accessibility Guides

Section titled “Accessibility Guides”

Testing

Section titled “Testing”

Automated

Section titled “Automated”
  • axe DevTools - Browser extension for accessibility testing
  • WAVE - Web accessibility evaluation tool
  • Lighthouse - Built into Chrome DevTools

Manual

Section titled “Manual”
  1. Keyboard: Tab through all interactive elements
  2. Screen Reader: Test with NVDA (Windows), VoiceOver (Mac), or JAWS
  3. Contrast: Verify custom colors meet WCAG AA
  4. Focus: Ensure all focusable elements have visible focus

Best Practices

Section titled “Best Practices”
/* Don't remove focus indicators */
*:focus { outline: none; }

/_ Airframe handles focus automatically _/
<!-- Don't use divs for buttons -->
<div class="af-btn" onclick="...">
  Click
</div>
<!-- Use semantic elements -->
<button class="af-btn">
  Click
</button>

Resources

Section titled “Resources”

Reporting Issues

Section titled “Reporting Issues”

If you find an accessibility issue in Airframe, please open an issue with:

  • Pattern name
  • Description of the issue
  • Steps to reproduce
  • Expected behavior
  • Browser/screen reader used