Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Primitives
  3. Typography
  5. Accessibility
  7. Keyboard Navigation

Typography

Keyboard Navigation

Keyboard Navigation
Typography content is keyboard accessible.
Focus Navigation
Users can navigate through interactive content.
  • Tab key moves between focusable elements
  • List structure doesn't interfere with focus order
  • Interactive elements within lists are keyboard accessible
Content Hierarchy
Typography maintains proper content hierarchy.
Heading Structure
Use proper heading hierarchy within Typography.
  • Maintain proper heading levels (H2 → H3 → H4)
  • Don't skip heading levels
  • Screen readers can navigate by headings
  • Proper hierarchy improves content understanding
Visual Accessibility
Typography maintains visual accessibility standards.
Color Contrast
Text colors meet contrast requirements.
  • Text colors use design system tokens
  • List items inherit appropriate text colors
  • Contrast ratios meet WCAG AA standards
  • Test in both light and dark themes
Spacing and Readability
Spacing enhances readability for all users.
  • Default spacing provides comfortable reading
  • Lists have appropriate padding and margins
  • Spacing scales with font size settings
  • Layout remains readable when zoomed
List Item Content
List items should be properly structured.
Complete Information
Ensure list items contain complete information.
Screen readers announce each list item separately, so items should be understandable independently.
Descriptive Content
Use descriptive list items for clarity.
Descriptive labels help users understand list content before navigating through items.
Instructional Content
Ensure instructions are accessible.
Clear Steps
Provide clear, sequential steps.
  • Ordered lists communicate sequence
  • Each step is clear and actionable
  • Screen readers announce step numbers
  • Users can easily follow instructions
Mixed Content Accessibility
Ensure mixed content is properly structured.
Content Flow
Maintain logical content flow.
  • Content flows logically from introduction to details
  • Lists are introduced with context
  • Conclusions provide next steps or summaries
  • Screen readers navigate content in natural order
Testing with Screen Readers
Test Typography content with screen readers.
Expected Announcements
Expected sequence:
  1. "Available features:"
  2. "List with 2 items"
  3. "Feature 1"
  4. "Feature 2"
  5. "End of list"
Nested List Announcements
Expected sequence:
  1. "List with 1 item"
  2. "Parent"
  3. "List with 2 items"
  4. "Child 1"
  5. "Child 2"
  6. "End of list"
  7. "End of list"
Previous
Accessibility / Screen Reader Support
Next
Accessibility / Long Content
On this page
Keyboard Navigation
Focus Navigation
Content Hierarchy
Heading Structure
Visual Accessibility
Color Contrast
Spacing and Readability
List Item Content
Complete Information
Descriptive Content
Instructional Content
Clear Steps
Mixed Content Accessibility
Content Flow
Testing with Screen Readers
Expected Announcements
Nested List Announcements