Accessibility

Accessibility

Accessibility is a core part of the package behavior, not an afterthought.

Included accessibility behavior

Interactive Surface CSS includes support for:

• :focus-visible keyboard focus behavior
• :focus fallback handling for browsers without :focus-visible
• reduced-motion preferences
• higher-contrast preferences
• forced-colors mode
• ARIA-pressed active states
• ARIA-disabled disabled states
• 44x44 icon-only target sizing

Focus behavior

The package uses an outline-based focus ring. In browsers that support :focus-visible, mouse focus is suppressed while keyboard focus remains visible.

Relevant tokens:

• --interactive-surface-focus-ring-color
• --interactive-surface-focus-ring-width
• --interactive-surface-focus-ring-offset

Reduced motion

When prefers-reduced-motion: reduce is active, the package removes transform-driven movement and transitions from the interactive surface.

That means users who prefer reduced motion do not get hover lift, press movement, or animated state transitions.

Higher contrast

When prefers-contrast: more is active, brightness modifications are neutralized and the focus ring width is increased.

Forced colors

When forced-colors: active is enabled, system colors are used:

• ButtonFace
• ButtonText
• Highlight
• GrayText

This keeps the primitive compatible with operating-system-managed high contrast modes.

ARIA state support

Pressed / toggled controls

<button class="interactive-surface" aria-pressed="true">Pinned</button>

Disabled custom control

<button class="interactive-surface" aria-disabled="true">Unavailable</button>

Semantic guidance

Prefer native interactive elements whenever possible.

Good:

• <button>
• <a href="...">

Use non-semantic elements only when your application adds the missing semantics and keyboard support.

Important limitation

This package styles interaction states. It does not create semantics or keyboard behavior on non-native elements for you.