A shop's journal sets its articles flush to both edges, so the browser stretches the spaces between words into uneven gaps, widest on a phone.
text-align: justify People with dyslexia and other reading difficulties struggle to follow an article whose words are pulled apart by uneven gaps
A shop that sells handmade tableware keeps a journal. Its article page is drawn like a magazine: a serif headline, and body text set flush to both edges, so every paragraph is a neat block whose sides line up. In the design file, with copy written to fit, the blocks look tidy, and the look is what the shop asked for.
The real copy doesn't fit so neatly. To make each line reach both edges, the browser widens the spaces between its words, by a different amount on every line. A line that holds a few long words, such as "differences really", gets wide gaps; the line under it, with more short words, gets narrow ones. Where wide gaps fall on lines above each other, they join into a channel of white running down the paragraph. On a phone, where a line holds seven or eight words, some gaps grow as wide as a short word.
Success Criterion 1.4.8, Visual Presentation, is Level AAA. For blocks of text, it asks that a mechanism is available to achieve five things, and the journal meets four of them:
The Understanding document gives the reason for the third part. Justified text is spread unevenly between its words, which can make "rivers of white" run down the page, and where a line is squeezed instead, words sit so close together that people with some cognitive disabilities find it hard to tell where one ends and the next begins. In CSS, text-align: justify shares out the space left over at the end of each line among the spaces in that line. Each line has a different amount left over and a different number of spaces to share it, so no two lines are spaced alike. Browsers don't break words with hyphens unless hyphens asks them to, so a long word that doesn't fit moves down whole and leaves the most space behind.
W3C's failure technique F88 tests exactly this: open the page in a common browser and check that the content is not justified; if it is, the page fails 1.4.8. Since WCAG 2.2, a note to the criterion says the mechanism can be provided by the browser and that content is not required to provide it, and reading modes such as Firefox Reader View do lay an article out again in their own styles. W3C still lists F88, though, and Firefox offers Reader View only on pages it recognises as articles. Both fixes below meet the requirement on the page itself, so neither depends on that question.
Justified text is at its worst where lines are short: on a phone, in a narrow column beside a photo, and with the text enlarged, since each line then holds fewer spaces to share its leftover width. It is rarely the theme's default. Shop owners add it by hand: Shopify's Community forum has threads asking how to justify product descriptions and blog posts in the Dawn, Prestige and Impulse themes, and the answers give a text-align: justify rule to paste into the theme's CSS.
2 of 10 groups affected
axe has no rule for justified text, and Lighthouse runs axe's rules, so neither reports it. WAVE shows it as an alert, "Justified text", for a person to judge. EaseWeb's audit reports a block of text longer than one sentence whose computed text-align is justify, as ew:justified-text, and leaves out Japanese, Chinese and Korean text, where justification is the convention. What no check can tell is whether the page offers a switch that turns justification off; a person looks for one. A review of the design file rarely catches it either, because the copy in a mock-up is often placeholder text, or written to fit the block. A change that adds hyphens: auto narrows the widest gaps but leaves the text justified, so it still fails F88's test.
What the checkers report
Read the article as a phone shows it, then apply each fix and read it again
Look at the spaces between the words on each line, and at the wide ones lining up down the paragraph. Then apply each fix; with the second, tick Left-align text above the article.
Broken Can you fix this?
Each mug starts as a lump of stoneware clay, thrown by hand on the wheel, so no two come out quite the same height. We trim the foot once the clay is leather-hard, then leave the mugs to dry slowly under plastic for about a week.
Keep the spaces between words even
<article class="article"> <h1>Why every mug is a little different</h1> <div class="article-body"> <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p> <p>Glazing is where the differences really show. …</p> … </div></article>Text aligned to the start
<article class="article"> <h1>Why every mug is a little different</h1> <div class="article-body"> <p>Each mug starts as a lump of stoneware clay, thrown by hand on the wheel …</p> <p>Glazing is where the differences really show. …</p> … </div></article>text-align: justify to text-align: start. Every space between words is the font's own width again, on every line and at every screen width, and the right edge of each paragraph is ragged.This fixes the Before and passes 1.4.8: with the column, spacing and colours it already had, the article meets all five parts on the page itself. The look keeps its column, type and spacing; only the straight right edge goes. start follows the direction of the text, so the same rule aligns a right-to-left language such as Arabic to the right, which C19 allows too.
Both pass 1.4.8. Aligning to the start is one word in the stylesheet, and it passes for every reader on every page, with nothing to find and nothing to remember, so use it unless the design truly needs its straight edge. The switch keeps the look as drawn, for a site that is copying a printed original, but it is not enough on its own: it adds a control to design, build and test, and the readers it is for have to find it first.
Look for justification wherever text is styled by hand, not only in the theme's stylesheet. It comes in through a theme's custom CSS box (.rte p { text-align: justify !important; }), through a page builder's alignment buttons, through the align="justify" attribute that old editors wrote, and through inline styles. WordPress removed the Justify button from its editor toolbar in version 4.7, because browsers implement it unevenly and it often makes text less readable, but its keyboard shortcut kept working, and a plugin puts the button back.
hyphens: auto is not a fix. It lets the browser split long words across lines, which narrows the widest gaps, but the text is still justified, and F88's test is whether it is justified. text-align-last only changes the last line of each paragraph.
Japanese, Chinese and Korean text is different. W3C's Requirements for Japanese Text Layout say Japanese composition has no equivalent of ragged right, and that justification there is spread over many points in the line, not only the spaces between words. During the review of WCAG 2.2, W3C's internationalization group raised this for Chinese and Japanese, and WCAG 2.2 added a note to 1.4.8: where a writing system doesn't use one of its presentation aspects, content in that writing system can conform without it. A Japanese page set justified is therefore not the failure this guide describes. The English pages of a Japanese site are: the same text-align: justify stretches the spaces between English words, so a site that serves both languages from one stylesheet sets English text to start, for example with :lang(en).
The example meets the other four parts already, and each has a guide of its own when it goes wrong. A reader who widens line, letter or word spacing with their own stylesheet is covered by button labels cut off when people widen text spacing, a column that has to be scrolled sideways once the text is enlarged by pages that scroll sideways on a narrow screen, and colours that are hard to read by low-contrast text on brand colours, photos and hover states.
A calm page doesn’t need two straight edges
Two more ways to set the same article, and the print look a designer might reach for instead. Try the colour swatches: the text stays ragged-right in all three.
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
Glazing is where the differences really show. Our speckled oatmeal glaze breaks over the rims and handles, turning darker wherever it runs thin.
In the kiln, the iron in the clay bleeds through as small brown freckles.
4 checks, no mouse.
Test with: Text layout check, Keyboard
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever the theme, the article template or the custom CSS changes.
This is a starting pattern, not a guarantee for every application. 1.4.8 is Level AAA, above the AA level that most policies ask for, but this part of it costs one word of CSS. The guide covers the justification part only; the example meets the other four by its line height, column width, colours and relative sizes. Class names in the snippets are placeholders, and no particular reading mode or browser setting is claimed to meet the criterion.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
EaseWeb service
I turn guides like this one into rules your coding agents follow and checks your CI runs. Then I retest by hand with a keyboard and screen readers, periodically.