A screen reader is a tool that reads out loud the text on a computer or device screen for people who are blind or visually impaired. It helps them navigate websites, documents, and other digital content by converting the text into speech or presenting it on a Braille display. Creating content that works well with screen readers is important because it ensures that everyone, including blind and low vision users, can access and understand the information on a website, product or document.
Accessibility NSW often receives questions about how to make your content or service work well with screen readers. The easy answer is to make things clear and simple, like you would for anyone else. However, let's delve further into this. We've gathered some tips for crafting content that's both accessible and compatible for screen readers.
1. Use clear and descriptive headings
When organising your content, use clear and descriptive headings to categorise different sections. Screen readers depend on these headings to navigate and grasp the content's structure. Appropriately use HTML heading tags (H1, H2, H3, etc.) to establish a logical hierarchy.
2. Write descriptive alt text for images
Images are common in online content, yet screen readers can't interpret them. To provide context, add descriptive alternative text (alt text) to images. Keep alt text concise while conveying the image's purpose or content.
3. Provide meaningful link text
Avoid generic link text like "click here" or "read more." Opt for descriptive text that clarifies where the link leads. This helps screen reader users understand the link's purpose without needing to read surrounding text.
4. Keep language simple and concise
Use clear and plain English to effectively convey your message. Complex sentence structures and jargon can confuse screen reader users. Strive for simplicity and clarity in your content.
5. Use proper formatting
Maintain consistent formatting for headings, lists, and paragraphs. Screen readers rely on formatting cues to differentiate content types. Avoid excessive styling, as it may confuse the screen reader software.
6. Create accessible tables
When you design tables, use simple layouts and clear headings. Screen readers use these headings to navigate and describe the table's content. Also, make sure each cell has meaningful text. Avoid merging cells too much, as it can confuse screen readers. By keeping tables straightforward and organised, you ensure that everyone, including screen reader users, can access and understand the information easily.
7. Be mindful of multimedia content
For videos, include transcripts or captions. Transcripts aid screen reader users in accessing content information, while captions assist those with hearing impairments.
8. Avoid automatic media play
Steer clear of auto-playing audio or video when a page loads. Unexpected sounds can disrupt and confuse screen reader users who may not know how to control or stop the media.
9. Test your content
Regularly test your content with screen reader software to identify potential issues. Familiarise yourself with how screen readers interact with your content and make necessary adjustments for better accessibility.
10. Consider keyboard navigation
Some people use keyboards, not a mouse, to navigate websites due to diverse abilities. Ensure all interactive elements (buttons, forms, etc.) are accessible and usable via keyboard shortcuts.
11. Use accessible document formats
Instead of using complex formats like PDFs, opt for an HTML-First approach. Publishing your content as a webpage (HTML) enables screen readers to easily interpret content and descriptions. In situations where PDFs are necessary, ensure they're accessible and accompanied by a HTML version.
Screen reader in action
Check out the videos below to see how a screen reader reacts to what's on the screen and how this affects those who create content.
Transcript
Screen Reader Example.
This is an example of the JAWS screen reader. A screen reader is an assistive technology that takes text, like the document you see on your screen, and reads it aloud dash dash as you can hear in this example.
Learn More.
Visit link HTTPS colon slash slash webaim.org slash techniques slash screenreader slash number how to learn more about how screen readers read content.
Things to Consider. Was that long link a little annoying to listen to?
Definitely!
That's why, instead of the full URL, it's better to use a descriptive link like this one colon link Learn more about screen readers.
You may also have noticed that the screen reader read the words on the screen, but didn't announce visual formatting choices like color, bold, and highlighting. Keep this in mind when creating documents and avoid using visual formatting as the only way of conveying meaning.
Graphic
JAWS screen reader logo 3.05 inches wide by 2 inches high.