Typography content is keyboard accessible.
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
Typography maintains proper content hierarchy.
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
Typography maintains visual accessibility standards.
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 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 items should be properly structured.
Ensure list items contain complete information.
Screen readers announce each list item separately, so items should be understandable independently.
Use descriptive list items for clarity.
Descriptive labels help users understand list content before navigating through items.
Ensure instructions are accessible.
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.
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 sequence:
- "Available features:"
- "List with 2 items"
- "Feature 1"
- "Feature 2"
- "End of list"
Nested List Announcements
Expected sequence:
- "List with 1 item"
- "Parent"
- "List with 2 items"
- "Child 1"
- "Child 2"
- "End of list"
- "End of list"
