Supplemental Guidance: Text Justification

Note: Can use this as an example of the type of information to include. (This topic isn't a good example of supplemental guidance because it's mostly covered in SC 1.4.8 & F88. :-)

Summary

Avoid full justification. Avoid centered justification for blocks of text (more than one sentence of text).

When users change the justification, no information or functionality is lost.

Important

[boilerplate wording: @@ This is informative. Other than SCs from WCAG, not a requirement...]

User Experience

This quote from a persona (fictional person) helps you understand some aspects of this guidance.

Persona: Parent with low vision – 20/400

Problem: “I increase the text size 400%. When text is fully justified, it gets big spacing between lots of words and scrunches up other words, making it hard to read."

What To Do

Usually nothing — if you don't mess with the justification, then it's good as is. In most situations, if you do not explicitly set the justification (for example, CSS text-align), it will default to left justification for left-to-right scripts and right justification for right-to-left scripts.

Support User Customization

Allow users to change the justification. For example, users might change text-align using CSS.

Make sure that when users change the justification, no information or functionality is lost.

Intent

Justification impacts readability and tracking. Tracking is following lines of text and getting to the next line.

In CSS, text-align options are: left, right, center, justify (="full justification").

With full justification, text is flush with both the right and left margins (for left-right and right-left scripts). Fully justified text has adjusted spacing between words and sometimes adjusted space between letters.

For most users, it is easiest to read text that is justified as it is read:

for left-to-right scripts, left justified text is easier to read
for right-to-left scripts, right justified is easier to read

Although a small percent of people find it easier to track from the end of one line to the next with full justification. [@@ is this true? data to support?]

Full justification often makes reading more difficult because sometimes there is:

extra space between words that makes it difficult to follow along on one line.
less space between some words that makes it difficult to distinguish words.
inconsistent letter spacing that makes it harder to distinguish letters and words.
spacing that causes “rivers of white” and disrupts tracking.

The problems with full justification are usually much worse when users increase the text size (and text reflows as it should per Success Criterion 1.4.10: Reflow).

Centered text is also more difficult for most people to read, when there are multiple lines of text. It is harder to find the beginning of the next line of text and keep a smooth reading flow for comprehension. Additionally, screen magnification users might miss some centered text.

Benefits

Improves readability for all users, especially for people with some types of low vision and cognitive disabilities.

Examples

[@@add: Example showing awkward spacing with full justification, including "rivers of white". Probably two examples, one with much larger text showing how the problem is compounded.]

Related Resources

Problems with justification
…

Techniques

Failures

Using text-align: justify
Using text-align: centered for blocks of text

Key Terms

blocks of text: more than one sentence of text

Editorial Notes

These notes are not for the published document — just for us working through ideas.

For fun: Strategies for full-width justification

Keep in mind that while this is primarily for the web, we'd like it to apply to other digital mediums. And some language scripts are top-to-bottom. Thus I think we can use common web examples like text-align, yet be careful to not make the wording exclude other situations. (And since this currently written as proposed "supplemental guidance" rather than a success criteria, the wording doesn't have to be convoluted to cover every situation, exception, etc. :-) {shawn}

Perhaps add "text justification" to the Key Terms? How text is aligned to the page {Jason.Grieves] Could we leverage these examples? https://designforhackers.com/blog/justify-text-html-css/ {Jason Grieve}it