Tips to Improve Website Content for Screen Readers
Lisa Dougherty
Marketing Leader | Content Marketer | Brand Storyteller | Digital Strategist
Is your blog functionally inclusive?
I’m working with the Content Marketing Institute (CMI) team to improve the blog.
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.
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.
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.
“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:
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.
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.
Accessibility is a big topic. Read the full length version for seven more tips.
Content rocks! Currently Director at Cloudflare. Alumni of Twilio and Salesforce.
2 年We’ve been digging into this too at Salesforce. My ah-ha moment came when a visually impaired individual showed us how he tries to order a cup of coffee from Starbucks. It would drive anyone nuts! My biggest lesson was the headings - how much architecture matters for both technology (search engines and screen readers) and humans (how we skim, find things, and use the hierarchy to find what we need). Headings have taken on a whole other meaning for me. And, don’t forget to look at the alt text of your images. Is your alt text describing what is being shown or just trying to be catchy text? And last but not least, infographics. Screen readers can’t read them, so make sure the text copy also talks about what’s in the infographic. Erin Carlyle Karen Milne any other thoughts?