Status: This is an in-progress, unapproved draft.
Web pages with many components can distract from the main content or purpose of the page, which is especially useful for users that can’t concentrate very well. The main content’s headline should have a distinct visual style that invites the reader to look at the main content first.
All headings should be styled differently to the body text. Separating key sections of the page using background colors or borders can also help users to separate main from auxiliary content.
The user needs to be able to resize the text to 200% of its size anywhere on the page, without the text being cut off or overlapping other text. The font size should be defined in relative units, such as percentages,
rem. It is not possible to zoom text set in pixels independently from the rest of the page in some browsers. While the other units calculate the font size from the parent element,
rem calculates the font size from the root element. Consider the following two declarations:
The container with the class
content has a font size that is
1.25 times the font size of its parent element (which we assume is the body). The
<h1> heading in the content area is
1.25 times than the font size in its parent container (
.content). To achieve the same result using the
rem units, the following code is used.
While the resulting number for the
font-size property is more complicated, only one step of calculation needs to be performed which makes setting font-sizes more predictable for developers.
Main body text should be aligned to one side of the page, usually left in left-to-right languages. This makes the text easy to discover for people using text resizing or zoom. If the text doesn’t start at the same point on the left side, it is also hard to read for users that are not proficient reading text in this language or have a learning disability.
Centered or justified longer pieces of text can be hard to read as well. Justified text adds space in between words that can cause rivers of white space through lines making reading difficult for some users with dyslexia. If hyphenation is supported this can reduce this effect but hyphenated words can be a barrier for many readers.
A line of text shouldn’t be longer than 80 characters. This helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. If the width of the text container is resized, it should be allowed to scale in a way so 80 characters or less are shown. An easy way to do this is using
max-width: 70em in CSS. Another way to ensure good line-length is to use a fluid layout or apply responsive web design techniques that allow the user to resize the window to find a comfortable line length.
<mark> element can be used to highlight sections of text. By default the text is just highlighted by color. It is not supported by assistive technology at the time of writing. It can, however, be used to mark auxiliary information, like a section that is currently read by a page reading plugin. Also search terms can be highlighted in a list of articles to allow better visual orientation.
Related WCAG 2.0 resources
The following WCAG 2.0 resources are directly related to this page. Relationship to WCAG 2.0 provides more background information.
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
- C12: Using percent for font sizes
- C13: Using named font sizes
- C14: Using em units for font sizes
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
- C28: Specifying the size of text containers using em units
- G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width