How to Create Accessible Website Design

If you don’t have a disability or any additional needs, you may not have considered just how important it is to ensure that your website is accessible for all users.

It’s so important, in fact, that developers have to abide by a set of rules which make sure that websites are accessible. The Web Content Accessibility Guidelines, or WCAG.2.0, are published by the World Wide Web Consortium as part of its Web Accessibility Initiative.

The WCAG includes recommendations for developers, which, if implemented, make digital content more accessible for users.

There are three different levels, namely A, AA, and AAA design standards. Each of these is progressively a bit more challenging to achieve as a web designer. However, this is very important to do - so we’ll go into more depth on each one below.

A

To achieve level A, your website design needs to meet a total of twenty-five separate criteria. Basically, this means that your design should never rely entirely on colour - whether that’s for differentiating between two elements or to initiate an action (such as ‘click on the red button’).

This is because users with colour deficiencies, such as protanopia or deuteranopia, see colours differently from somebody with typical vision - meaning that they would struggle to use your website if much of the design is colour-based.

Instead, make sure to use clear text (such as ‘click here to proceed’) to indicate actions that you’d like internet users to take without relying on colour, or use different patterns like stripes, dashes, or dots to differentiate between key elements.

AA

AA should be the minimum standard that you aim for in terms of accessibility, as this is the industry standard. This means that you need to follow all criteria for A, as well as AA - and AAA, if you’d like your website design to be as accessible as possible.

To achieve the accessibility standard of level AA, your website design needs to meet colour contrasting requirements.

For example, you need to make sure that your background and foreground (displaying text, or images with text on them) has a contrast ratio of 4.5:1.

While this might sound complicated, it just means that there is enough of a contrast between colours to make it easy to differentiate between background and text - making reading the text on your website far more accessible to different users.

AAA

The highest accessibility standard is AAA. This is the ‘gold standard’, and includes the criteria from A and AA alongside its own new criteria.

For your website design to reach the AAA accessibility criteria, it needs to follow more strict colour contrasting requirements. For example, the foreground and background ratio needs to be much higher at 7:1 for normal sized text, and 4:5:1 for large text.

In this case, large text is defined as text which is 14pt and bold or larger, or 18pt and larger.

To achieve this contrast, your website design would need to feature text that is very dark on a light background, or very light on a dark background.

However, getting the right contrast ratio for any coloured text aside from black or white right can be challenging - so it can be best to stick with these colours to ensure the highest level of accessibility.

Additionally, it’s also important to use icons or symbols alongside colour indicators when showing a ‘success’ or ‘error’ state. For example, when a user is filling out a form on a website, it may turn red to show that there is an error, or that they haven’t filled out a certain section correctly. If the user has a colour deficiency, they may not be able to see the colour change - and, therefore, be unaware of any error or mistake.

Because of this, AAA standards require website designers to use icons or symbols as indicators instead. A simple ‘X’ appearing beside an option on a form is a clear indicator that there is a mistake or error, whereas a check mark symbol reflects that the option or section has been filled out correctly.

Outside of WCAG standards, there are other things that you can do to ensure that you have an accessible site.

It’s a good idea to consider the fonts that you’re using across your website, as some fonts are easier to read or contrast better than others. Commonly used fonts, which are reportedly some of the most accessible for internet users, include Helvetica, Arial, Verdana, and Open Sans.

Another way to ensure that your website is as accessible as possible is to include alt text for images.

Alt text is used to describe images for those who are visually impaired or use screen readers so that they can properly visualise the content. This is particularly important when an image is key to the content, such as an infographic. However, alt text isn’t needed if an image is purely just to look good, as this might distract the user from more important information elsewhere on the page.

If you’re still unsure of how to go about making your website design more accessible, it’s always best to consult with a brand design agency - particularly if their own website fits AA as the industry standard.

Any good brand design agency will have plenty of experience in building websites that are accessible for users, and often have ways to make sure that any web design project that they take on passes accessibility checks at the AA standard and beyond. For example, we use a plugin called Stark to ensure that our brand and web design projects pass these checks.

Overall, it’s important to remember just how crucial accessibility is.

While, as a web designer or as a business owner, you may have an idea of what you want your website to look like, function and accessibility should take priority over aesthetic.

Have you heard of AccessiBe?

AccessiBe is the perfect solution to web accessibility issues. Using their incredible AI-powered software, AccessiBe makes your website accessible to people using screen readers, people using just a keyboard and also to people with disabilities including ADHD, visual impairments and colour blindness (to name a few).

The software takes your website and immediately makes it fully WCAG 2.1 compliant and makes it instantly accessible to the percentage of people with disabilities. Check out our full blog about AccessiBe!