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. ​

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.

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.

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.