Accessible text ensures all users can read, understand, and navigate content effectively. When using Text
Copy link to this section Text components render appropriate semantic HTML elements for accessibility.
Copy link to this section Heading types render as proper heading elements.
Page, Section, Subsection, and Title render as <h1>, <h2>, <h3>, and <h4> by default (unless overridden with headingLevel) A heading role set on a span matches 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 Copy link to this section 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 Copy link to this section Ensure text colors meet contrast requirements for readability.
Copy link to this section 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 Copy link to this section 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 Copy link to this section 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 Copy link to this section Text components are fully accessible to screen reader users.
Copy link to this section Screen readers announce headings with their level and content.
Expected announcement: "Welcome, heading level 1" followed by "Getting Started, heading level 2"
Copy link to this section Screen readers announce text content appropriately.
Screen readers announce the full text content, allowing users to understand the information.
Copy link to this section Truncated text provides full content through the title
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 Copy link to this section Text transformations are communicated appropriately to screen readers.
Copy link to this section 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.
Copy link to this section Capitalization provides visual emphasis without affecting pronunciation.
Screen readers announce the text naturally, while the visual transformation adds emphasis.
Copy link to this section 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 Copy link to this section 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 Copy link to this section 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 Copy link to this section 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 Copy link to this section A number set in a heading role on a span
Copy link to this section The odometer keeps the formatted number in the tree. Polite live is off by default. When livePoliteannouncement
Copy link to this section MonoMediumMonoSmall
Copy link to this section 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 Copy link to this section Ensure meaning is communicated beyond color alone.
Copy link to this section 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 Copy link to this section 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 Copy link to this section 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 Copy link to this section 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 Copy link to this section Test text components with screen readers to ensure proper announcements.
Copy link to this section Expected sequence:
"Welcome, heading level 1" "Welcome to our application." Copy link to this section Users can navigate headings and hear their levels announced, enabling efficient content scanning.
Copy link to this section Screen readers announce the text content. Color is visual only and doesn't affect pronunciation, ensuring meaning is clear through text content.