Skip to main content Skip to navigation
All Posts All Tags

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 disabled people 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 be disabled to use or benefit from it, but some people are reliant on these technologies because they are the difference between impairment and complete exclusion.

Someone is not automatically disabled because of an impairment. They become disabled because of 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)

A screenshot of the mac zoom settings (OS Ventura)
Caption: Zoom settings on a Mac
A screenshot of the mac zoom advanced settings (OS Ventura)
Caption: Advanced zoom settings on a Mac

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.

Hover text demo with settings text enlarged that says 'Press ⌘ to display a large-text view of the item under the pointer.'
Caption: Hover text on Mac OS

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

Windows - Screen Magnification instructions

Windows: Magnification

There are slightly different steps to follow on Windows 10 vs. 11.

To turn on screen magnification on Windows 11:
Start (windows icon) β†’ Settings β†’ Accessibility β†’ Magnifier

There's also a shortcut: Press the Windows logoβ€―key + [+]. Conversely, to turn off the Magnifier, press the Windows logoβ€―key + [Esc].

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.

Browser text resize instructions

Chrome: Browser text size

Open Settings β†’ Search for customise font β†’ Change font size using the controls

Firefox: Browser text size

Open Settings β†’ Search for font β†’ Change the size

It's worth trying this out in combination with screen magnifigation and/or zoom.

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!

OS text resize instructions

iOS: Device text size

Settings β†’ Display & Brightness β†’ Text Size

Move the slider to one of the 7 available steps

You can also go back to step 3 and adjust Display Zoom to 'Larger Text'.

Android: Device text size

Settings β†’ Display β†’ Font Size

Move the slider to one of 4 available steps

There's also a setting called 'Display size' which zooms everything on the screen.

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.

Theme change instructions

Mac: Themes

System settings β†’ Appearance β†’ Choose a theme

iOS: Themes

Settings β†’ Display & Brightness β†’ Appearance β†’ Choose a theme

Windows: Themes

Start β†’ Settings β†’ Personalization β†’ Themes β†’ "Change theme"

Android: Themes

Settings β†’ Display Options β†’ Themes β†’ Choose a theme

Chrome: Themes

Chrome follows your system settings, but you can override it specifically for the browser:

Firefox: Themes

Settings β†’ Search for 'theme' β†’ Choose a theme under 'Website Appearance'

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)


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:

Videos on how to use Screenreaders


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!

My a11y testing process

I do this for everything I build to try and ensure that relevant WCAG success criteria are met:

  • Zoom in/out in the browser to 200%
  • Resize the viewport and do the same
  • Ensure everything interactive functions as expected with keyboard
  • Open the page on at least one mobile.
    I will usually change the font size in my mobile browser and check both portrait and landscape orientations.

Depending on time, complexity and testing support I'll test in other ways too, but not all the time.

Again, you don't have to do all of this! Find your own process.

Just make sure everything is readable and functions when things like font size settings or colors are changed. Learning good foundational code practices, especially in HTML and CSS, will help massively with accessibility!