Accessibility: How to make your web design meet AA guidelines

The web can be a place of positive discovery, browsing sites which spark curiosity, or simply a place to get the best possible bargain. It can also be an inaccessible hub of confusion and frustration, as the images and text blend together in a big blur, making you feel a little alienated. This is the user experience of many people who experience visual, hearing, learning, or cognitive disabilities.

Inclusivity and awareness of user experience are at the heart of making any website accessible. Following AA accessibility guidelines can not only benefit you and the growth of your company, allowing your website to reach a broader audience, but also improve the user experience for every person who visits your website. Simple choices can make your website far more welcoming and accessible for all.

As a company that values inclusivity in all areas of our work, we thought we’d share some tips and tricks to make sure the design within your website meets AA accessibility guidelines and caters to all users!

So, what is accessibility in web design?

In itself – ‘accessibility’ is how easily someone can access something. Improving accessibility anywhere means removing any barriers in place that would prevent someone going somewhere or using something – taking into account the ways they are being excluded because of a disability.

So, improving web accessibility involves making your website clear and straightforward for everyone by designing accessible user experiences. An accessible website should be easy to read, easy to understand, easy to use, and intuitive for all users.

The purpose of this is to ensure users with impairments to their vision, hearing, mobility, or understanding can view and navigate a website without any difficulty. This can involve making your website compatible with accessibility aids such as screen readers.

The needs of disabled individuals have long been overlooked on the web. However, following AA accessibility guidelines helps to acknowledge these needs, taking a vital step forward for creating a more inclusive digital space. If you’d like to learn more about how we as a company approach web design and development for disabled people’s organizations, it may be helpful to read our blog here!

Here are some basic elements of user interface design to keep in mind when looking to implement accessibility standards in web design:

Colour

Colour coding and contrasting colours make a key difference in the accessibility of a website for anyone using their vision to access a site. Colours can help clarify and organise information on a page but choosing colours with poor contrast can make everything blur together.

When choosing a colour scheme for your brand, contrasting colours are an important consideration if you want to stick to AA accessibility guidelines. You can learn more about how to make your digital brand more accessible here.

When establishing a colour scheme for your website, it is essential to pick colours which you can use to create a sufficient contrast between the foreground and background of a website. An example of accessible web design can be found in the colours used on the Mercury Theatre website, which we designed using AA accessibility guidelines. The chosen colours always have high contrast, allowing any user to be able to read the text.

You shouldn’t always rely on colour to convey information e.g. ‘the green circle means X and the red circle means Y’. Colourblind individuals won’t be able to tell the difference, preventing them from accessing your information. To resolve this you can simply add numbers to correspond with the colours to guarantee the viewer knows exactly what you’re talking about.

Text and Headings

A simple way to ensure usability and accessibility in web design is displaying text and headings clearly. The spacing in between text is a clear indicator of which heading it belongs to and what information it is linked to. A main heading is the largest piece of text, with the body being much smaller underneath it. If you have a large body of text under the main heading, it is useful to break up the information into smaller, more digestible chunks. This makes it easier to read and AA accessible for all users.

Big copywriting tip: say everything in as few words as possible!

You can get creative about the way you display text for optimised accessibility. The blocks of text can be beside each other with clear spacing between the two main headings and bodies of text. This not only makes your website looks more appealing, but also divides the information up into clear areas, for maximum legibility.

Interactive Elements

The interactive elements of a site are key, when designing for web accessibility. The elements a user can interact with, such as a button or link, should be intuitive. This means that the user should be aware that they can interact with that particular button or link. It is instantly clickable! Make this as obvious as possible.

You may notice that a button often moves or changes in some way, when hovered over by the mouse, this brings attention to the user and lets them know this is something they can interact with and click on. This can be displayed by colour coding too! When hovered over, a link is often underlined and changes colour to indicate that it differs from the other body of text and can be clicked.

To guarantee inclusivity in the design of your website you should give the user control over any interactive animated visual images or sound elements on your site. The user can become overwhelmed and may be sensitive to sound and visual images, so it is important to give them the ability to turn off certain elements. For example, if you have an image gallery slider, allow the user the ability to scroll through the images themselves using arrows, rather than automatically cycling through the images. This way they can view the images or information they need at their own pace.

The media used within your website should also be easy to understand and engage with. If there is a video on your website, ensure it has the option to include captions to help people with hearing or cognitive disabilities. Our Senior Content Writer, Ell, discusses the importance captions in our blog on how to make your digital brand more accessible – and, no, they still haven’t been able to enjoy season 2 of The Wire on NOW TV because of the subtitle issue.

Navigation and Design Compatibility for All Devices

Inclusive design patterns and easy navigation all code accessibility into web design. A clear user journey and navigation is the foundation of an accessible website. This is achieved through consistent naming, styling, and positioning of the navigation bar. Essential, navigation helps users understand where they are on the site, and how they can search for or get back to the page they would like to view.

This can be especially useful for users with cognitive difficulties. Simple navigation, with clear and direct instructions, allows your website to be utilised for its intended purpose. For example, if you have an e-commerce website with unclear navigation, you’re stopping users from purchasing items from your website, hindering your business.

Due to the popularity of smartphone devices, it’s helpful to take a mobile-first approach. If you haven’t optimised the design of your website for all devices, this can be detrimental to your site performance. To make sure the design of your website is compatible for all devices, consider how you’re going to position the information and text. The navigation bar can be placed inside a ‘burger menu’, which is exactly what it sounds like, a small icon at the side of the screen which expands when interacted with, like the many layers inside a burger.

Final Thoughts

Inclusivity in our increasingly digital world is vital. The tips above will help you implement a little empathy and kindness into the digital landscape – making it welcoming for all, something to be valued in both the online and offline world.

As someone who uses the web every day – for my job, for casual browsing, for socialising – it would be completely isolating for me to remove such a key aspect of my day. Many disabled folks feel excluded from online spaces because it isn’t usable for them. If you are able to take any of the steps above, it will make someone’s experience of your website much more pleasant and invite them to visit it again, a win-win for all!