Skip to main content

20-20a Westminster Buildings, Theatre Square, Nottingham, NG1 6LG(0115) 888 2828

Accessible website design for blind users and people with low vision

Written by Cheryl Swan on

The most effective ways to help improve accessibility for users with sight loss, starts with considering the point of view of a disabled user and implementing inclusive design on your site.

Digital accessibility for the visually impaired

In the UK, more than 2 million people are living with sight loss, and globally, at least 2.2 billion people have a visual impairment. Poor digital accessibility impacts on these users daily, even though there are simple adjustments that can be made to help to mitigate these issues.

Everyone deserves access to online platforms, and it shouldn’t be something that is more difficult or, in some cases, impossible to use.

How do people who are visually impaired access a website?

The digital world is fraught with sites, apps, and online tools that are unusable for people who are blind or have low vision. Fortunately, there are numerous assistive technology devices and software which assists with digital accessibility, providing the platforms are structured correctly. 

The most common way for users who are visually impaired to navigate the internet is with the use of a screen reader, also known as text-to-speech software. You’ll find access to screen readers on most modern platforms, including JAWS for Windows, NVDA or Voiceover for Mac.  

Users with low vision may also need to zoom into an entire web page or use software that acts similar to a magnifying glass, allowing people to control the size of text and imagery. 

Accessible website design for screen reader users

Website design for the visually impaired - A headset laying on top of a laptop in an office setting

Build platforms for keyboard-only use

A screen reader user will use a keyboard to navigate through a website. Using a keyboard only, check that you can easily tab through your site, and access all links and site features. There should also be a visual reference to show where you are on the page to assist people who have low vision.

Add alternative text to imagery

It’s important that you describe what is in an image on a web page. A screen reader will read out this alt text description, allowing the user to understand what the image is displaying and its context. Giving the user the same online experience as everyone else.

Write descriptive link text to give context

As a visually impaired user relies on a screen reader to navigate a website, hyperlinks need to be descriptive when they are read aloud. Writing links such as ‘click here’ or ‘read more’, doesn’t let the user know where the link will be directing them. 

Avoid only displaying information as an image or video

Though animations, charts, and infographics may look attractive, often, these aren’t accessible to screen reader users. 

If you choose to include these features on your site, it’s important to also provide an alternative.

This can be achieved by either:

Correctly structure your content with heading levels

Ensure that your site’s content has a consistent, logical, linear layout. 

Level heading structures are crucial for screen reader users, as people rely on these for navigation. Do this by nesting headings, starting with the most important being <h1> (which there should only be one of per page). It’s important not to skip heading levels, as this can cause confusion for the user. For example, <h2> should not be followed directly by an <h4>.

Designing digital content for users with low vision

a young woman with long black hair, sat working on a laptop, wearing glasses and an orange pair of headphones

In addition to the above points, there are extra considerations to be made for users with low vision. 

Use sufficient colour contrast ratios

It’s imperative when using colour on a page to ensure that there is a strong contrast between text and the background. Poor contrasts may not be legible, which will impact upon users with low vision.

It’s advisable to use free online contrast checkers to tell you if colour ratios pass or fail the Website Content Accessibility Guidelines (WCAG).  

a contrast icon in an orange hexagon

Present user-friendly content

To make a document or site legible, selecting the right typeface and font size is vital. 

  • Steer away from using any fancy fonts or italics.
  • Your font size ideally needs to be 12pt or above.
  • Keep text left-aligned and avoid using full justification.  
  • Avoid underlining text. Underlining should only be used to identify hyperlinks within a document.
  • Don’t use block capitals, as a screen reader will reader out each letter instead of the word itself.
a document icon

Allow for page magnification 

A user should be able to zoom into your site’s web page up to 200% without the assistance of a screen magnifier and without losing any content or functionality. If not designed correctly, this may cause text to overlap or disappear completely.

a magnifying glass in an orange hexagon

Don’t use colour to convey meaning

Some users may have a colour vision deficiency, which may mean they will not be able to distinguish the difference between certain colours (e.g. red and green), so it’s important to appropriately label content. Provide text alternatives, rather than a green box signalling yes and a red box signalling no for example.

a colour palette icon

Creating accessible social media content for people who are blind or have low vision

someone is holding a mobile phone and wearing a smart watch, and social media icons are flying out of the mobile's screen, such as love, like, comment.

There are also inclusive considerations to make when creating social media content that can assist your followers.

You can do so in six simple steps:

  1. Remembering to add alt text to your imagery.
  2. Using camalCase or PascalCase hashtags instead of writing them in lowercase.
  3. Adding transcripts with videos and podcasts.
  4. Writing a short video description to help set the scene for users.
  5. Adding audio description with media.
  6. Using emojis in an accessible way.

Emojis are read aloud by a screen reader, and probably not in the way you may think at times. This often results in social media text making no sense for your users if emojis are used in between sentences or words, or if they are used for items such as bullet points. Our below guide explains how a screen reader interacts with emojis, giving you food for thought on how and when to use them.

Need to check if your website is accessible?

We offer a free website accessibility check or in-depth website accessibility testing, which includes both automated and user-testing methods to assess your website design.

We also have a great range of training packages to upskill developers and content editors