Screen readers are software that convert text to audio or braille. Contrary to popular misconception, they’re not specialized web browsers: They work alongside web browsers and other applications to present content.
While screen reader technology has come a long way, it’s not perfect. Programs like NVDA (NonVisual Desktop Access) and JAWS (Jobs Access With Speech) rely on accurate markup. If a website doesn’t provide that markup, the user experience suffers.
That’s especially frustrating when the content is repetitive. Imagine that you’re reading a paragraph, only to realize that the next paragraph is exactly the same. What would you think about the content creator?
You’d recognize, accurately, that they didn’t double-check their work. That’s what screen reader users might think if your website has duplicate alternative text (alt text) tags, redundant hyperlinks, and misused WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) markup.
Think about screen reader users when creating alt text
Screen reader issues often occur when the creator prioritizes the “rules" of accessibility over the actual experiences of users. For example, you want every image to contain alt text — and that’s a great goal.
But you also want that alt text to present useful information to your readers. If the image has an accompanying caption that explains its content, you might not even need alt text; the caption provides plenty of info.
To that end, you should follow a few simple rules when writing alt text:
- Never use phrases like “image of" or “picture of.” Screen readers will tell the user that they’re viewing an image, so you don’t need to remind them.
- If images have captions and alt text, make sure that they’re not redundant. For additional guidance, read: Should You Include Alt Text for Pictures with Captions?
- Keep alt text concise and descriptive. Imagine that you’re describing the image to a friend over the phone: What information would you include? What information would be unnecessary for understanding the image’s purpose?
Redundant alt text is a particularly big problem for screen reader users, so follow the best practices when tagging your images. Remember to think about the user — while fulfilling the Web Content Accessibility Guidelines (WCAG) is important for digital compliance, your goal is to create content for real people, not to check items off of your to-do list.
Pay special attention to redundant hyperlinks
Redundant hyperlinks occur when multiple links appear alongside and point to the same address. That’s confusing for readers: They may not know which link to activate, and they’ll need to visit both websites (or listen to the full URL identified in the HTML) to confirm that the links are truly redundant.
Frequently, redundant hyperlinks occur when a text link appears next to a visual link (such as a linked image, icon, or button). When this is the case, you can resolve the issue by combining adjacent image and text links and using a null text alternative for the image.
For more detailed guidance, read: How Redundant Links Impact Accessibility.
Redundancy can also occur due to misused ARIA markup
WAI-ARIA (often referred to simply as ARIA) is a powerful tool for identifying elements that cannot be defined with native HTML.
ARIA is specifically intended to improve accessibility, and it’s essential for some types of content. However, it’s not always necessary: The first rule of ARIA is to avoid using ARIA — if you can use native HTML to define semantics, use that instead.
Unfortunately, many well-meaning developers use ARIA simply because they want to do something to enhance accessibility. They may add roles to elements that have already been defined.
For example, if you’re using an <a href> tag for a hyperlink, adding role="link" isn’t necessary. Some screen readers will simply ignore the ARIA role, but others may announce the link twice.
If you’re committed to using ARIA, make sure you’re testing your markup regularly. Ideally, your audits should include hands-on tests with screen readers, performed by accessibility experts who have experience with assistive technology.
For additional guidance, read: Don't Use ARIA to Fix Broken Semantics
While repetition can be frustrating, it’s occasionally better than the alternative
Screen reader output varies depending on the user’s web browser, screen reader application, operating system, and other factors. In some cases, it’s defensible to provide redundant information via ARIA, just to ensure that every user is able to access your content.
But in most situations, you can avoid repetition by simplifying your markup and sticking with native HTML. Learn to approach your content with an accessibility-first mindset, and you’ll be able to find effective solutions.
If you need assistance with a specific accessibility issue, we’re here to help. Learn about the Bureau of Internet Accessibility’s four-point hybrid testing methodology or send us a message to connect with an expert.
