Accessible Design in 5 Stages

Whether human, robot or cat, we need to make sure our websites and apps work for ALL of our users. That’s where accessible design comes in. The only problem is, it comes in many different forms and levels that can become increasingly confusing as well as making you feel like your website can’t have any innovation in design.

But that’s not always the case, it can inform your website’s direction without being a huge hindrance. Obviously how accessible you want your website to be depends on the target market you are after, Dulux’s website wouldn’t be classed as super accessible because of all the different colours of paint they show. It’s not something they can help but that is the nature of their product. However we should ALWAYS strive to make our websites as accessible as possible.

What is accessible design?

Take a minute to imagine you have a visual impairment and so require text to speech when cruising the internet. So what happens when you get to your website? 

• Can you easily find the information you need?
• Can you fill in the contact form without any issue?
• Can you identify what the images are?

All of these considerations and more make up the world of accessible design on websites. It can go much further than that, like your content or even product. 

Accessible design is principles and design strategies that can help users navigate your website and app with ease. It’s as simple as that.

I like to categorise them into stages of depth. Going from the very basic of what you should be thinking about, all the way up to thoughts to help those who really struggle with the majority of the internet currently. 

Stage 1 – Alt text

This is the very basic start of accessible design, and it can also help with your SEO, so 2-in-1!

With alt text you need to really think about the image that is being presented and what it is showing. You typically see a lot of alt text that is really short and non-descript, or even worse, keyword stuffed!

But we are trying to help our users know what this image is actually showing! So you need to be descriptive about the image.

Take this image for example, basic alt text could be ‘man on beach’, but that’s rubbish and doesn’t really describe the depth of this image. Let’s fix that.

Our accessible design alt text could be

‘Man in shorts on teal sun lounger taking photos at the beach’

Now we are getting somewhere, if someone was describing an image to you and said that, you’d have an idea of what it looks like in your mind right? That’s what we are aiming for with this.

I did complain about keyword stuffing earlier, but that doesn’t mean we can’t use this alt text opportunity to add a little SEO spice in there, so if it is relevant you can add your keywords into here, but make sure it makes sense.

Stage 2 – Contrast

We want to make it easy for everyone to be able to read the content we’ve put so much time into, so we need to make sure that there is sufficient contrast between the background and the text.

WCAG suggests that the contrast should be at around a 4.5 to 1 scale.

I don’t know about you, but I can’t look at colour on a background and know what the contrast scale is. Luckily however there are some great tools out there that can help you plan the contrast so you get it right.

One such tool is Colorsafe.co that helps you create an accessible colour palette. It’s really easy to use and can visualise your content for you, so you know exactly what it’s going to look like on your website. I think you’ll be surprised at the level of choice you actually have as well, like I said earlier, you aren’t restricted by these principles.

Stage 3 – More than colour

Let’s look specifically at forms for this one. What you see a lot of designers do is creating a ‘hover effect’ or ‘focus effect’ that will change the outline of forms to a different colour. Maybe the form fields have a grey outline to start with but it goes blue on hover or when filling it in.

Now that’s great for those of us with 20/20 vision and it looks nice, it’s a subtle effect. However, when you don’t have perfect vision, that effect starts to be less and less visible, which makes it harder and harder for users to use.

How do we fix this then? With elements outside of colour changes of course!

Let’s take that same form and say you’ve clicked into one of the boxes to fill it in and get in touch with the business. The design currently has the outline change as described above, but they wanted to make sure this was accessible, so they added an additional element.

The element of SURPRISE!

I mean… icons and labels. They added icons and labels.

So you could have your form that has an icon to represent what that form field is and then change to a little pencil icon when you are clicked on it.

You could also have a label that tells them what needs to be in that field, like ‘first name’ then that label changes size dramatically when clicked into, to symbolise something has happened.

That’s the theme for this stage, making sure it is clear when you can click on something, and when it has been clicked on.

Stage 4 – Tooltips

This should almost be stage 3 extra, and you’ll find as you go down the stages, they each get more and more granular and smaller details. But these details make a MASSIVE difference to those who need them.

A tooltip is more often than not, a little box that pops-up when you hover over an element to describe what it does. Imagine it like alt text for buttons.

These are great ways to add accessibility into your designs without affecting the actual design too much as you can use them for things like forms, buttons and icons. This way when someone hovers on a button (or the screen reader gets to it), this little bit of text just explains what can happen on that. Twitter use this to great advantage on their site:

Stage 5 – Details

We are into the final stage now and have covered the major points, now we are into the small details that can make a difference in your users lives. The only issue here is that there isn’t really a ‘thing’ you can do to make your site better at this stage, it’s really all about individual websites and apps, how they work and how they could be improved.

But that’s a rubbish answer! So let’s go through a few items that we see happening often.

Give your forms a border – this will make it easier for users to see where the form box starts and finishes.

Style a visual indicator – When users solely use a keyboard (or other device) they need an indicator to show where they are on a page instead of a mouse icon. These typically are standout coloured boxes that highlight around the element they are on, imagine on excel when you highlight a box in the sheet. Do that on your website.

Label everything – Don’t leave a form without a label, don’t leave an image without alt text, just make sure everything has a label.

Keep it simple – You don’t need to overcomplicate. We’ve all heard the ‘don’t put anything more than 3 clicks away’, but in reality, a simpler and smoother experience will always trump how many clicks it takes.

Make main functions easy to get to – You don’t want to have menus on menus to get to the function you are going to use everyday. Keep these functions easy to get to!

If you are really wanting to get into the nitty gritty of accessible design, a great place to look through is the W3 guide. They go into detail around every different type of element and the pros and cons of each, worth a read for sure!

Finally, if you are looking for help with your website and making sure it’s accessible, get in touch and find out how we can help!