Browsing websites at different screen sizes is a hot topic at the moment, but let’s not forget that it’s not just mobile users that experience websites differently, blind users experience them in a way you might not even realize.
So I started using a screen reader to see (I suppose I should say “experience”) how a blind user navigates a website. First I want to say accessibility isn’t completely new to me. I’ve been creating W3C valid websites for years, building to web standards, and always taken care to make sure all my images have alt tags, and any Flash has an appropriate text alternative.
However, when I started using a screen reader, I learned quite a lot.
1. A screen reader reads the entire desktop, not just the browser.
Somehow in my ignorance I assumed the screen reader was just the browser, but it’s not, it’s the entire operating system experience. From turning your computer on, you need to navigate using keyboard commands to the browser and open it.
If anyone tells you that a good way to experience websites as a blind user is to use obscure browsers like lynx or w3m (as someone tried to tell us on our Facebook page), just remember that it’s unlikely you’re getting the same experience as the majority of blind users.
2. It’s difficult
The learning curve is steep! Getting to know the keyboard shortcuts just to move around the page is difficult, as is remembering where those keys are on your own keyboard when you’re blindfolded! Oh yes, I did blindfold myself for the full experience, not at first, but gradually once I became more confident I knew what I was doing. Often I would navigate myself into a corner or option that I was unfamiliar with though, and had to take a peek to discover what had gone wrong.
Here’s a sample of what happens when you navigate to a page using a screen reader, it starts to read out every piece of content on the page, and I mean EVERY piece of content, and doesn’t stop until it’s melted your brain and the words merge together into a sea of electronic voice. If you want, you can listen to the entire page, but I learned from this screencast by visually-impaired user Robert William that it’s actually much better to wrestle for the control and navigate through the content yourself. Be prepared though to be baffled by hundreds of links and headings before you even get to the page content, or the link you want.
3. It’s different between browsers
The most popular browsers for blind users (according to WebAIM in May 2012) in Internet Explorer 8 (30.4%) and 9 (28.5) and Firefox (20%). My favourite browser is Chrome, which I started using, but soon realized the experience was very different between browsers, so switched to Firefox which actually does a very good job of accessible navigation.
It was when I viewed a page created by accessibility researcher Sina Bahram to demonstrate good accessibility that I discovered that Firefox automatically adds a landmark HTML5
<nav> elements without having to specify an ARIA role. I asked Sina why he didn’t add a
role="navigation" to the element, which I thought was standard practice, and he replied:
When there’s an actual HTML5 element to do the same thing, I tend to use the element. More semantic.
He’s right, but of all the browsers I tested, this only created a landmark in Firefox.
There’s a video of Sina demonstrating accessing the web using a screenreader here.
4. You have to learn to listen fast
I once realized when watching a DVD on my PlayStation 3 that you can set the speed to 1.5x. Which means you can finish watching a 2 hour movie in only 1hour 30 mins and still understand what’s going on. “That gives me 30 minutes of life back!” I said excitedly at the time, and started to fry my brain listening to their speeded up chipmunk voices. Of course I couldn’t take the unnatural high speed pace, and changed it back to normal pretty quickly. But that’s nothing compared to the speed Sina Bahram listens to his screen reader (see the first 40 seconds of the video linked above).
Even at a relatively casual pace though, it’s a lot of information to take in at once and often I would have to go back and listen again to the page options I’m given.
5. Some popular websites are very difficult to use
I also tried Amazon.co.uk, but couldn’t get off the homepage which had over – wait for it – 1,000 links! But it was very difficult to navigate to the main search box to search for an item (I actually thought it was impossible for the first few times I listened to the page, before finding it nestled between two other options), and had absolutely no ARIA landmarks. Very disappointing. A quick chat though with a blind friend of mine convinced me to use the much more accessible mobile site which worked much better. Still, a very aggravating experience that I had to find and use the mobile site instead, something I wouldn’t have done without experienced user knowledge.
6. Link titles aren’t helpful
This is one of the most surprising things I found actually. I’d always assumed text added to a link using the
title attribute was read aloud by a screen reader instead of the link’s normal anchor text, allowing you to write useful information about the link’s destination. But it turns out, it’s not used at all. Ever. Except the rare time there’s no link anchor text at all. So any supposed ‘useful’ text written in a link’s title attribute is completely inaccessible to a screen reader.
So don’t assume you can get away with plain links like “click here” or “read more”, and provide descriptive title text, because it’ll never be heard.
I even asked HTML expert Jeffrey Zeldman on Twitter if there’s any reason to use the
title attribute at all, and he replied “No! Do not use.”
7. Autofocus is annoying
8. Being W3C valid means jack
I’ve always sought to make my websites pass the W3C validator, but even with a big shiny green tick, you’ve barely even begin making your site accessible. I know there’s only so much you can look for in an automated test, but there’s a vast amount you can do to make your website a better experience for blind people that can only be discovered by real user testing.
9. It’s easiest to navigate using headings
After hearing so much talk recently about ARIA landmarks, and the enthusiasm for semantic HTML5 elements, I expected there to be a way to navigate straight to different sections of a website quick and easy. Especially with elements like
<footer> I thought I’d be able to skip to these elements quickly. Well, you can – if every website had them. But surprisingly so many don’t, neither do they have the ARIA landmark roles, like
role="main" for the main content, or
role="navigation" for the site’s main links.
What I found myself doing mostly was either the laborious process of reading through each piece of content, or skipping to the next heading, which was much more reliable than searching for non-existent landmark roles. At least most web developers use headings correctly, which is why this is the only reliable method of navigation around a page.
10. Blind people are very good at keeping their rage under control
What I really mean by this last point is, it’s frustrating. Having to listen to a billion links as they whiz past your ears takes a lot of concentration, and is incredibly infuriating if a lot of them are unnecessary.
It’s clear most websites don’t cater for blind people, presumably just due to a lack of testing or maybe just the harsh reality that they don’t have enough time to cater for such a small portion of their audience. I think we’ve got a moral obligation however to help blind users navigate the web, and having experienced it myself, make it a less hideous experience.