Cap line length with relative column widths
Set column widths in relative units so the measure adapts as text size and window width change. W3C attaches the sufficient status for C20 to 1.4.8 Visual Presentation, which is Level AAA, and lists it as advisory for resize text. The note on W3C's page is the part everybody misreads, so it is worth stating plainly. The technique does not require you to publish lines of 80 characters or fewer in the default view. It requires that you do not set widths in a way that makes it impossible for a reader to get there. A fixed pixel column is exactly that, because the measure cannot respond to anything they do. A relative width also lets the column grow as the font grows, which is what stops enlarged text being clipped.
How we find it in an audit
Fixed pixel widths on text containers are an automated inventory. The real test is done by changing things. We raise the browser's text size, narrow the window, and check that the column responds rather than holding its shape and pushing the words out of it.
How affected users experience it
Long lines cost anybody who returns to the start of the next line by tracking rather than by glancing, which includes readers with dyslexia, low vision and attention difficulties. A 1,100 pixel column at 200 percent text is a line so long that finding the beginning of the next one is its own task, repeated at every line, for the length of the page.
Passes vs. fails
Passes
#main-content { width: 90%; max-width: 70em; }Fails
.article { width: 1100px; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
- Zoomed text node is not clipped with CSS overflowA tool finds candidates, you decide
The other techniques filed under this rule
15 guides on this site are filed under 1.4.4 Resize Text. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- C28sufficientSize text containers in em units
- G142sufficientBuild with technologies whose browsers support zoom
- G146sufficientUse liquid layouts that fit any window
This guide is our interpretation of W3C technique C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.