Readability is how easy it is to read and understand the text. It is measured by the complexity of the words and sentences. Improving the readability of text helps to engage people with the content on your website.
Accessibility
There is no reading level requirement at WCAG Level AA. However, at Level AAA, when the reading level is more than the lower secondary education level (6th-9th grade), supplemental content is available.
Flesch-Kincaid Grade Level
The Flesch-Kincaid Grade Level is one of the most common readability formulas. The formula uses the number of words, syllables, and sentences. It calculates a US grade level for the content. An 8th-grade Flesch-Kincaid Grade Level is recommended for the general public.
To help calculate reading level, remove proper names and titles from the calculation.
Calculators
No tool is the same; the 2 paragraphs above scored at grade levels of 8.28, 8.8, and 8.8.
- Character Counter: Flesch Kincaid Calculator
- Good Calculator: Flesch Kincaid Calculator
- Readability Scoring System Plus
Scanning
People scan web page content. People rarely read every word on a web page. There is a pattern to how people scan a web page that depends on the content structure.
F-Pattern: People scan the content, focusing on the beginning of lines of text near the top of the page. They will scan text at the top of the page more than text at the bottom. This text tends to have fewer headings and lists.
Spotted Pattern: While scanning, people focus on chunks of words that stand out or words they are looking for. This text tends to have more headings, bold text, links, and lists to guide people through the content.
Layer-Cake Pattern: When scanning, people focus on the headings until they find the content they want. Then people usually read this content below the heading.
Commitment Pattern: With this pattern, you see people reading, rather than scanning the content. People are very interested and motivated to read this content. People’s interest in the topic doesn’t negate the need for chunking content and heading structure. These elements contribute to the comprehension of the content.
Resources:
- F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)
- How People Read Online: New and Old Findings
- Text Scanning Patterns: Eyetracking Evidence
- The Layer-Cake Pattern of Scanning Content on the Web
Improving Readability and Scanning
Inverted Paragraph
An inverted paragraph has the most important information first, followed by the supporting details. The method is best for people as they scan web pages.
Resource: How to Write in the Inverted Pyramid Style
Chunk Content
Chunking content is breaking text into smaller paragraphs to help people scan, process, and understand the content. Walls of text, with people scanning in the F-Shape pattern, reduce comprehension and increase frustration for people finding information and answers. Chunking content supports scanning like the Spotted and Layer-Cake patterns. Headings guide users to the content. Short paragraphs with one topic support the heading and aid scanning.
Support scanning
To support how people scan web pages, provide:
- Headings with a clear hierarchical structure help understand the paragraph’s topic and its relationship to the other content.
- Short paragraphs improve scanning and comprehension.
- Bold and Italic text helps highlight keywords and short phrases to help people scan the content
- Lists make content easy to scan and understand.
Resource: Designing Scannable Content
Front-load Content
Front-loaded content helps people understand more as they scan headings, links, lists, and bold or italicized text. Front-loading is placing important words or keywords at the beginning. As people scan content, like headings, links, lists, and stylized text, they are not looking at the whole content. Placing the important word or keywords in front helps support people as they scan.
Resource: First 2 Words: A Signal for the Scanning Eye
Formatting Text and Paragraphs
Bold and Italic
Bold and italic text helps content stand out for people scanning. Use sparingly for an important keyword or a 2-3 word phrase.
Caution
Avoid bolding and italicizing too many words or large blocks of text. It doesn’t help content stand out or support scanning. Bold and Italic words should be limited to fewer than 3.
Center-Aligned or Justified Text
Center-aligned text reduces people’s ability to scan and return to the next line of text. Limit center-aligned text to 1 or 2 lines of text. On a smaller screen, the 1 to 2 lines of text can transition to multiple lines of text, decreasing the ease of scanning and returning to the next line.
Justified text makes it harder to scan the content, even to read. It can create issues for people with dyslexia, as justified text can create rivers of white space through it.