Designing Inclusive Websites And The Importance Of WCAG Guidelines

Four principles of website design

We all want our websites to look interesting and attractive, and do what we need them to do in terms of functionality.

But we also need websites to be accessible and inclusive.

A great website excels at all four elements.

Why be inclusive?

An inclusive website will be welcoming and accessible to all.  By considering different users’ needs, the design can facilitate easy engagement.  It is considered that at least 15% of the world’s population experience a form of disability. The WHO estimates that 33% of the world’s population has hearing or sight impairments. Pretty crucial not to lose 33% of your potential market by making sure that everyone can access the information you want to share.

An inclusive website will give an improved user experience which in turn will increase engagement and conversion.

Having an inclusive website will give your company a great reputation.

And without being cynical, it is the law to be inclusive.

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines, WCAG, are the international standards that must be followed in website design. 

The guidelines have four main principles, each with detailed criteria to be followed.

1. Perceivable – information shown in different ways such as text, images and audio
2. Operable – Users must be able to use different methods to operate the content such as keyboard, mouse, and voice.
3. Understandable – clear and consistent content
4. Robust – all users must be able to access the content through different means.

You may hear web designers talking about POUR, an acronym used for the four principles. The detail that sits behind each of these principles is vast and complex.

For example, correct use of colour contrast and font size can make the website more accessible to those with low vision, colour blindness and dyslexia.  Presenting information in lists or use of headings can help accessibility for those with cognitive or learning disabilities.  Captions and transcripts can improve accessibility for those with hearing difficulties.

• Add a description of the image – known as alt text. Make sure your Alt Text is detailed yet concise. To keep it short don’t start with “Photo of” or “Image of” – just go straight in with the description.

• Make it easy to understand. Use plain English, and avoid jargon and acronyms. In terms of visual presentation of your written content keep font simple and avoid capitals.

• Be aware of contrasting colours. For example, having a strong contrast between font colour and background colour will improve readability.