Loading navigation…
User
Accessibility
Accessible text ensures all users can read, understand, and navigate content effectively. When using CoreText, follow these best practices.
Text components render appropriate semantic HTML elements for accessibility.
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 outlineBody text types render as paragraph elements.
<p> elementsEnsure text colors meet contrast requirements for readability.
Base colors provide sufficient contrast when used correctly.
Base color uses highContrast prop for maximum contrastSemantic colors maintain accessibility while conveying meaning.
Disabled text communicates state clearly.
Text components are fully accessible to screen reader users.
Screen readers announce headings with their level and content.
Expected announcement: "Welcome, heading level 1" followed by "Getting Started, heading level 2"
Screen readers announce text content appropriately.
Screen readers announce the full text content, allowing users to understand the information.
Truncated text provides full content through the title attribute.
title attribute contains the full text contentText transformations are communicated appropriately to screen readers.
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.
Capitalization provides visual emphasis without affecting pronunciation.
Screen readers announce the text naturally, while the visual transformation adds emphasis.
Font weight changes don't affect screen reader announcements but enhance visual hierarchy.
Text alignment affects visual presentation but doesn't change semantic meaning.
No wrap prevents line breaks but doesn't affect screen reader functionality.
Internationalized text maintains accessibility while supporting translations.
Trans component handles interpolation correctlyNumericDisplay and NumericCompact are not headings. Screen readers announce the number as text, not as a heading level.
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.
MonoMedium and MonoSmall apply monospace styling for technical content. Screen readers announce the text normally; visual font choice does not change pronunciation.
Screen reader users can navigate efficiently using heading shortcuts.
Ensure meaning is communicated beyond color alone.
Use semantic colors with descriptive text.
Combine color with text labels for clarity.
Ensure text remains accessible at different zoom levels and screen sizes.
Truncated text provides full content access for assistive technologies.
title attributeTest text components with screen readers to ensure proper announcements.
Expected sequence:
Users can navigate headings and hear their levels announced, enabling efficient content scanning.
Screen readers announce the text content. Color is visual only and doesn't affect pronunciation, ensuring meaning is clear through text content.
On this page