This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Which text presentation makes it easier to read long pages?
Long lines, block set with gaps and narrow line spacing make text exhausting for people with reading impairment, visual impairment or concentration problems. Level AAA Criterion 1.4.8 specifies five properties that can meet blocks of text or that visitors can set themselves: selectable colors, lines up to 80 characters, left-aligned sentence, line spacing of at least 1.5 and magnification to 200 percent without horizontal scrolling.
The five requirements
First: Foreground and background colors can be chosen by the visitor, for example via a contrast mode or the browser setting that respects the page. Second, a line of text is at most 80 characters wide (40 for Chinese, Japanese or Korean characters). Thirdly, text is left-aligned, not in block sets. Fourth, the line spacing is at least 1.5 times the font size, the paragraph spacing is at least 1.5 times the line spacing. Fifth: Text can be enlarged to 200 percent without auxiliary technology, without having to scroll a line horizontally.
Why 80 characters
The eye jumps from word to word in sentences and must find the beginning of the next line at the end of the line. The longer the line, the more often it goes wrong, especially with low vision or dyslexia. 45 to 75 characters are considered readable since the book typography; 80 is the upper limit of the criterion. On wide screens this means: The text block gets a fixed maximum width, the rest remains edge.
This is how we deal with it
Line width, alignment, line spacing and behavior at 200 percent can be measured in the rendered state; The test service already measures the basis for this (flow at 320 pixels, 1.4.10). Whether colors are selectable depends on the implementation and is judged by a person. The criterion belongs to the category AAA in knowledge.
Examples
Long lines in the block set
.text { text-align: justify; line-height: 1.2; }
/* Zeilen mit 130 Zeichen auf breiten Bildschirmen */.text { max-width: 70ch; text-align: left; line-height: 1.5; }
.text p + p { margin-top: 1.5em; }A maximum of 80 characters per line, left aligned, line spacing 1.5, heel spacing 1.5 times, and no side scrolling at 200 percent.
- Limit flow text to a maximum width of about 65 to 75 characters; This corresponds to about 640 pixels for 16 pixel font.
- Set text left aligned and line spacing to 1.5; Paragraphs shall have at least one blank line spacing.
- Test the page at 200 percent browser zoom: Each line must remain readable without horizontal scrolling.
- Respect the color settings of the operating system or offer a high contrast mode.
