Accessibility in Web Design

Published on 2019-12-06

Accessibility in Web Design

Accessibility refers to the practice of designing and developing products, services, devices or environments to be usable by everyone, regardless of their disabilities.

Web accessibility in particular means that people with disabilities or changing abilities can navigate, understand and contribute to the web.

With the web and internet becoming such an important resource in everyday life, the web must be equally accessible to provide equal opportunities and help everyone participate in the online world.

There are many ways that web design and development can overlook web accessible features, but they can be overcome easily.



Colour Contrast

Colour contrast is specifically for users with low vision. A website with low colour contrast will be much more difficult to understand and read if it has low contrast colours. According to W3C, the contrast ratio between text and background should be 4.5 to 1. However, this is dependent upon type size with larger and heavier fonts decreasing the ratio.

Colour Indicators

You may have seen instances when a colour has been used as an indicator, perhaps when typing in the wrong password on a login page and the box turns red. Using colour alone to display critical information like this is difficult for users with low vision or colour blindness. Using an additional indicator to display such information makes this section of your website much more accessible and easier to understand for all. This can be done using text labels, patterns or icons.

An example of when this has been done well is in the case of Trello’s colourblind mode. A feature that, once turned on, gives each label a distinct pattern so they can be easily distinguished.

Focus Indicators

When filling out a form or clicking a menu item you might see a blue outline show up around hose buttons or text fields. These are known as focus indicators. By default, browsers use a CSS pseudo-class to give these elements outlines and these outlines help users navigate your site by indicating which element has the keyboard focus. These are particularly helpful for blind users that require screen readers or individuals with limited mobility and prefer using the keyboard to navigate.

While the indicators are useful, the default indicators are not always obvious and could be improved. If you are building a website and you wish to maximize its accessibility, take the time to create some consistent high contrast focus indicators.


HTML Structure

Alternative Text

People with low vision often use screen readers, tools that convert text to speech, to discover the web. If your site has images it’s important to include alternative text and describe the image, not just for SEO purposes, but so those with sight difficulties can access and interpret your web pages.

If you have images for decorative reasons, then it’s a good idea to leave the <alt> text blank so the screen reader skips over the image, meaning no information is lost and gives the users a better experience.


Heading tags demonstrate where particular content starts and helps to structure the page correctly. Titles with big font sizes can help users distinguish hierarchy and communicate to the browser how that content should be rendered.

Not using heading tags correctly can affect how screen readers interpret the text and deliver it. For example, a H1 tag should only be used once on a web page and should be subsequently followed by a H2 rather than a H4 for instance.


Additional Elements

Keyboard Navigation

Keyboard accessibility is particularly important for those with motor disabilities and blind users. It is important to regularly test that your website is keyboard accessible, if you can navigate successfully without the use of a mouse then you are doing it right.

To test this, you can use the Tab key. The Tab key will jump through all sections of your site that have a keyboard focus, i.e. links, buttons, and forms. Testing your website is a good way to find areas that you may have overlooked and you can go back and fix.

Resizable Text

The ability to resize text is a useful feature for those with visual impairments. Most browsers incorporate this feature but if your website is not built to work with resized text it can be very difficult to interpret and may break your design.

A good way to ensure your text can be resized is to make sure user scalability is turned on as a default and avoid using absolute units for font size. Using relative size for font will allow it to scale successfully and ensure readability.



With the absolute importance of the internet in today’s world, it is incredibly important to ensure your website is accessible. Following these guidelines will help widen your target audience, increase your users and promote equal opportunities to all.


If you liked this article or found it helpful, please give it a share and follow us on social media for more.

Looking for additional advice or digital development or design? Contact us now.

To keep up to date with our latest news follow us on social media – Instagram, LinkedIn, Facebook