• Liz Nicholls

Accessibility & Design for All: Why Businesses Need to Care

Updated: Apr 15, 2021

Pink text against green background to show poor contrast

It’s human nature for us to be attracted to colourful and aesthetically pleasing things. But, it’s easy to forget that we don’t all see or experience the same thing.

Have you ever struggled to read writing over a photograph, or been frustrated because you can’t hear a video in a noisy coffee shop? These may seem minor frustrations, but for some their online experience is an every day struggle.

Web Accessibility by definition means that people with disabilities can perceive, understand, interact and engage with websites and tools without barriers (Source: W3C). Indeed, the UK Equality Act of 2010 requires service providers to make reasonable adjustments to enable disabled persons access to their services.

Designing for all isn’t just for those with disabilities. It’s relevant for all your consumers. Why? Because you have seconds to make sure your message is seen and understood in an ever crowded online world.

Here are just some important points to consider:

Colour Contrast

Around 1 in 12 men and 1 in 200 women have a colour vision deficiency (Source: NHS) and every day 250 people start to lose their sight in the UK, the most common reason is old age (Source: RNIB).

Indeed, with the use of mobile phones, an ageing population and a time-poor audience, it’s essential to design with colour contrast in mind. Whilst a designer may want a site to look aesthetically pleasing, using a colour contrast checker like WebAIM’s colour contrast checker can help you make small adjustments to page elements. To carry out a full contrast check on an existing website, I recommend Experte's free contrast checker tool.

Persil web page with poor contrast white text over photograph
Poor contrast white text over photography and navigation


Users will engage and digest information if content is readable. Readability, put simply, is about making content clear and easy to understand for your audience.

When choosing a font, look at the character separation and make sure there’s a large enough x-height. To achieve maximum legibility the character stem stroke should be 17–20% of the x-height.

Arial text and Verdana text showing legibility of capital  'I' and 'l'

Sans-serif, Roman fonts and Monospace are generally easier to read on screens, while fonts like Arial italic are found to be difficult for those with dyslexia. In this example you can see a clear difference between the capital ‘I’ and l using the Verdana font.

Line spacing and line length are also important aspects to consider. Line spacing is the vertical distance between lines of text and usually measures as a percentage of font size. It may seem obvious, but too little line spacing or too much line spacing will be immediately obvious to your reader. See my illustration below. Ideally, aim for between 130% — 150% as different fonts require different spacing.

Line spacing examples at 100%, 150% and 250%
Line spacing examples

There’s also a lot of research on the optimal number of characters per line for block text. Most suggest aiming for between 50–75 characters per line, but this will vary. The key is to have good responsive web design for multiple devices and window sizes, so that suitable widths can be set.

Take a look at the Golden Ratio Typography Calculator — a brilliant tool that uses mathematical formulas to calculate the optimal font size, line height, and characters per line for your chosen font.

Write for Skimmers and Scanners

Studies have shown that on average only 20% of written content on a web page will be read (Nielsen Norman Group). Users tend to look for specific information, so will scan for the keyphrase or keyword that they’re looking for.

Using the following techniques will help your audience scan content and digest information more easily:

  • Use short paragraphs to create white space

  • Write headlines that are descriptive

  • Create bulleted lists

  • Bold text if it’s a key learning point/piece of information

  • Avoid technical language and write simply


Video is a great way of engaging an audience — our eyes are drawn to movement and we’re better at retaining it’s message than reading a whole page of text. But, what if you’re one of the 11 million deaf or hard of hearing living in the UK (Source: Gov.uk), or in a quiet environment and can’t turn the sound on?

Best practice is to have captions available. These are the spoken word in text form and sound descriptions e.g.”door opens”, that allow viewers to follow the dialogue in real time. Alternatively, provide a transcript file which is a text version of every word spoken in the video.

There are added benefits to providing text captions and transcripts. Studies have shown that people watching videos with captions have a better comprehension of the content. Plus, they are better indexed by search engines, and therefore improve your SEO.

Check out tools and apps like Rev.com, AutoCap (Android) and Clips (iOS) which can help generate video captions, or use You Tube’s free auto-transcribe facility.

Web Page Design

Thankfully, the accessibility agenda has been propelled forward with the growth in mobile phone usage and search engine ranking. However, having an accessible website is more than just search engine optimisation and responsiveness. Consider what it would be like to have a sight or hearing impairment, or how assistive technologies would interact with your website.

Alt Text

Do your images have alt text? (Also know as “alt tags” or “alternative text”)? Alt text is used to describe an image on a webpage and its function.

They are relied upon by blind and visually impaired people using screen readers to read out text on web pages. You’ll also notice alt descriptions if images download slowly or fail to appear.

The added bonus of alt text is that it helps with SEO. Google, for example, will use alt text to understand the content of a page and how it relates to the subject matter on the page.

“When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.” (Source: Google Images Best Practice)

Where you’re able to add alt tags to your images, give them descriptions that are meaningful and accurate. For example: “Red Eyed Tree Frog Staring” is a better description than just “Frog”.

Red Eyed Frog Staring Image with Alt description by its side
Red Eyed Frog Staring Image with Alt Description

Sign-posts and Conventions

Most of us scan a web page or social media feed with an implicit understanding of how it works. We’ve learnt the patterns and meanings of elements, for example, a magnifying glass icon for search, and that a logo on the top left of a web page gets us to the home page. Following user interface design (UI) conventions reduces the time and brain power for learning.

Understanding your audience’s goals and abilities (user-centered design) will also help inform your design decisions. Helping your audience complete a task or get to the information efficiently will give them a good impression — and ultimately a reason to buy your product or service.

Often there’s a balance to strike between usability and visual design. For example, using an accordion is a neat way of hiding blocks of text, but a user has to take an additional step and guess what information is hiding behind it. Is a page with lots of text more confusing or is an extra click more frustrating? Good web design decisions are the ones that consider the user and trade-offs.

Site Structure

Is your site structured and organised well? A clear content hierarchy is essential for those using screen readers so that they may skip to sections that they are interested in.

The code behind your site needs to stick to a rank or level for each item. So, the main page title may have an <h1> tag as it’s the most important, with the next important sub-heading tagged with <h2> and so on.

In addition, coding a site semantically gives meaning to users and machines about what that content is, rather than just how it looks. For example, the paragraph <p> tag means a section of content and a browser will know how to display it.

A good site structure is not only important for accessibility, but enables search engine crawlers to find and index your web page content quickly.


Next time you’re posting an image for social media, or signing-off on web content take a moment to consider your audience’s needs and differences. Accessibility and design for all isn’t a nice to have. You really do have a much better chance of creating a positive online experience with inclusive design.

  • Check colour contrast of text across all your print and online media;

  • Chose fonts and spacing that are legible to all;

  • Add alternative text to images describing what they show and their function;

  • Consider your user and the usability of your webpage in design;

  • Use captions or transcripts for video content.

If you have any questions or want to share your own experiences, please feel free to comment.

For more information about web accessibility or design for all, you can contact me at liz@olivine.co.uk.

25 views0 comments

Recent Posts

See All