Ensuring your website adheres to web accessibility standards is often tested through automated audits and comparisons to WCAG checklists. While effective, this often removes the human element of what an accessible experience provides your users. Using a screen reader to navigate and consume the content on your website often builds empathy in how frustrating the experience can be and what elements can create obstacles in delivering a delightful, accessible experience for your users.
What are some popular screen readers?
When examining your site using a screen reader, ensuring you’re using the same tools your users rely on is essential. If you’re looking for a comprehensive breakdown of tools, I suggest checking out Introduction to Screen Readers. I’ve listed some of the more popular screen readers below:
- JAWS (Job Access With Speech): Information on JAWS | Windows | Paid
- NVDA: Information on NVDA | Windows | Free
- VoiceOver: Information on VoiceOver | MacOs/iOS | Free
- TalkBack: Information on TalkBack | Android | Free
What are common issues screen reader users encounter?
1. Explore your tabbed navigation
Using a screen reader, attempt to navigate your site using only the screen reader. This can be eye-opening even for sites that you feel have a navigation that is accessible. For example, what links in the navigation rely on context clues (adjacent headings, imagery, visual brand identity?). Forcing yourself to navigate your site relying solely on a screen reader can expose critical obstacles that can still pass SiteImprove audits. Smashing Magazine has a great writeup of them using a screen reader to navigate popular sites such as YouTube and the headaches they encountered.
2. Navigation elements not labeled with ARIA
A common issue for screen readers is when they encounter a navigation element that isn’t properly labeled. While most screen readers can interpret text links, there are several cases where a navigable element (images in the main navigation, low-contrast search icon, embedded video play button, search results that load on-page without rendering a new URL, etc.) where extensive use of Aria landmarks (Read: Using ARIA Landmarks or Beginners guide to ARIA) can provide much-needed context for a screen reader that can be taken for granted.
3. Descriptive and clear hierarchy of content headings
While using H1-H6 tags is expected, ensuring heading level tags both clearly convey page structure and are descriptive of their subject matter is vital in communicating to screen readers a page’s content hierarchy. For example, leading your page with an H2 and then having an H1 nested with it can create a confusing experience for users relying on screen readers. After all, relying on headings is one of the primary mechanisms users of screen readers rely on for finding information.
4. Use descriptive link text and image alt-text
While an accessibility 101 item, using generic “click here” or “learn more” when in contrast with the layout of content and relationships with adjacent elements (content grids, etc.), a page full of generic link text (anchor text, aria labels, alt text, etc.) can create incredibly frustrating experiences for screen reader users. Use link text that describes the information the link will provide, such as “View our pricing” instead of “Learn more.” Writing descriptive link texts not only provides a more empathetic, accessible experience, it vastly improves the usability of your site.
5. Create Descriptive <Title> tags
While easily an SEO exercise, ensure that your page titles are descriptive allow users who rely on screen readers to navigate their browser tabs between multiple sites easily. This is a highly overlooked issue with most websites, given most accessibility audits are done in a vacuum, ignoring the typical browsing patterns we all use (multiple tabs open or multiple browser windows open). Trying to navigate three websites whose page titles (<title>) are all some variation of Home, Services, or About Us is frustrating for users researching you and your competitors with several tabs open.
