There is no doubt about the importance of building accessible websites. It is an ongoing topic of discussion in the web design community. And, in my opinion, most designers are trying to get it right.
Accessibility affects us all in one way or another. Whether it’s specific words used in a blog post or the ability to navigate from page to page – it’s important.
But unless you rely on assistive technology like a screen reader, disconnection is possible. It’s too easy to ignore how a particular feature affects users. That is probably because we have not tested it in that context.
I admit that I have a struggle in this area. And I bet there are plenty of other designers who are as well. Given my privilege as a visual user navigating through a mouse, I have not always considered some important aspects of accessibility.
True, I do experiment with automated tools. Ensure fonts are readable, color contrast meets WCAG standards, and images use the ALT attribute. These are all good things. But they do not represent the full experience of using a website.
So how do we take things to the next level? A great way to get started is to test your website with a screen reader. Let’s look at what beginners mean. From there, I will share what I found during my experiments.
Get a Screen Reader App
The first step in the process is to find a suitable app for the screen reader. You may not have to go far, as some operating systems include one by default.
Mac users have access to VoiceOver, and Windows users can take advantage of Narrator. In addition, there are many other options available for almost every OS. From my point of view, I’m going with the NVDA open source app. It’s free to use (supported by donations) and is one of the most popular options.
Regardless of the app you choose, it’s important to have a basic understanding of how it works. In addition, it may be necessary to make a few tweaks in advance. For example, you will want to make sure that you understand what is being read. You may also want the software to highlight content as it reads, making it easier to follow.
WebAIM has compiled a number of handy guides for setting up various screen readers for testing purposes. They will put you in a good position to see how accessible your website is.
Getting around
Now that you have a reliable screen reader ready, it’s time to test! To get a taste of the user experience, try navigating the various parts of your Web site with a keyboard and screen reader enabled.
Some keyboard commands are more universal than others. For example, the TAB A key will take you to various links and form controls, and ENTER it will take you to destination links. Most of them seem to use the arrow keys to move from line to line.
However, there may be some special commands that are specific to a screen reader application. They allow you to navigate between headings, landmarks like headers and footers, etc. For that reason, you will want to check out its documentation.
It is also worth noting that effective navigation of a website in this way requires practice. The first few attempts may be a little awkward. But once you get the upper hand on the various commands, things should become more intuitive.
My Experience with a Screen Reader
To clean the air – I am not a screen reader expert. My knowledge is basic. But my experience with NVDA is exciting.
I used a few pages of my business website as the test ground. And what I found was not necessarily major flaws. The text could be read and the site navigated.
Instead, I discovered some scars – things that would understandably hinder users. Let’s review some examples:
Sliding Insert
In an interview with accessibility expert Taylor Arndt, she mentioned carousels / slide shows as aspects that could hurt accessibility. Testing with a screen reader brings that to the fore.
The automated carousel I used was navigable but I had a bad habit of announcing it every time the next slide came up. This made it very difficult for the screen reader to go far into other parts of the page before interrupting.
I found a pretty simple solution. The WordPress slider plugin I use (Soliloquy) has an option to change the ARIA live region to a less aggressive site. This, along with the use of hand navigation for the roundabout, eliminated the nuisance.
Repetitive Text
Using the ALT Attribution with images is a common piece of accessibility advice. But for decorative images only, descriptive text can be redundant. I ran into this a few different times.
Blog mailing lists were the main culprit. Both the job title and the featured image ALT attributes were identical – meaning that the screen reader read them twice. The result is that even a relatively short job listing creates a painful UX.
The sticky point is that the WordPress mailing list block I used does not have an option to leave the ALT attributes blank. So, a solution solution may be needed.
Discover How Website Accessibility Works to Practice
There is great satisfaction in building websites that comply with WCAG standards – and that’s what we are supposed do as web designers. But that doesn’t tell the whole story just check boxes on a to-do list.
A little extra effort is needed to better understand how others will experience your work. Testing with a screen reader provides a way to gain more insight. And while this may not be a complete guide at all, I hope it will help stimulate your interest and make your experiment.
As I found out, even if an item is considered accessible by a standard letter, that does not mean that it is easy to use. That’s why it pays to dig a little deeper. Perhaps the difference is between a site that is only usable or a site that provides the best possible experience.
Note: As mentioned above, I am a novice when it comes to this technology. If you have screen reader tips to share, please do not hesitate to contact me Twitter.
