Tag: UX

Common web accessibility issues for a user with a visual impairment

Have you considered how your content might be consumed by a user with a disability?

A student with a visual impairment got in touch to say they were experiencing difficulties using certain form fields. I wanted to explore this and used it as an opportunity to run some testing with the user on common journeys on the website.

The testing was enlightening and gave some valuable feedback which we’re using to make adjustments on the website. The user highlighted several common issues they experience daily which I thought would be valuable to share.

Magnification

As you might have expected, increasing screen size across any device was a must for the user. If you or I wanted to see something more clearly when browsing the web, we’d probably zoom right? This works for us, but it isn’t necessarily how users with a visual impairment would do it. The user who tested with me uses screen magnification instead, commonly between 200-300%.

The difference is screen magnification enlarges the whole screen but maintains the aspect ratio. This takes parts of screen out of the viewport horizontally. Whereas zooming within a browser like Chrome the width of the screen stays the same and content stacks vertically.

The following screenshots illustrate the difference. The left is the magnified version and right is zoomed. You’ll notice on the zoomed version the logo, navigation and primary navigation are visible, but in the magnified version these are now out of the viewport. ​

Screenshots showing the comparison between zooming and magnifying a webpage to 200%

Magnification of the entire screen means horizontal scrolling comes into play. More complex layouts with text next to imagery can cause difficulty when only a portion of content is visible at any one time.

Take the following example, in the magnified version on the right, the user can’t tell there is text to the side of the image and could easily miss it.

Screenshots showing how web content with an image and text side-by-side is different when viewed at 100% and magnified by 200%

You can try out the difference between zoom and magnification yourself. Here’s how to do it on Windows​ and Mac.

On Windows, use Control with + to zoom in and Control with – to zoom back out again. Now use the Windows button with + to toggle on the magnification tool. Then use Windows with + to magnify and Windows with – to reduce in size.

On a Mac, you can zoom using Command with + and – to zoom in and out. For magnification, you will have to enable the “Use keyboard shortcuts to zoom” feature (yes, I know it says zoom rather than magnification) in your Accessibility preferences under System preferences. Once you’ve done that, toggle the feature on using Command with Option and F8. Then use Command with Option and + to magnify and Command with Option and – to reduce.

Screen readers

A screen reader is an application that assists users with consuming content, converting it into a medium which visually impaired users can digest easier. The user regularly uses a screen reader to help with using the web, but particularly on mobile devices where screen size is so small.

Key information can be hard to pick out in text-heavy content. Long paragraphs are difficult to process, particularly on mobile devices. Concise copy that gets to the point and is easier to consume for all users but particularly those with a visual impairment. This is also where accessible content like the correct use of headings and link text is crucial.

Try to consume some of your content using a screen reader on mobile and see how it works. These applications come as standard on iPhone and Android. On iPhone you need VoiceOver which can be found under Settings > General > Accessibility and on Samsung Android it’s Voice assistant under Settings > Accessibility > Vision.

Colour/contrast

In the use of colours, contrast is the major factor. Thin text wasn’t an issue for the user if the contrast is high enough. Even if the text can’t be made out, the contrast would let them know something is there. This allows them to tap for their screen reader to kick in or magnify the screen further.

Contrast with backgrounds is different. As this isn’t displaying information, a subtle difference between a white and a grey is often enough to indicate a change of state. The user mentioned that the zebra striped tables we use are very helpful. When the screen is magnified, only part of a table is visible, the change in colour despite being slight helps them to follow a row when scrolling horizontally.

Example showing how tables on the derby.ac.uk appear when the screen is magnified
Screenshot showing how the entry requirements table on a course page looks when the screen is magnified

In summary

Observing how different users consume your content will provide valuable insights that can help shape what we do. I’d encourage you to take half an hour to try magnifying your screen and using the screen reader on your phone.

If you’re interested in reading more on this subject, I’d recommend this blog by a software engineer from the BBC who writes in detail about his experience using the web for a day with a screen reader.

The Curse Of Knowledge

Have you ever played a game of charades at Christmas and been frustrated by your team-mates’ inability to guess even the simplest of your acting efforts? Have you ever tried showing somebody how to perform a simple task in Word and been wound up by the fact that they just can’t seem to grasp it, no matter how simply you explain it?

Congratulations; you’ve just been visited by The Curse of Knowledge.

The Curse of Knowledge is a cognitive bias inherent in all human beings which, in a nutshell, means the more familiar you are with something, the harder it is to put yourself in the shoes of somebody who isn’t familiar with that thing.

The term was first coined in 1989 Journal of Political Economy article by economists Colin Camerer, George Loewenstein, and Martin Weber. In 1990 an experiment by a Stanford graduate student, Elizabeth Newton illustrated the curse of knowledge by the results of a simple task. A group of subjects were asked to tap a well-known song with their fingers and to predict how many of the group would guess correctly. It was found that the tapper would always overestimate the number of correct guesses, by a very large margin. This simple experiment has far-reaching ramifications; in effect, it means that it is almost impossible for somebody with knowledge of a thing to accurately predict the actions or outcomes of somebody who does not have the same knowledge.

As digital marketers and web developers the Curse of Knowledge has huge implications for the way we design and develop. We design and plan based on our expected or desired outcomes, but everything we do is biased by the fact that we already know what the desired outcome is. It is almost impossible for us to predict how our users and customers will react because we cannot “un-know” this knowledge and we will always suffer from this cognitive bias. Users will behave in unpredictable ways because they don’t know what you know, there will be things they don’t understand that seem very obvious to you.

What can we do to combat this natural prejudice? Trying to think like a new user or customer is impossible; your brain won’t allow you to. No matter how hard you try, you cannot un-know what you know, and it will always, always, taint your judgement. The only way to counter this effectively is with extensive user testing. Make no assumptions and no predictions. Build, test, feedback, iterate. If you can afford the services of a professional user-testing organisation, you may find this a worthwhile expense, otherwise you can perform smaller scale testing with your own customers, perhaps through the use of site surveys and session recordings – although bear in mind that your customers may suffer from the same biases as you do, ideally your test subjects should have as little exposure to your testing environment as possible. The most important thing is not to “go with your gut”, because your gut is cursed.

Look out for my next post where we’ll be exploring some common User Testing techniques like the 5 Second Test and Blur Testing