Screen Readers: Website design for non-visual users

Designing for website accessibility for users with little to no vision, and using Screen Readers

As a user who doesn’t experience any real vision or textile considerations, I find discussions about accessibility within the internet space fascinating. I had never truly considered the experience a non-visual user might have visiting my website with a screen reader, and after attending a webinar recently it’s become one of my biggest arguments for accessible web design.

A few months ago I attended a webinar presented by a near-blind web developer. She offered a chance to experience what surfing the internet is like for someone who uses a screen reader. It was an absolutely mind blowing experience. 

As a web designer who has full control of my sensory faculties, it can be hard to keep other users’ experiences at hand when designing or redesigning a website. The good news is that if you take these things into consideration, you actually end up with a better-designed website that is easier for search engines to find, and often cleaner in code too. 

There are a few options for internet users who have screen readers to help them surf the web. Note I’m basing pretty much all of this article on this one webinar presented by one user, so some of these assumptions may be biased.

Screen Readers

The screen reader provides a really interesting way to looking at your website’s layout. A screen reader uses an “accessibility tree”. This “tree” comes up when the user’s browser recognizes the reader itself.

Your website title is the first thing read by the Reader. Guess what that means? If your website title is “Stephanie Sedgwick”, that doesn’t tell the visitor anything much at all. However, if the title is “Stephanie Sedgwick, web and graphic designer”, that at least tells them what they can expect if they visit my site. But as a visually impaired person, chances are good a “web designer” website is going to be loaded with images they can’t even see.

Even better, maybe you want to have your title be interesting enough to get their attention – such as, “Steph Sedgwick, providing functional, accessible web and graphic design”. That would at least indicate it might be worth their time to click on my website link and actually visit the site.

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

A Different Approach

Divide & Conquer

If you’re visually impaired, you can’t take in a website in “one glance”. It’s just not possible visually, but it’s also an impossible goal with readers. Best you can do is ensure your page is divided into regions or chunks that the screen reader can make sense of. ie., Header, Footer, Nav, Main. This will at least give an experienced visitor a sense of the chunks of the page as well as the layout.

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

One of the biggest takeaways from this webinar was a really small thing that makes a massive difference to overall usability. many of us started removing the label on contact form fields because we felt it interfered with a “minimal” design approach. But if you’re using a screen reader, there is nothing to indicate if they’re on the right section. What if you wanted to send a message to the company whose website you’re on? 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

Another contact form issue is when the post-submission message is not visible, or appears at the wrong time. Imagine how frustrating it would be to get through the data collection form, only to be unsure whether your message was sent or not. If there’s nothing to indicate to the reader that it was successful, or the success message pops up before you’ve hit “submit”, what kind of an experience is that to offer your visitor? Pretty sure they wouldn’t bother to dig up your phone number to call  you and sort it out.

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

How many web designers like to clutter up the sidebar and footer with nifty-looking widgets? Full disclosure, I’ve done it myself. What about a sidebar widget that shows 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.

High-contrast themes

Some websites offer an option to change their theme from light to dark, offering a high-contrast text version of the site for easier legibility. This is a nice function, although not very helpful for non-visual users. One example of this application is tink.uk.

The Experiment

As part of the webinar, the presenter, Leonie, took us on a screen share to test a specific website: mass.gov. This is the government site for the state of Massachusetts, and handles pretty much every information reference an individual or business would need: tax refunds, food stamp programs, your UI benefits, licenses, permits, you name it – if you need to find out how to do something in Massachusetts, that’s the site you need to go to. We listened and watched as she tried to navigate her way to find the Unemployment Insurance application on that website. 

Leonie, a self-described “very experienced” web surfer, followed her reader’s interpretation of the website. The main menu didn’t follow the standard for software “menu”. While she was attempting to figure out where to try finding the information she wanted, a pop-up appeared on her screen. Us sighted users watching her screenshot knew it was a sign-up request, but there were no cues to tell the screen reader how to interpret it. So Leonie was left trying various things to try to figure out what as going on. She tried hitting the Esc button, which brought her to a search form, and without any way to interpreting the visual cues that were being given, she had no idea how to proceed. She ended up giving up and exiting from the website – long after most of us would have given up in frustration. 

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? Try some of my other articles here, and be sure to check out Smashing Magazine in the link below.

Leonie’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.