Is your blog functionally inclusive?
I’m working with the CMI team to improve this blog.
Recently, Melissa Eggleston pointed out some problem areas that make the blog hard to read for people who are visually impaired. Though the fixes have been on my radar, her note pushed them to the top of my to-do list.
I started digging through the Web Content Accessibility Guidelines. The WCAG documents explain how to make web content more accessible to people with disabilities.
The first topics we’re working on are the elements important to screen readers – the text-to-speech software that gives voice to your text, images, buttons, etc.
Given the increasing use of voice technology – Apple’s Siri, Amazon’s Alexa, Google’s voice search, etc. – adapting your content for screen readers is a smart step. It helps those with visual impairments and anyone in your audience who uses voice technologies.
(To test your content with screen reader tools, try TalkBack for Android and VoiceOver for iOS.)
Make it easy to read
A technique that improves readability for your audience also works well for screen readers: Use shorter sentences and bullet points.
Ann Smarty recommends using TextOptimizer to check your content and to suggest improvements in terms of readability, including choice of word, sentence and paragraph length, diversity – yet clarity – of vocabulary.
.@textoptimizer is a handy tool to help check content readability & suggest improvements, says @SEOSmarty via @CMIContent @Brandlovellc. #tools Click To TweetHANDPICKED RELATED CONTENT:
Avoid abbreviations and spelling mistakes
Proofreading is important no matter who – or what – will read your content. But accurate spelling and grammar are especially important for screen readers. Misspellings can cause screen readers to mispronounce a word.
You also should take steps to avoid screen readers pronouncing acronyms as words – think “mlah” for MLA, the abbreviation for Modern Language Association. Among the better options: Eliminate abbreviations, use periods between the letters (M.L.A.) or spell out the words at first mention followed by its acronym (Modern Language Association [MLA]).
Use headings instead of bold type
Use proper headings to indicate new sections or categories instead of relying on bold typefaces. Consistently using H2 and H3 headers gives assistive technologies and all readers a sense of the page’s organization and structure.
Consistently using H2 and H3 headers gives assistive technologies a sense of the page’s structure, says @Brandlovellc via @CMIContent. #Accessibility Click To Tweet“Maintaining proper hierarchy also helps communicate how those subheadings relate to each other. That said, don’t start your article with an H3 subheading followed by an H2 subheading,” writes Ann Smarty. (To learn more, check out her article, How to Structure Your Content to Make it Accessible.)
Wait for emojis
If you use emojis in your copy, put them at the end of a sentence. Putting them in the middle messes up the speech interpretation and decreases the readability of your content, as Alexa Heinrich illustrates in this example:
Y’all, I am tired. Please stop doing stuff like this.
Until there is an accessible way to create ASCII art and emoji illustrations, you are just creating a headache for screen reader users.
Please be smart about your emoji use. CC: @Emojipedia pic.twitter.com/WgiSX1U5pZ
— Alexa Heinrich (@HashtagHeyAlexa) October 20, 2020
TIP: Check Emojipedia or Emoji Dictionary to see how a screen reader interprets emojis in your content.
Make the case for hashtags
PascalCase and camelCase are the love language for screen readers. They make it easier to properly read hashtags. With PascalCase, the first letter of every word is uppercase. With camelCase, the first letter of the first word is lowercase, while the first letter of every subsequent word is uppercase.
The hashtag in the screenshot below is an example of PascalCase:
The Twitter user names and hashtags in the screenshot below use camelCase:
Don’t ‘click here’
Linked text must make sense independent of the surrounding sentences. Instead of saying “click here,” use descriptive copy such as “Check out this post on topic A.” Site visitors will know what they’re going to see if they click the link.
TIP: Descriptive links make it easier for search engines to find your content.
Forgo new windows
When you include a link in your text, allow it to open in the existing window to minimize confusion and avoid a reset of the back button. If you have an overriding reason to want links to open in new windows, provide a warning. Visitors can then decide if they want to leave the current window and, if they do open it, they can find their way back to the original window.
Rethink embedded text in images
Screen readers cannot read the text printed on an image. Only embed important text in an image if you have created explanatory alt text or captions for it.
Make infographics and charts work
If you create an infographic or chart, include a detailed text explanation of the data or information provided in the image.
Directly label your data instead of using only color-coded legends to reduce the cognitive burden on users. That technique also decreases the human reader’s need to scan back and forth to match the legend with the data. The chart below shows the label next to the line for each region (US, Europe, UK, and Asia Pacific) instead of relying on a color-coded legend.
Get to the point in alt text
Be descriptive – not poetic – with your alt text. Don’t include unhelpful keywords. Instead, describe the image in a sentence or two. In a recent CMI Twitter Chat, Alexa Heinrich tweeted, “Most screen readers cut off alt text descriptions after 120 or 125 characters, so avoid posting images or graphics that feature an excessive amount of copy if you can’t write effective image descriptions for them.”
A5: Most screen readers cut off alt text descriptions after 120 or 125 characters, so avoid posting images or graphics that feature an excessive amount of copy if you can’t write effective image descriptions for them. #CMWorld
— Alexa Heinrich (@HashtagHeyAlexa) September 22, 2020
Twitter, Facebook, Instagram, and LinkedIn all allow for custom alt text to be added to images. To learn more about writing alt text descriptions, check out Alexa’s helpful article The Art of Alt Text.
Describe functional images
Websites use images for functional purposes as well as for illustration. Images used as links (including buttons) should include a text alternative to describe its functionality. For example, the alt text for a blue oval with the word “submit” could be “a button to submit a form.”
Fill out form details
Use a symbol such as an asterisk to indicate a required field on a form. Showing the asterisk at the beginning in a different color makes it a bit easier to identify the required fields. On forms you’re asking a reader to complete, add “required” into the coding so screen readers can say “required.”
Delete non-required fields or at least label them “optional.”
This article offers detailed advice on how to create forms that meet WCAG 2.0. standards: Identifying a Required Field With the Aria-Required Property.
Bonus section: Think color
Color may not affect how screen readers interpret your copy. But color can affect readability for people with visual impairments. You don’t need to reconsider your brand’s color palette entirely, but you should rethink how it’s incorporated functionally on your site.
For example, colorblind visitors may not perceive color cues. CMI uses orange to indicate hyperlinks within the text. Melissa pointed out that this color doesn’t meet accessibility standards.
The goal is to make links stand out clearly from body text. Blue works well with dark copy, and underlining links makes them even easier to see. (We’re working on implementing these improvements across our site.)
To choose a more functional color palette, read David Nichols’ article, Coloring for Colorblindness, or this article in Nature.
Some readers have difficulty reading text when there isn’t enough contrast between the foreground and background. You can test the contrast of your color scheme with WebAIM’s Contrast Checker. Another helpful tool to check color contrast accessibility is a11y. This color contrast accessibility validator shows the color contrast issues of a web page or chosen color pair.
You also should pay attention to the contrast ratio for text and images of text. It should be 4.5 to 1 except for large-scale text (at least 3 to 1), incidental text that is decoration or part of a picture (no contrast requirement), and text that is part of a logo or brand name (no contrast requirement). Wouldn’t you want your logo or brand to be instantly readable by as many people as possible?
Ensure that your fonts work well together using a tool such as FontPair, which identifies popular Google fonts that pair well.
We have to do better
Incorporating accessibility into your content marketing strategy is not only a smart legal decision, it gives everyone the opportunity to engage with your brand. We – meaning CMI and the content marketing industry – have to do more to ensure that our content is accessible to everyone.
We’ve started by focusing on screen readers and design for people with visual impairments. But we’re not stopping there. I’ll continue to educate myself and work toward a more inclusive CMI blog.
What did I miss? Please feel free to share what you are doing to make sure your content is all inclusive.
HANDPICKED RELATED CONTENT:
I’d like to thank Melissa Eggleston for taking the time to review my article and provide valuable feedback.
Note: All tools mentioned come from the author. Please suggest additional tools in the comments (from your company or ones that you have used).
Cover image by Joseph Kalinowski/Content Marketing Institute
