Assistive tech familiarisation: Vision impairments

A look at some of the assistive technologies and setting out there to help those with vision impairments or blindness.

What are 'vision impairments'?

Disabilities or impairments that affect sight are extremely common.

Think beyond 'blind' — All of us are likely to encounter vision issues as we age, and there are a huge variety of conditions that may affect sight and cause someone to lean on assistive technology.

• Near/Far-sightedness
• Peripheral vision loss / Tunnel vision
• Strain from looking at screens
• Blurred vision (sometimes known as 'refractive errors')
• Age-related degeneration
• Cataract
• Diabetic Retinopathy
• Glaucoma
• Amblyopia (also called “lazy eye”)
• Strabismus (known as cross- or turned-out eyes)
• Blindness (a spectrum)
• Color blindness (in various types)
• Temporary conditions like eye infections

Plus many more!

No two impairments are the same

Remember, even blindness is not an absolute. It is a spectrum. Blind people can usually see something, and which assistive technologies (if any) they choose to use, and in what combination, will vary from person to person.

With vision issues in particular, those who need them will often be hybrid users of several technologies and approaches. One is rarely used exclusively over another.

No two people with disabilitis are the same, even if they have the same diagnosis. Humans are complex. We're a combination of genes, upbringing, experiences, abilities, and circumstances... Just as people cannot be seen in neat simplistic terms, nor can disability.

Let's also remember that assistive technology is exactly that. Assistive. You don't have to have a disability to use or benefit from it, but some people are reliant on these technologies because they are the difference between impairment and complete exclusion.

It's not physical or cognitive impairments that make someone "disabled". People become "disabled" by poorly designed environments that lack the adaptations needed.

It's up to us FEDs to improve our awareness and understanding so we don't create barriers that block people with our code.

You are not your users

Although it's highly valuable for developers to gain experience using assistive technologies — nothing can replace real testing by those who genuinely rely on assistive technology every day.

That's hard to organise, I know.

But an important step is welcoming feedback in the first place and being willing to fix issues that are pointed out to you.

Assistive tech time!

Now let’s look at a few tools available to us.

Familiarity with assistive tech should be empowering to us all, but especially developers, as it will help us test our solutions properly and be more aware of what we’re looking for!

In-browser Zoom

Ctrl + Plus/Minus is a quick shortcut for this in the browser.

This is also a good way to test the responsiveness of your site as it should adjust into a mobile layout on desktop as you zoom.

Screen magnification

Note, this is different to the zooming you do in the browser!

I think this one is important to go into some detail on, as so few developers seem to be aware of it. Screen magnification is heavily used by blind or partially sighted people in particular, so it's important we know about it.

Magnification on a Mac

To turn on screen magnification shortcuts on a Mac
System Preferences → Accessibility → Zoom

Then change the settings as you wish (e.g. I have "Use keyboard shortcuts to zoom toggled ON)

I actually use this all the time day-to-day! I only use the main screen magnification when testing, but use 'Hover text' regularly because I find it helpful to enlarge text as needed.

My active shortcut is holding down ⌘ while hovering over the text I want to enlarge.

Changing browser text size

This effectively changes what 1rem equates to in the browser. So if responsive units and layout approaches have been used correctly, the site should respond well.

⚠️ This is what breaks if you set your font-size, letter-spacing, or line-height in pixels! It's an essential requirement for accessibility compliance:

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

WCAG 2.1 Success Criteria 1.4.4 (level AA)

It is OK if this leads to horizontal scroll, as long as everything is readable and functionality maintained.

Change OS text size

It's very common to change OS text size on mobile devices. It's even more common how many apps then stop working because they've not been tested properly!

Color modes: Themes

It's increasingly common for sites and apps to offer dark and light modes. Some also change this automatically based on the time of day.

High contrast and colors

The contrast and display settings are super useful! There are a lot of them though, so I encourage you to browse around your machine or device to see what each one does.

Devices like iPhones are particularly good at including descriptions with each control.

A few examples to try:

• 'Increase Contrast' or 'High Contrast Mode'
• Invert colors
• Filter colors

(Apple includes options for specific types of color blindness too, I'm not sure about Windows)

Keyboard

It is essential that a site works for keyboard users, and this affects many more people than those with visual impairments.

Always check your site functions as expected with keyboard.

You will also need to become aware what keystrokes are expected for different UI patterns. E.g. You would use arrow keys to move between radio inputs, but tab to move between text inputs. This takes time, but is very easy to learn!

I encourage you to start practicing using sites with your keyboard ASAP.

Screenreaders, Braille and Voice Control

I'm not going to cover these properly now, as this post is already long enough! I'm planning some upcoming posts about these anyway.

In the meantime, here are some useful resources to get you started:

Hardware

As well as all the device and system settings I've listed, there is physical equipment that can help with vision impairments too. For example:

• Large screens
• Curved monitors
• Coloured overlay screens
• Glasses
• Magnifying glass

And probably loads more I've not mentioned!

What to do with this information

I’m not suggesting you use all of these settings, tools and techniques daily (unless you have to). But dip in to them!

At a minimum, you should be testing zoom to 200%, and ensuring color contrast ratios meet WCAG AA minimum requirements (including focus outlines).

⭐️ Please see the glossary page if you've not heard of WCAG before!

Links to learn more

• How blind people use the web

• WCAG 1.4.4 Resize Text

• WCAG 1.4.3 Contrast Minimum

• Checklist to meet text Resize, Reflow and Zoom requirements

• Accessibility Requirements for People with Low Vision
  (Note: This links to the Editor's draft 2021)