Member Sign In

Au’Guest’ Blog Post – How Accessible is Your Website?

Photo of Luke Hay, UX DirectorWritten by Luke Hay, Research & UX Director at No Pork Pies, as part of the Wired Sussex guest blog month

Accessibility is still often overlooked as part of the web design process but should be a crucial part of any design. Accessibility is not just about making sure your website works for disabled people, though this is obviously very important; it’s also about ensuring it works across all different types of devices and technologies.

To get a better understanding of the problem that some people face when trying to use the internet I decided to try to complete four fairly simple tasks on four different websites to see how easy it is to use a screen reader. I chose a screen reader with the ominous name of Thunderstorm which has its own accompanying browser called Webbie.

Screen Reader image

As I only chose to download the free version of the software I had no option of which voice to use so “Microsoft Anna – English (United States)” was to be my reader for the day. Initial tests though showed me that Anna was a bit too keen and read out text from webpages to me at about hundred words per second. A quick tweak of her speed settings enabled me to better understand what she was saying, even if her pronunciation was a bit off (more on that later).

Initially I planned to do this test without using the monitor at all but this proved to be very difficult indeed so instead I improvised to get an idea of how someone who was severely partially sighted might see a screen. Covering the monitor with paper meant that I could see rough outlines of websites and just about make out where the mouse curser was but I couldn’t read any of the text on any of the websites I tested.

No Pork Pies screen reader image

With my monitor fixed to ensure there was no cheating I set about trying to complete the four tasks below…

Task 1 – Read the football headlines on the BBC

As a keen football fan I tend to keep an eye on the football headlines on the BBC website. How easy would this simple task be using a screen reader though? At first this was a really difficult task as there is a lot of navigation on the BBC site BBC Sport image and I started off waiting for this long list to be read out for every page. After about the third page in though I realised there was a “skip navigation” option which could be activated by pressing enter when the option was read out. This saved a lot of time and meant I could get to the main football news page quite quickly. Top marks to the BBC there.

When arriving on the football page though there were a few issues which confused me. To start off with the main story had a small picture above the text. This was, correctly, given an alt tag but the issue was the alt tag was only the player’s name (Marouane Fellaini) which the screen reader read out without informing me that it was actually an image. This meant the story below was read out as “Marouane Fellani live sports day transfers latest” which, without knowing being able to see the photo made things very confusing. People producing content for webpages should use alt tags for each image, but it’s not enough just to do that. The alt tags need to be as descriptive as possible to avoid causing any confusion.

Moving down the list of headlines I encountered an issue with the fairly straightforward looking headline shown here on the right. The screen reader read out the number on the end of this link with no context so I heard “Celtic clinch dramatic Euro win five to seven”. What did this mean? That Celtic had won 7-5?? With the graphic we can probably work out that the ‘527’ is the number of comments on the story, but the screen reader had no way of knowing this, and also no way of distinguishing between the number ‘two’ and the word ‘to’.

Finally, further down the page there was a list of the results from last night’s games. The score line “Accrington 0 – 2 Cardiff” makes sense in context but read out you just hear “Accrington zero to Cardiff”. While I could probably work out what happened here it is not straight forward unless you see the score written down.

Task 2 – Check my email, using Gmail

Checking our email is something we all take for granted and most of us do several times a day, it can crucial for both our work and personal lives so is something that you would hope a screen reader would cope well with. To start off with I encountered an issue when entering my username and password. If you can’t see what you’re typing it’s easy to make mistakes. On making a mistake I pressed the backspace button only for the browser to take me back to the previous (BBC) website. This meant having to start the process again from the start.

After successfully logging in, the first link I was offered was to the basic HTML version of the site. This was a useful shortcut and, I thought, would save me time. However, when I got to the plain HTML page I had to scroll through a LOT of links before I could get to my email. Unlike the BBC I was given no option to skip the navigation so had to wade through several options before I could have my emails read to me. On the plus side though once I got past the navigation it wasn’t actually that hard to compose and send an email.

It’s a lot more work than writing an email using a screen but the process could have been a lot more difficult. I’m very surprised though that Gmail does not offer a Skip Navigation link for users who have screen readers.

Task 3 – Contact No Pork Pies

We had a bit of an unfair advantage with this one as we had recently launched our new site which was built with responsiveness and accessibility in mind. We hadn’t really done much in the way of accessibility testing though so this would be a good test of whether our designers had covered all the bases.

One of the first things that stuck me was how bad some of the pronunciation from ‘Anna’ my screen reader was. The name ‘No Pork Pies’ became, rather bizarrely, “no pork peas” and the word ‘blog’ was pronounced as “blah”, which is perhaps appropriate for some blogs, but hopefully not ours!

The actual navigation and contact form filling was quite straight forward though, which was a relief. During the testing I spotted a few areas that could do with improvement though so we’ll be making some changes to the site in the next few days. One example is having links from both icons and text beneath them. This makes sense when you see the full version of the site but on a screen reader this just leads to the same link being repeated.

screen reader screenshot

Task 4 – Find a Web Designer job on Wired Sussex

The current Wired Sussex site was built with accessibility in mind. This was a few years ago now though(!), so I thought it was worth testing how accessible the site is now. One of the most popular features of the site is the job search, so I decided that my task would be to find a web design job and read the details of it.

screen reader browser image

This task turned out to be one of the easiest of the four. The site allows users to skip navigation on each page meaning that they can get straight to the content that interests them. Finding my web design job was such an easy process that I decided I’d also attempt signing up for job alerts to test the accessibility of the forms on the site. This was a slightly more difficult process but only because there is quite a lot of information to fill out. I managed to sign up with no problems despite the fact that it took me about five times as long to do so than if I’d been able to see the page.

In Conclusion

Using the screen reader gave me an insight into the difficulties that people with severe issues with their vision encounter every time they use the internet. I’m sure the more you use this type of screen reader the easier it gets, but I was still very thankful to be able to be able to go back to using a visual browser. Of course there’s a lot more to accessibility than just screen readers but if you build websites then I recommend downloading some screen reading software and trying it out to see just how difficult they are to use.

People who build websites have a responsibility to make them as accessible as possible to all their visitors and spending just a small amount of time and effort on this side of things will making using your website a lot easier for people who have accessibility issues.

About the author