Accessibility means “being easy to obtain or use”. This can be applied to everything, from transport to public bathrooms all the way to websites. Web designers have a responsibility to ensure that everyone is able to access, enjoy and use websites no matter what their ability or situation.

There are ethical and commercial justifications for designing for accessibility with over 11 million people in the UK having a disability but there is also legal reason to design for accessibility. If your website doesn’t meet certain design standards you could be sued for discrimination. I’m sure this should be enough to encourage you to design for accessibility but if it isn’t, there are also benefits to a business.

Having accessible web design can greatly improve your websites SEO. The bots that regularly crawl your website to index it are blind, deaf and have impaired cognitive abilities. If your website is not accessible then those bots will not be able to confidently perceive a full picture of your site. Without this confidence, your site will be marked down in the rankings.

But enough about why a website should be accessible, let us look at how to make it accessible.

Add Alt Text To All Images

Many people with impaired sight use screen readers to “hear” the web, these tools convert all text on a page to speech so the person can hear the page. Alt Text is used within HTML code to describe the appearance of an image, without the Alt Text the tool will not be able to describe what is shown in the image.

Alt Text should be sufficiently descriptive but shouldn’t contain any spammy attempts at stuffing keywords in. If you can include your keywords in a way that makes sense then, of course, it will only benefit SEO.

Add Enough Colour Contrast

Often people who have low vision, colour blindness or impaired site may struggle to read text on a page if there isn’t enough contrast between the colour of text and background colour. When web designers select the colour palette for use on their websites there are tools to use to check the contrast ratio.

The contrast ratio between the text and background should be at least 4.5 to 1. The ratios become more lenient with larger and heavier fonts since they’re easier to read at lower contrast. If your type is at least 18 ptor 14 pt bold, the minimum contrast ratio drops to 3 to 1.

Include Focus Indicators

Not everyone browses a website using a mouse, for example, those using screen readers or those with limited mobility or prosthetic limbs. Focus indicators are visual markers which indicate the element on a webpage that is currently selected. Only one element can be focussed on at any one time and the highlight must be clearly indicated.

Generally, focusable elements are interactive such as form fields, links and buttons. As a rule of thumb for web design, if you can interact with an element using your mouse you should be able to do the same with your keyboard.

There are a few keys for designing effective focus indicators. Firstly, there must be enough contrast between the focus highlight and the interactive element. Without enough contrast then visually impaired users may not be able to identify that an element is in fact highlighted.

While also keeping good contrast it is also important to use a complementary colour scheme for your website. While focus indicators are important aspects of web accessibility, you don’t want them to ruin the overall design of your website either.

Finally, using micro-animations to highlight them can also be a strong web design technique to use. While the animation can be only the slightest movement it can still be an eye-catching way of highlighting an element whilst also being a positive design element.

Don’t Use Colour Alone

For those with colour blindness or visual impairment, often when information is displayed in colours, such as charts and graphs, it can be difficult to read as all the data points can look the same. In order to combat this and make it easier for those who may struggle designers would be looking to use visual cues such as patterns or text labels.

By using pattern in the design of similar looking elements it acts as an easy way of making the differences more apparent. An excellent example of this guideline is Trello’s colourblind mode. When turned on, labels become more accessible by adding texture.

An easy way to test if your charts and graphs are easily distinguishable is to print them in black and white. When printed in black and white, if it is difficult to distinguish different data groups then they are not

Conclusion

So there it is, a couple of quick guidelines to help move your web design closer to being completely accessible.

We hope that you understand the importance of accessibility in web design more now and can continue to help us spread that awareness. As designers, it is our responsibility to ensure that everyone is able to access and enjoy the web in the same way as anyone regardless of their abilities, age, education or geographic location.

Get in touch