Screen Readers: Website design for non-visual users

Updated Jan 6 2024 to add simplicity

As a user who doesn’t experience any real vision or textile considerations, I find discussions about accessibility within the internet space fascinating. The world of web accessibility is mind-blowing, especially when considering users who rely on screen readers. Attending a webinar by a nearly blind web developer offered an incredible perspective into their online experience. 

As a designer without these challenges, it’s easy to overlook such users’ needs. Yet, incorporating accessibility considerations not only creates a more user-friendly website but also improves SEO and enhances code cleanliness. My insights are largely based on this single webinar, so some perspectives might be influenced by that singular experience. It’s also important to remember that just as disabilities are diverse, so are the users who have those disabilities. The experience of one user who has a disability is not going to be the same for all users with that type of disability.

Screen Readers

The way a screen reader interacts with a website offers a unique perspective. It starts by reading the website’s title, which holds immense significance. A vague title like “Steph Sedgwick” doesn’t provide much insight, but adding descriptors like “web and graphic designer” helps set expectations for visitors. Yet, for visually impaired users, a title focusing on visual elements might not convey the essence of the website effectively. 

Crafting a more relevant and informative title like “Steph Sedgwick, providing functional, accessible web and graphic design” offers a clearer idea. This is much more explanatory, and allows visitors to decide whether to explore further.

The image here is from Speckyboy.com. Check out the related article here: https://speckyboy.com/myths-about-how-blind-people-use-the-internet/

from Speckyboy.com: David Ball blindfold testing websites

A Different Approach

Divide & Conquer

A visually impaired user doesn’t have the luxury of perceiving a webpage at a glance. Instead, they rely on screen readers that divide the page into discernible regions like header, footer, navigation, and main content. These divisions provide a structured overview of the page’s layout, enabling users to navigate and comprehend the content in manageable sections.

List Element

A “list element” will tell screen reader what’s there (ie. “list of 12 items”, ordered or unordered). This can be really helpful if your main menu has a drop-down function. Your visitor can’t see the little notch indicating that there’s a drop-down menu to be found, so they certainly can’t hover their mouse there. And a screen reader needs to be able to recognize that element in order to describe it to the visitor.

Contact Forms

For users relying on screen readers, having clear and descriptive labels for form fields is essential. Labels provide context and guidance, ensuring users understand where they are within the form and what information each field requires. Removing labels might offer a cleaner visual appearance, but it can significantly hinder the accessibility and usability of the form for those using screen readers.

You may be successful in tabbing your way over to the form, but what if you accidentally hit tab too many times and don’t realize it? If your screen reader can’t tell you that you’re on the last name field rather than the email field, you’re going to have a really hard time entering any information into the form collection.

Submit Buttons

Picture this: You fill out a form online, and when you hit “send,” there’s no message saying if your message went through. Or sometimes, the “success” message pops up too early. It’s like a mystery—did your message actually send or not? That’s not a great experience for visitors. They might not bother calling you to check; they’ll just move on.

Too many H1 tags

If you can’t visually scan a page to see what it’s trying to tell you, you need to rely on the html markup to have your reader interpret it for you. If you have H1 tags all over the place, it makes for a very confusing experience. Where’s the important info? What are the different sections?

Sidebars and footers

Sidebars and footers are often cluttered up with nifty-looking widgets or extra information that isn’t all that relevant to a user. That includes lists of recent blog posts, category links, share links, newsletter signups, graphics that don’t include any alt text, ads in the sidebar, “Quick Summary” which aren’t quick at all when you’re not sighted.

The Experiment

During the webinar, the presenter, Léonie, showed us how she uses a screen reader to explore a specific website, mass.gov. This is a government website for Massachusetts that covers lots of information like taxes, food programs, and permits. She was trying to find the Unemployment Insurance application. Even though she’s very experienced with using screen readers, she had trouble navigating the site. The main menu didn’t work as expected, and a pop-up appeared without any clues for the screen reader. She tried different things but couldn’t navigate out of the pop-up, and eventually left the website. 

Edge doesn’t support html a11y. But don’t discard it – and Internet Explorer – too quickly; the reality is that there are a lot of screen reader users that are still on older versions of reader technology that rely on IE. Other browsers, however, are pretty good, and many offer extensions that you can try. You can also test a variety of screen readers to really help you understand your web user experience. There are readers available on a few platforms including Windows (open source readers such as NVDA and Firefox), Mac (voiceover only), Android (Talkback), and Apple devices (Rotor). 

Best tips for designing accessible websites

Guess what? For sighted developers, testing doesn’t have to be complicated. Try this handy tip: cover your screen. Or just turn it off. You don’t actually need to use screen readers to get a sense of what your site “looks” like! That will help you to “see” what kind of experience your website actually offers for non-visual users.

When in doubt, KISS. 

Keep It Simple, Stupid.

Really, we don’t need to say anything else here. But if you’re still reading this, then consider these basics:

Field Labels – If you’re thinking about removing field labels because you think it clutters up your design, think twice – what other functions might those labels serve? Is there another way you can clean up your forms and still keep the labels there?

Media Players – Play/pause buttons can be really tricky for non-visual users to understand. This makes perfect sense to me, because even as a sighted user an automatically playing video can cause instant anxiety while I madly click around trying to find the way to shut it off. If the volume is on, it’s even more anxiety-inducing. It’s awfully similar to my reaction to alarm clocks, actually. Autoplay = OFF!

Handy Tools – There are also some browser screen readers that can be of some help to us sighted developers and designers. At the time of this writing, Chrome offers an extension called ChromeVox. For desktop users, this screen reader is also found in Chromebooks. Although it’s not commonly used by people with vision impairment, it can be a useful pairing for testing purposes. For more info about readers, try www.accessibility.org

Interested in more? We offer a library of accessibility simulation videos, just contact us for a link.

Léonie’s webinar was so useful on promoting accessible usability, it is now available for free on smashingmagazine.com/2019/02/accessibility-webinar. I highly recommend it for anyone, not just web designers and developers.

2 thoughts on “Screen Readers: Website design for non-visual users”

  1. Thanks for the post Brightwebber, these are some great tips for freshening up old websites too. Ive recently entered the web design space because i was laid off due to covid 19. I’ve been researching a lot about designing with SEO in mind from the start instead of trying to add it on later. It’s an interesting industry. Now that Ive got my website off the ground, I’m finally ready to start my first web design job lol 🙂
    Thanks again
    SwiftyWebs
    John

Comments are closed.

Scroll to Top

Grab our WordPress Workbook

Download your copy now.