Support flexibility and adaptation

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.

Testing

  • 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?

Resources

✎ Technique: Readable paragraph text

Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.

For the most part, this means applying typesetting best practices, which predate the web.

Examples

Bad example


p.bad {
  font-family: serif;
  line-height: 1;
  text-align: justify;
}

There are a number of things wrong with this example:

  • The line-height or "leading" is too tight at just 1. There needs to be some space (although not too much!) between each run of text, to separate them. A value of 1.3 to 1.5 is optimal, depending on the font.
  • Justified text can produce readability issues for people with dyslexia and other conditions that affect reading and comprehension.
  • Justified text can produce unevenly enlarged spaces between certain words, sometimes known as "rivers".
  • The width of a paragraph is called the "measure." Measures that are too wide make it difficult for readers to scan back to find the start of the following line. In this case, it is not set at all, meaning it can easily grow too large on wider viewports.
  • The typeface is a serif font. While accessibility requirements do not mandate use of specific fonts, be aware that people who have online reading difficulties benefit from body text set using a clear, consistently formed and balanced sans-serif font.
Careful styling can help overcome these issues in HTML documents and in online documents that are published in other formats, such as Word or PDF, while also providing flexibility for people who need to customize text appearance.

Code editor

In the code editor, you'll find the bad example described above and an alternative. Try different fonts to see where the line-height and other metrics need to be adjusted.

✎ Technique: Text and images of text

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by online content editors should allow you to update the style for that text.

Only in extreme circumstances, such as when a logo is used, should you provide an image of text rather than text. If you do this, you'll need to provide that same text as the image’s text alternative so that screen-reader users can access the text.

Examples

Bad example

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:


<img src="/path/to/text.png" alt="delicious pancakes" />

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

Use CSS and web fonts

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.


.pancakes-text {
  font-family: PancakeFont, FallbackFont, sans-serif;
  color: SandyBrown;
  text-shadow: 0.02em 0.02em 0 Brown, 
                        0 0 0.5em violet;
}

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.

✎ Technique: Enable text resizing

Some people with reduced visual acuity may not need screen magnification software or screen readers but might still have problems reading smaller fonts. So the ability to allow easy enlargement of text size is important.

There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.

Examples

Many users will zoom their web pages using CTRL and "+" or CMD and "+". This will enlarge the pages proportionately, so there's little you need to do in terms of intervention. However, you should also take into account that some users may choose to resize just their text. Setting a px based font-size on the html element suppresses this ability, but a percentage based value does not. In this example, 100% means “100% of the size the user chose in their browser or OS settings:”


html {
  font-size: 100%;
}

When the user changes their font size—say, by choosing "Large" in Chrome's advanced settings—the font-size will increase as expected—that is, if no px sizes are used further down in the page’s CSS. So all font sizes after that, the html element should be set using the relative units like em or rem. To make sure line-height adjusts proportionately, define your CSS line-height using relative units or unit-less values. If you don’t, when the font size increases, the line height will remain the same, resulting in poor line height and reduced readability.

Bad example


html {
  font-size: 100%;
}

p {
  font-size: 1em;
  line-height: 20px;
}

In the above code, the line-height uses an absolute value (it’s not relative to the root font size). The result, after the user enlarges their text in their settings, will be something similar to this:

Paragraph text with squished line height

Good example


html {
  font-size: 100%;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

In this example, the line-height is always equal to 1.5 times the current font-size. So whether the text size may be increased or decreased, the line height will remain appropriate at any text size.

Note: To make sure text resizing is possible via pinch zoom on touch devices, you need to use the correct viewport meta tag:


<!-- don't use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">