amp-fit-text: Content is unreadable when text style is adjusted #29556
Description
WCAG Level
Level AA
Priority
High
Type
Adaptability
Pages/Components affected
Description
An important design consideration is to make sure that the display of text can be adjusted, so that line height, spacing between paragraphs, and spacing between words and letters can be changed without the content becoming unreadable.
Currently, if a user adjusts their letter/word/line spacing, all variations of <amp-fit-text> - depending on the specific size defined for the component and the amount of content inside them - can end up cropping / clipping content.
Below are screenshots from the examples page, after the spacing metrics have been forcibly changed via this text spacing bookmarklet. Note that in all instances, the content of some of the boxes is clipped (either at the start, or end, or both, of the example sentence).
Basic usage
Aspect ratio
min-font-size
max-font-size
User impact
Someone with a cognitive or reading disability like Dyslexia may find content easier to read when there is more space between letters, words, lines and paragraphs. If content becomes hidden or obscured when they adjust the way text is displayed it makes the problem worse not better.
In this case, depending on the size of the <amp-fit-text> element and the amount of content, users may end up being unable to read/perceive the information contained in the element.
Required solution
Make sure that the element takes spacing metrics into account when doing its fit calculations. As users may change these spacing metrics after the page has loaded/the elements have rendered, this may require listening for changes and redoing the calculation/fit dynamically.
Test procedure(s)
Use these steps to confirm that the solution has been correctly applied:
- Install a tool like the ARC Toolkit, which contains an option to change text spacing, or the text spacing bookmarklet.
- Check that the text on the page responds to the changes.
- Check that all content and functionality remains readable and available after the display of text has changed.
Related standards
More information
- W3C: Technique C35: Allowing for text spacing without wrapping
- W3C: Technique C36: Allowing for text spacing override
- Knowbility: Exploring WCAG 2.1: 1.4.12 Text Spacing
- TPG: Short note on getting spaced out with SC 1.4.12 Text Spacing
- TPG: ARC Toolkit
Test data
Test date: July 2020