Skip to content
Airframe

Accessibility

WCAG 2.2 A/AA Approach

Section titled “WCAG 2.2 A/AA Approach”

Airframe’s default styles and patterns are designed to help you aim for WCAG 2.2 Level A and AA.

Conformance is a property of a finished page, not of a CSS layer. Airframe handles the structural half: semantic-first defaults, visible focus indicators, AA-contrast default palette. The rest stays with your product: copy, heading structure, alt text, validation messaging, tab order in composed UI, and testing.

Built-in accessibility

Section titled “Built-in accessibility”

Airframe follows a semantic-first, CSS-only where possible approach.

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>
  • No nested interactive (a a, button a, …) and no flow-only tags inside <button> (button div). See AI Rules → Valid HTML and catalog htmlSemantics.
<!-- Good -->
<button class="af-btn">Click me</button>

<!-- Bad -->

<div role="button" class="af-btn">Click me</div>

<!-- Bad: nested interactive / invalid content model -->

<a href="/x">
  <button class="af-btn">Go</button>
</a>
<button class="af-btn">
  <div>Label</div>
</button>

Focus indicators

Section titled “Focus indicators”

All interactive elements have a visible :focus-visible ring. Thickness and offset are tokens. Never removed in base styles. See Keyboard & Focus.

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. See Color & Contrast.

Motion

Section titled “Motion”

prefers-reduced-motion disables non-essential transitions. Default motion is subtle and tokenised. Critical animations (focus indicators) remain functional.

Direction and logical properties

Section titled “Direction and 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: axe DevTools, WAVE, Lighthouse.

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

Resources

Section titled “Resources”

If you find an accessibility issue in Airframe, open a GitHub issue or email team@airframeui.com with the pattern name, steps to reproduce, expected behavior, and browser/screen reader used. Security reports stay private — see SECURITY.md.