With modern, responsive design approaches that accommodate different screen sizes, including mobile, the concept of supporting display flexibility is much more widespread and the benefits more obvious. Flexibility is also important for accessibility reasons to support people who need to make changes to the way text is presented to make it more readable.
However, some designs are sufficiently rigid that changes applied through, for example, custom style sheets or text resizing through the browser have no effect; in other cases, changes may lead to text becoming unreadable or obscured by other content.
- Avoid using images of text. Depending on the format and resolution of images, resizing an image of text may lead to loss of readability. Text in an image can’t be changed in appearance. In some cases, such as logos, images of text are unavoidable. But wherever possible, use text provided in HTML and styled in CSS over images of text.
- Allow text to be resized without losing content or meaning. Some people with reading difficulties will prefer to enlarge text only (as opposed to zooming the page layout). Use relative units when specifying text size and container size so that text can be enlarged using the browser’s native text-resizing functionality (for browsers where it’s available). The recommendation in WCAG is to accommodate text resizing of 200% of browser’s default text size, but this upper limit may be challenging to meet. At a minimum, ensure that text can be increased to 150% of the browser’s default size without any loss of text or overlapping with other content.
- Support user-defined style sheets. Make sure that CSS styling can be overridden, if necessary, by user stylesheets that control the appearance of content such as headings, paragraph text, hyperlinks, and lists. A prerequisite for this is to ensure that the pages’ content structure is represented accurately in the underlying HTML.
- Use native browser functionality (or a browser extension) to increase the browser’s text size to 150%. Is all text on the page still readable?
- Apply a user-defined style sheet that changes the appearance of heading, paragraph, and link text. Are the changes in the user-defined style sheet applied as you had expected?
- Check for images of text. Does the visual appearance of the text require them to be an image rather than HTML and CSS?
- Understanding WCAG SC 1.3.1—Info and relationships (WAI)
- Understanding WCAG SC 1.4.4—Resize Text (WAI)
- Understanding WCAG SC 1.4.5—Images of Text (WAI)
- TAdER Project—detailed information on text-adaptation needs and current support in user agents