Why do people visit your site? What keeps them coming back for more? Most likely its a result of high-quality content. Content makes up the essence of the web and why people spend so much of their day there. As a result, the content itself needs to be well designed in order to create a comfortable user experience.
Not all users of the web have received the same amount of education in their lifetime. Some of us read at different levels and at different speeds. Those with a learning disability may have difficulty reading and comprehending content which is full of jargon, acronyms, and other complexities.
How then, do we continue to write quality content that is both informative and inclusive to meet the needs of our readers?
Adjust content reading level
In order to ensure content is readable and understandable by as many people as possible, consider testing your content readability with the Hemingway app. This handy utility app will read your content and make recommendations based on how difficult it might be for someone to read and comprehend. Some of the recommendations include:
- Considerations when using adverbs
- Use of passive voice
- Complexity of phrases
- Difficulties in sentence comprehension
By running your content through this utility, you will end up restructuring your content to better suit a more general audience. The recommended reading level for inclusive content is usually 7th or 8th-grade reading level. The Hemingway app will let you know how your content holds up in this regard.
WCAG success criteria
This comes back to 3.1.5 Reading Level which states:
"When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available."
Explain acronyms, abbreviations, numeronyms, and complex terms
When writing content for the web, it's important to explain certain particulars of our content further in order to not leave anyone out of the conversation. This is especially true when catering to users whose primary language is not of the source material.
When either an acronym, abbreviation, numeronym, or complex terminology is used for the first time in a piece of content, it should be accompanied by its full name, brief explainer text in parenthesis, or link to another resource with more information.
Here are a few examples:
- "The United Nations (UN) is an intergovernmental organization that was tasked to maintain…" (Source)
- "HTML (HyperText Markup Language) is the most basic building block of the Web…" (Source)
- "One of the most critical security features, and one that is required for many modern APIs and progressive web apps is HTTPS…" (Source)
With acronyms, abbreviations, numeronyms, or complex terminology explained within close proximity of the content in question, readers will be better informed and won't feel left out of the conversation.
WCAG success criteria
This comes back to 3.1.3 Unusual Words which states:
"A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon."
Designing for Dyslexia
Someone with Dyslexia, which is a disability that impairs a person's fluency or accuracy in being able to read, write, and spell, may have difficulty reading content on the screen.
There are a few design considerations for making text itself readable for folks with Dyslexia. The following are things to avoid when designing content:
- Justified text – Text which is fully justified can cause dyslexic readers to repeatedly lose their place when reading. To avoid this frustration always left align text (or right align, depending on your region.)
-
High contrast – Text which is styled to be pure black (
#000000) against pure white (#ffffff) can generate a high contrast reading environment. As a result, some dyslexic users may experience words to swirl or blur together. - Italicized content – Use of italicized text can actually result in a poor reading experience for people with Dyslexia as a result of the slanted nature and extra pixelation of letter shapes. Use sparingly!
Text design
Let's review a few more considerations when working with text and fonts on the web:
- Font size
- Line length
- Line height
Font size
Throughout the late 1990s and early 2000s, websites had body text set anywhere between 9px and 14px. During this period designers typically only had to worry about 10" to 19" screen sizes for a desktop computer.
Fast forward to 2011, designers now had a massive plethora of screen sizes, devices, orientations, and viewing lengths to consider. With the mass adoption of Responsive Web Design, these smaller font sizes did not work well on smaller, handheld devices. As a result, the new baseline font size became 16px and hasn't changed much since.
Font size and accessibility
Let's consider a few reasons how larger font sizes increase the accessibility for any site.
-
Readability – Larger font sizes equates to increased readability. This makes for an easier reading experience for folks with low-vision, including older generations who usually require larger font on a user interface due to eyesight deterioration. Bumping up the font size on any site by a few pixels greatly helps with readability.
-
Usability – Larger fonts means less content required to fill available space in a design. Less content means less cognitive load on readers. Less content required also means being precise and direct when writing content, meeting the requirement of lowering the reading level, which in turn, increases readership and user base as a whole.
-
Scannability – It's quite common for people to quickly scan a page of content just to get a feel for what the page has to offer. With larger font sizes, especially headings when they're designed and used in a visual hierarchy, this increases the scannability of content. The benefit again is to lower cognitive load. And on the flip side of the age equation, younger generations tend to have fewer patients and a lower attention span. Therefore, scannability is key to getting your message across to younger readers.
Larger font size means less screen clutter which generates a clearer reading path and more of what people want; content.
Line length
Optimal line length is typically between 55 to 75 or 80 characters per line. By limiting the width or horizontal span of content, users will experience less fatigue when scanning from right-to-left in search of the next line of content.
On the other hand, lines which are too short often force an awkward word break, resulting in reading difficulty. Be sure to test your user interface in various situations and languages (if supported) to make sure line length isn't too long or too short.
Line height
Setting a line-height affects the space between lines of content. There's no "optimal" setting per se, as this depends on the intended design and the font-face in use.
What's important to note is a new Success Criterion introduced in WCAG 2.1: 1.4.12 Text Spacing. This basically states that when the user overrides the line height to improve their reading experience, no loss of content or functionality will occur when set to at least 1.5 times the font size.
In other words, in case the end-user adjusts typography on their own terms, design to allow for greater line height than intended in the original design and make sure content is still readable.
WCAG success criteria
This comes back to 1.4.12 Text Spacing which states:
"In content implemented using markup languages that support text style properties, no loss of content or functionality occurs by setting and by changing no other style property."