Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Primitives
  2. Text
  3. Accessibility

Text

Accessibility

Accessible text ensures all users can read, understand, and navigate content effectively. When using Text, follow these best practices.
Semantic HTML
Text components render appropriate semantic HTML elements for accessibility.
Heading Elements
Heading types render as proper heading elements.
  • Display, Heading, Subheading, and Title render as <h1>, <h2>, <h3>, and <h4> by default (unless overridden with headingLevel)
  • NumericDisplay and NumericCompact render as <span>. They match heading sizes without entering the heading outline
  • Screen readers announce headings as heading elements
  • Heading hierarchy is communicated to assistive technologies
  • Users can navigate by headings using screen reader shortcuts
Paragraph Elements
Body text types render as paragraph elements.
  • Body text types render as <p> elements
  • Screen readers announce paragraphs appropriately
  • Content is clearly separated for assistive technologies
  • Users can navigate paragraph by paragraph
Color Contrast
Ensure text colors meet contrast requirements for readability.
Base Colors
Base colors provide sufficient contrast when used correctly.
  • Base color uses highContrast prop for maximum contrast
  • Base colors meet WCAG AA contrast requirements
  • Text remains readable across different backgrounds
  • Test contrast ratios in your specific contexts
Semantic Colors
Semantic colors maintain accessibility while conveying meaning.
  • Semantic colors meet contrast requirements
  • Color is supplemented with text content (not color alone)
  • Icons or additional indicators enhance meaning
  • Screen readers can communicate meaning beyond color
Disabled States
Disabled text communicates state clearly.
  • Disabled text uses appropriate styling for inactive content
  • Screen readers can distinguish disabled content
  • Disabled state is communicated both visually and semantically
  • Consider alternative communication methods for important disabled content
Screen Reader Support
Text components are fully accessible to screen reader users.
Heading Announcements
Screen readers announce headings with their level and content.
Expected announcement: "Welcome, heading level 1" followed by "Getting Started, heading level 2"
Content Announcements
Screen readers announce text content appropriately.
Screen readers announce the full text content, allowing users to understand the information.
Truncated Text
Truncated text provides full content through the title attribute.
  • The title attribute contains the full text content
  • Screen readers can access the complete text when needed
  • Users can understand the full context even when text is truncated
  • Tooltips display full content on hover for visual users
Text Transformation
Text transformations are communicated appropriately to screen readers.
Uppercase Text
Uppercase transformations don't affect screen reader pronunciation.
Screen readers announce the text normally, not letter by letter. The visual transformation is separate from the spoken content.
Capitalized Text
Capitalization provides visual emphasis without affecting pronunciation.
Screen readers announce the text naturally, while the visual transformation adds emphasis.
Font Weight Communication
Font weight changes don't affect screen reader announcements but enhance visual hierarchy.
  • Screen readers announce text content normally
  • Visual emphasis helps sighted users scan content
  • Font weight enhances visual hierarchy without affecting pronunciation
  • Combine with semantic meaning for best accessibility
Alignment and Layout
Text alignment affects visual presentation but doesn't change semantic meaning.
  • Screen readers announce text content regardless of alignment
  • Alignment provides visual organization for sighted users
  • Semantic meaning is preserved across alignment choices
  • Ensure alignment enhances rather than hinders readability
No Wrap Behavior
No wrap prevents line breaks but doesn't affect screen reader functionality.
  • Screen readers handle no-wrap text normally
  • Content is announced completely regardless of wrapping
  • Visual presentation may differ but accessibility is maintained
  • Ensure containers accommodate unwrapped text appropriately
Internationalization
Internationalized text maintains accessibility while supporting translations.
  • The Trans component handles interpolation correctly
  • Embedded components maintain their accessibility attributes
  • Screen readers announce translated content properly
  • Formatting and structure are preserved across languages
Numeric types
NumericDisplay and NumericCompact are not headings. Screen readers announce the number as text, not as a heading level.
Odometer
The odometer keeps the formatted number in the tree. Polite live is off by default. When live is Polite, provide announcement and expect one utterance after a settled post-mount update. First paint and entrance rolls do not announce. Reduced motion snaps and never leaves the reel on the wrap row.
Monospace variants
MonoMedium and MonoSmall apply monospace styling for technical content. Screen readers announce the text normally; visual font choice does not change pronunciation.
Heading Navigation
Screen reader users can navigate efficiently using heading shortcuts.
  • Users can jump between headings using screen reader shortcuts
  • Heading hierarchy is communicated clearly
  • Navigation matches visual structure
  • Proper heading structure enables efficient content scanning
Color and Meaning
Ensure meaning is communicated beyond color alone.
Semantic Colors
Use semantic colors with descriptive text.
  • Text describes the meaning (not just color)
  • Color reinforces but doesn't replace semantic meaning
  • Screen readers can communicate the full meaning
  • Icons or labels enhance understanding
Status Indicators
Combine color with text labels for clarity.
  • Text label provides the meaning
  • Color reinforces the status visually
  • Screen readers announce the text label
  • Status is clear to all users
Responsive Text
Ensure text remains accessible at different zoom levels and screen sizes.
  • Text scales appropriately with browser zoom
  • Content remains readable at different sizes
  • Text types provide appropriate sizing for contexts
  • Test accessibility at various zoom levels
Truncation Accessibility
Truncated text provides full content access for assistive technologies.
  • Full text is available through the title attribute
  • Screen readers can access complete content
  • Tooltips provide access for mouse users
  • Truncation doesn't limit accessibility
Testing with Screen Readers
Test text components with screen readers to ensure proper announcements.
Expected Announcements
Expected sequence:
  1. "Welcome, heading level 1"
  2. "Welcome to our application."
Heading Navigation
Users can navigate headings and hear their levels announced, enabling efficient content scanning.
Color Announcements
Screen readers announce the text content. Color is visual only and doesn't affect pronunciation, ensuring meaning is clear through text content.
Previous
Text / API and Development
Next
Theme / Usage
On this page
Semantic HTML
Heading Elements
Paragraph Elements
Color Contrast
Base Colors
Semantic Colors
Disabled States
Screen Reader Support
Heading Announcements
Content Announcements
Truncated Text
Text Transformation
Uppercase Text
Capitalized Text
Font Weight Communication
Alignment and Layout
No Wrap Behavior
Internationalization
Numeric types
Odometer
Monospace variants
Heading Navigation
Color and Meaning
Semantic Colors
Status Indicators
Responsive Text
Truncation Accessibility
Testing with Screen Readers
Expected Announcements
Heading Navigation
Color Announcements