Visual presentation of text
Allow users to adjust text appearance to meet their preferences or needs for better readability and accessibility.
Acceptance Criteria
For blocks of text, one or more of the following must be possible:
• Color Customization: Users can select foreground and background colors.
• Width Limitation: Text width is limited to no more than 80 characters or glyphs per line (40 characters for CJK languages).
• Text Alignment: Text is not justified (aligned to both left and right margins).
• Line and Paragraph Spacing:
• Line spacing (leading) is at least 1.5 times the font size within paragraphs.
• Paragraph spacing is at least 1.5 times larger than the line spacing.
• Text Resizing: Text can be resized up to 200% without requiring horizontal scrolling.
Examples
• Good: A webpage allows users to adjust text color and background color through browser settings and ensures text does not exceed 80 characters per line.
• Good: An article with text that is left-aligned, uses appropriate line and paragraph spacing, and can be resized up to 200% without horizontal scrolling.
• Bad: A website with justified text, fixed text color, and no option for users to change text appearance or resize text.
Exceptions
• Writing Systems: Content in languages with specific readability requirements may not need to adhere to all these presentation aspects if they do not align with standard practices for those languages.
• Mechanism Availability: Content does not need to provide the mechanism itself; as long as the mechanism is available through the browser or user agent, it meets the criteria.
Tips
• Implement design features that allow users to customize text presentation, such as color pickers or adjustable text size options.
• Avoid text justification to prevent uneven spacing that can make text harder to read.
• Ensure that content can be read comfortably at different text sizes without requiring horizontal scrolling.
How to test?
1. Color Customization: Verify that users can change foreground and background colors through browser settings or accessibility tools.
2. Text Width: Check that the text width does not exceed 80 characters per line (40 for CJK languages) and ensure there is no horizontal scrolling required for resized text.
3. Alignment and Spacing: Confirm that text is not justified and that line and paragraph spacing meet the specified requirements.
4. Text Resizing: Test resizing the text up to 200% to ensure that content remains readable without horizontal scrolling.