Accessibility Guidelines for CMS Admins Pt 4: WYSIWYG Content

Now that we’ve covered images and links in the previous articles in this series, we now turn to WYSIWYG fields. I touched on these briefly in those articles as well, but now we’re going to focus on other ways to optimize content for accessibility within WYSIWYG fields.

Text Styles

WYSIWYG fields often give admins a lot of control over how their text content is formatted. Aptly nicknamed “What You See Is What You Get,” these fields usually offer options for text style, alignment, color, etc. While this is an easy way for admins to break up content or make it visually interesting, there are some things to watch out for:

• All Caps: All caps is often used for titles and subtitles, or to emphasize a particular piece of content. However, all caps text is difficult for people with dyslexia or cognitive disabilities to understand, so use it sparingly and avoid confusion.
• Italics: Similar to all caps, italicized text, especially with serif letterforms that look very different than their original counterparts, can be difficult for people to understand if presented with a lot of it at once, especially if it’s interspersed throughout your paragraphs. Use sparingly, or possibly look for a font with a simplified, oblique version of italics instead.
• Color: Some WYSIWYG fields offer the ability to change text color or add highlights. This is unfortunately an easy way to introduce a color contrast failure. Without a way to evaluate the text contrast level against its background, you could be introducing text that is hard to read for many, including those with low vision, color blindness, or old age.

Text Content

It’s not only how you format your text content, but the content itself that should be evaluated for accessibility. Here are some areas to evaluate:

• Organizational Hierarchy: this traces back to the written content itself. Many times you may be adding content with headings and subheadings. WYSIWYG fields often either allow you to paste content in with formatting or highlight text and change its heading level with an easy dropdown menu. Just make sure you’re using logical semantic heading levels in your content, and not just bolded text.
• Paragraph content: Try to break up content into several smaller paragraphs, rather than having a few long ones. Long paragraphs are more likely to cause your readers to lose their place as they make their way down the page. They also have a greater tendency to create typographic “rivers” that occur when spaces between words line up (or almost line up) vertically. The issue of rivers is even worse if you use two spaces after every sentence, so avoid that as well.
• Jargon: Your audience may have different levels of familiarity with your subject matter. If your audience consists of more than subject matter experts, consider simplifying your language or explaining any specialized or unfamiliar terms.

Images

We already covered images a couple of weeks ago, this is just a quick recap of what to do when you place images in a WYSIWYG field.

• Alternative text: Compose succinct alternative text for images that convey unique information. If your image is redundant or decorative, is there a way to display the image with an empty alt attribute? Evaluate each image individually as you go.
• Image Positioning: WYSIWYG fields often give you some layout options for your image, usually to alight left, right, or center. Make sure images that are aligned next to text don’t take up too much horizontal space, or else they’ll crowd the text into an unreadable format. Some website themes take this into account to set appropriate maximum widths, but others don’t, so be on the lookout! Setting safe maximums in place is something your web developer can do so you don’t have to worry about it.

Here are some resources to guide you when you craft your text content:

• https://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/(opens in a new window)
• https://www.syndigo.com/resources/formatting-accessibility/(opens in a new window)
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility(opens in a new window)

Final Thoughts

Well, we covered a wide gamut of accessible content in the past month. Just remember, you can do this! Once you learn what to look for and what to do, it becomes second nature, and you’ll be managing accessible content like a pro.