Skip to main content
Subframe components are accessible by default. We use Radix under the hood, which provides built-in keyboard navigation, focus management, and ARIA attributes.

​
Adding accessibility attributes

All components pass through props to the top-level element. You can add any ARIA attribute directly: 
<Button aria-label="Close dialog" aria-describedby="dialog-description">
  <Icon name="FeatherX" />
</Button>

<TextField aria-required="true" aria-invalid={hasError} />

<Card role="article" aria-labelledby="card-title" />
Common attributes you might use:
  • aria-label — Describes the element for screen readers
  • aria-describedby — References an element that describes this one
  • aria-required — Indicates a required form field
  • aria-invalid — Indicates validation errors
  • aria-expanded — Indicates expandable content state
  • aria-hidden — Hides decorative elements from screen readers
  • role — Overrides the semantic role of an element
For more complex accessibility needs, you can also create wrapper components for code reuse.