My Initial Experience with a Screen Reader
As a new web developer, I have been learning to make my sites visually appealing but still be accessible, and all-in-all, it’s been going decent. I’ve been including cool icons in social-media navigations, but have been sure to include aria labels in their tags; I’ve been wrestling with getting my images to size properly, but have been sure to give them descriptive ‘alt’ text. For the most part, it has been straightforward. But despite knowing these best practices, there was still this part of me that was curious about what was going on under the hood, about how my websites could be experienced by someone with visual impairment. I needed to hear it for myself.
So I downloaded a screen reader and tried the thing out, to actually experience how the internet could be navigated in a different way. This blog post is just a little report on what I found during my initial interactions with the screen reader. It is in no way a tutorial, but is mostly my musings and takeaways from the experience.
As a Windows user, I got the NVDA (NonVisual Desktop Access) screen reader, which is made free from NV Access, a not-for-profit organization made to support the development and upkeep of the software. I was lucky to find a great introduction tutorial by Rod Dodson, who, by the way, has a wonderful series on YouTube called A11ycasts detailing different facets of web-development accessibility.
With it downloaded and ready to go, I opened it up and had the welcome menu pop open. Instantly, I became very aware of my mouse’s movements, because NVDA was reading out anything the mouse was hovering over. So if you sweep it over a paragraph quickly, it will try to read each line, only to have each attempt interrupted by the mouse moving onto another line. I quickly learned the ctrl key could briefly silence the narrator, allowing me to move onto a webpage without needlessly hearing certain things along the way. Though I would be using the mouse a bit, I largely wanted to try to learn how to use the keyboard for navigation more, because — quite simply — I had heard so much about the tab key being used a lot, with regards to focus states.
I decided to go to Wikipedia, a nice simple page where I could take my new NVDA for a test drive. The first thing I really started to deeply understand was how linear the web site was from the screen reader’s perspective. With the keyboard as your navigator, you can only go forwards and backwards (e.g. tab or shift + tab). With the luxury of sight, however, there is an incredible amount of flexibility and privilege by having your eyes be able to dart around the screen at an incredible speed. But more than this ability to look around the screen, there is the ability to interpret things based on their colour, size, shape, and location. From the NVDA’s perspective, on the other hand, things can only be interpreted based on their text, hierarchy, and order. The text part is just the text content that is read out. But the ideas of hierarchy and order can be further explained with two keyboard keys: H and tab.
H is for Hierarchy
Hierarchy is about navigating through a website’s headers using the H key. If you keep pressing H, you will be taken through each heading name and then the heading level will be recited. So if I’m on the Wikipedia page for Accessibility and press H, it will read “Accessibility Heading One” and then I press it a couple more times, and it reads “Legislation Heading Level Two”. I can hear that the content and it’s role are important. Visually, a header’s importance is communicated by its size and sometimes by its font-weight or colour. But with the NVDA, it’s all about the number hierarchy. In one of Rod Dodson’s videos, he mentions that navigating through headings when first visiting a site is one of the go-to methods for people using assistive technologies like a screen reader. So this is key: your HTML markup has to have a logical hierarchy with headers, because they are a great, practical way to quickly navigate through a website and understand what is on the page.
Order another and put it on my tab
The idea of order can be best explained with the tab key. This key will take you through every interactive element on the page (e.g. links, buttons, forms, etc.). This can be a little more monotonous because if you’ve ever been to Wikipedia, you know there are, well, a lot of links. Like the headings, the links are recited with the link’s name and the word ‘link’ or ‘visited link’ right after. While listening to certain links being read out, I noticed that if the anchor tag has a ‘title’ attribute, that will be read out, too. It’s sort of like a little elevator pitch for why you should click on the link. For sighted users, this title-attribute text can be automatically accessed by hovering over the link, but it somehow feels less salient than it being read out. It certainly made me realize I should try to include this attribute a little more in my own projects.
Ultimately, the tab key really drove home that the order of all interactive elements in your markup needs to be correct. If one link has been absolutely positioned in an erratic way with CSS, the change in location must be reflected in the HTML, because with the screen reader, you’re either moving backwards or forwards.
I’d like to finish this brief exploration by saying that in some ways I prefer the experience of the screen reader. I describe it as linear, but I don’t say that in a bad way. Visually-speaking, lots of websites are quite busy and bloated with colours and odd layouts and tons of different things trying desperately to grab your attention. Sure, I can glance around the screen quickly and try to take it all in, but the reality is that I can’t take it all in and it quickly becomes exhausting. With the screen reader, it felt like a much more intentional, direct, simple way of getting information from the web (assuming the websites were accessible, mind you). But this is just to say that the ultimate takeaway is that simplicity should always be prioritized and treasured, and the heart of that starts with making sure your HTML has a strong, logical foundation.
Try it for yourself
Head over to NV Access and download the NVDA screen reader to experience the web in a different way. Enjoy!