Text Context
Text makes up the majority of the web. When it isn’t designed with accessibility in mind, entire groups of users can be excluded. In this chapter, you’ll learn exactly what text content is, how to create text that works for all, and best practices. By the end of this chapter, you’ll understand how text choices impact usability, how they intersect with WCAG requirements, and what best practices to follow so your text is accessible.
)
Want to learn more about AudioEye?
Share Course
What is Text Content?
Text content refers to all the written words on a webpage or digital document. This includes body paragraphs, headings, labels, instructions, alt text for images, form field descriptions, and even error messages.
From an accessibility perspective, accessible text revolves around ensuring that all written content on digital platforms is perceivable, understandable, and navigable by everyone, including users with disabilities. This means providing a clear, readable, and well-structured textual experience, so users can understand the content, locate information efficiently, and adapt the text presentation to their individual needs.
Put simply, text content is the backbone of digital communication. Making it accessible ensures that everyone can read, understand, and interact with your website.
How Does Text Content Impact Accessibility?
Accessible text directly affects how easily users can read, understand, and interact with information on a page. When text is designed and coded with accessibility in mind, it reduces barriers and improves the experience for everyone.
Here’s how:
Screen reader navigation: For screen reader users, appropriate heading structures are a primary navigation mechanism, helping them understand content organization and jump between sections.
Low vision and text resizing: Users with low vision benefit significantly from the ability to resize text up to 200% without loss of content or functionality, as well as from content that reflows to fit different screen sizes and zoom levels without requiring horizontal scrolling. Adjustable text spacing also improves readability for some users.
Color independence: Color-blind users or those with other visual disabilities need information to be conveyed through more than just color; additional visual cues are essential to differentiate meaning or status.
Clear link text: All users, particularly those with cognitive disabilities, benefit from clear and descriptive link texts that help them understand the purpose of each link without needing additional context.
What WCAG Success Criteria are Relevant for Text Content?
The Web Content Accessibility Guidelines (WCAG) include specific success criteria directly related to text accessibility:
WCAG Success Criterion 1.3.1 Info and Relationships: Requires that headings and labels describe their topic or purpose, ensuring that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
WCAG Success Criterion 1.4.1 Use of Color: States that information conveyed by color must also be available without color.
WCAG Success Criterion 1.4.3 Contrast (Minimum): Mandates that text and images of text must have a contrast ratio of at least 4.5:1.
WCAG Success Criterion 1.4.4 Resize Text: Ensures text can be resized up to 200% without loss of content or functionality.
WCAG Success Criterion 1.4.10 Reflow: Requires that content reflows to fit different screen sizes and zoom levels without requiring horizontal scrolling.
WCAG Success Criterion 1.4.12 Text Spacing: Stipulates that text should maintain its readability when spacing is increased.
WCAG Success Criterion 2.4.4 Link Purpose (In Context): Specifies that the purpose of each link should be clear from the link text alone or from the link text together with its context.
Which of the following best describes text content?
Hint: Remember, text content includes a wide range of content.
Why is text content important for accessibility?
Hint: Think about how people with different abilities rely on text to understand and navigate content.
Which is not one of the WCAG success criteria that text content fulfills?
Hint: Think about which WCAG criteria are directly related to making text readable, understandable, and perceivable for all users.
According to WCAG 1.4.4, how much should text be resizable without loss of content or functionality?
Hint: Think about the minimum zoom level users with low vision might need — often up to double the default size — while still being able to use the page normally.
How Do I Maximize Accessibility When I Code Text Content?
Creating accessible text content is about more than just the words on a page. IT’s about how those words are structured, presented, and navigable for all users. Here’s how to implement best practices:
Use appropriate heading structures
Organize content hierarchically (e.g., <h1> through <h6>). Proper heading structure helps users, especially those using screen readers, understand the content’s organization, scan sections quickly, and jump directly to the information they need.
Ensure content reflows correctly
Make sure content flows naturally when viewed on different devices or zoomed in 200%. Avoid fixed-width layouts that require horizontal scrolling, and ensure elements adapt to screen size changes to maintain accessibility.
Make sure text spacing is adjustable
Without affecting readability or layout, accommodating users who might use their own stylesheets.
Allow adjustable text resizing
Users may apply their own stylesheets or adjust line height, letter spacing, and paragraph spacing. Ensure your layouts accommodate these adjustments without breaking the design or reducing readability.
Don’t rely solely on color to convey information
Color alone should never convey meaning, status, or emphasis. Combine color with additional visual cues, like icons, patterns, or text labels, so users with color vision deficiencies or other visual impairments can perceive the same information.
Provide clear and descriptive link text
Link text should make sense on its own without surrounding context. Instead of vague phrases like “click here” or “learn more”, use text that communicates the purpose, such as “Download the annual report” or “Read accessibility guidelines.”
How Do I Test the Accessibility of Text Content?
There are several ways to test the accessibility of your text content. Explore those in more detail below.
Screen Reader Testing
Activate a screen reader (e.g., VoiceOver on Mac, NVDA on Windows) and navigate the page using heading keys (e.g., H key with NVDA, Control + Option + Command + H with VoiceOver) to check the hierarchical order of headings. Listen to link texts to ensure their purpose is clear.
Content Scaling/Magnification Testing
Before publishing your content, ensure it’s visible when users adjust its size by:
Magnifying the page to 200% (using Control + Equals/Plus on Windows or Command + Equals/Plus on Mac).
Scrolling through the magnified page to ensure there is no loss of content or functionality, such as clipped or overlapping content, and no horizontal scroll bars. This directly tests WCAG 1.4.4 and 1.4.10.
Automated Tools
You can also use automated tools to test text content.
For example, use the WAVE browser extension. The structure tab within the WAVE Report panel ensures headings are in hierarchical order. Additionally, the Color Contrast tab lists color contrast errors, providing a tool to manipulate erroneous color combinations to meet contrast requirements.
How Can I Learn More About Accessible Text Content?
Refer to the W3C Understanding WCAG 2.2 documents. It has techniques and failure examples for building semantic components related to text. Start those on each of the relevant WCAG success criteria.
What is a primary navigation mechanism for screen reader users when content is well-structured?
Hint: Think about which of the following helps break up a page into meaningful sections.
If information is conveyed using color, what additional measure is required by WCAG 1.4.1 for accessibility?
Hint: Think about someone who is color blind; would they be able to see something that's conveyed just with color?
Keep Learning
Move to the next chapter: Lists
)