Designing for Accessibility 101

As digital media continues to grow, it is more important than ever to ensure that everyone can access your materials. In recent years we have seen a considerable update to guidance for providing digital designs accessible to a broader range of people with all kinds of accessibility requirements. After all, should we not be giving everyone the same chance to view the content we create regardless if they have a disability or not? Before we jump straight into several expert tips to help you achieve this, let's first understand why this is vital in the world of design.

Why it is vital that we design for accessibility

As designers, we are responsible for positively impacting the people who view and use our content; this is something we should never forget. Based on this, it is fair to say that we also take the responsibility to ensure our designs are accessible to everyone regardless of the situation, context, or ability of an individual. This is more than just an ethical subject; it's about improving accessibility and increasing our project's reach. So, this is a win-win situation in reality - it brings a better experience to everyone!

Where to begin

Based on my experience working with the University of Derby Online Learning , the best place to start would be the Web Content Accessibility Guidelines (WCAG 2.1) . This guidance will provide you with a range of essential accessibility guidelines which I and many others use to make online designs accessible. From the 23rd of September 2019, the law in the UK is now that public body websites meet these regulations. As it currently stands, UK commercial websites are not required to meet these regulations, but it is considered good practice. After all, if the public body websites are required to meet these regulations, what harm would it do to ensure a commercial website does too! On a side note, you must ensure that commercial websites meet the Equality Act 2010: guidance .

It's also important to note that most public body websites still do not meet the required regulations, potentially leading to fines and being sued by members of the public trying to access their content. Black Label UK has the perfect solution to guarantee your compliance, protecting you from costly fines - but more about this later. Let's jump into some points you can implement straight away.

Ensure you use high contrast

This is one of the simplest ways to align your designs with the WCAG 2.1 guidelines. According to WHO , there are 1 billion people who struggle with vision impairments. Individuals with low vision will struggle to read text on your site if the contrast between the text and the background colour is not strong enough. Therefore it is crucial to ensure a high enough contrast between text and the background.

There is a range of free tools online to quickly check the contrast between colours in your design, ones I would recommend including Contrast Checker and Coolors Color Contrast Checker .

Adding visual cues

Many accessibility requirements need to be met to make your online content fully accessible. One of these requirements includes colour blindness. People with colour blindness will often struggle to understand your content if you are only using colour to show an action, communicate something important, or prompt a response. An easy solution is to combine these colours with an extra indicator; this could be a micro animation, a label, or a pattern. An example of this would be to include an icon alongside an error message - ensuring everyone can understand what this means.

Labelling form fields

This is where the battle of UI and UX design start. When you design a form from a visual perspective, you may use placeholder text as labels because it looks nice... Now think of this from a UX perspective keeping accessibility in mind. Most placeholder text uses a greyed out colour and therefore has a low contrast ratio - this can make it very difficult to read for some users. Others may forget what they are meant to be typing; they might face difficulties remembering what the field is asking for when the label has gone.

Based on this, that's why we would always suggest that the labels always remain visible, especially when completing an input field. By doing so, you'll prevent people from potentially losing context with what they are writing.

You can find further research on this topic completed by Nielsen Norman Group (world leaders in research-based user experience) here in the following article. Placeholders in Form Fields Are Harmful

Focus state design

By default, most browsers will outline a selected element; this is known as a focus indicator or a focus state. If you're a designer, you've more than likely noticed them before because they aren't very aesthetically pleasing. You've probably even contemplated finding a way to hide them. If you ever remove the default style, you must always replace it with something else! It's important because if you don't, you'll be discluding people who require screen readers, individuals with mobility requirements, and power users who prefer using the keyboard as their primary navigation tool for navigating the internet.

Any elements that require user interaction, such as buttons, form fields, and menu links, need a focus state. With a focus indicator, it essentially has to look different from the elements around the object when selected. It's more than okay to design a focus indicator with your brand colours just as long as it is clearly visible and meets the contrast ratios set by WCAG 2.1 compliance.

You can find more about this topic in this article from W3C.

Extra bonus tips

Include accessibility design at the start of your workflow:

Whenever you begin your design research process, be mindful of accessibility requirements. Verify your assumptions are correct regarding assessability and look for potential ways to improve your design.

Get a free accessibility audit of your website from Black Label UK:

We offer free accessibility audits for any website as long it is not behind a firewall or password-protected area. There is no catch at all. We are working with our partners from accessiBe and aim to make all websites in the UK fully accessible by 2035. We will use our software to determine if your website meets all accessibility requirements and works with assistive technologies. You can then use those results to improve the accessibility of your website before carrying out another check.

Include alternative text descriptions on all of your images:

This isn't so much of a design thing, but if you want to make your website more accessible, ensure that you describe all images with an <alt> attribute. Describe what is happening in the picture as if you had someone explain it to you as if you could not see it. Using the word "Picture" or "Image" simply isn't going to cut it.

Is there an instant fix?

If you are looking for a quick way to fix all of your accessibility requirements, please don't hesitate to get in touch. We can make your website fully accessible in a matter of hours. This will save you thousands in development costs and potentially hundreds of hours. You can find out more about our solution here: aCt Website Compliance Tool.

Conclusion

You've made it to the end of this article. By actioning the points above, you can ensure you're on your way to designing a fully compliant website with accessibility regulations in the UK. Designing for accessibility is growing more and more critical - it's imperative to consider these tips as part of your process and continue to play a role in making the web accessible for all. Together we can make technology usable to all humans, regardless of their individual abilities, economic situation, age, education, or geographical location. If you have any tips, we would love to hear them in the comments below. 

Go Back To The Knowledge Centre