Designing an inclusive website

As a global graphics team, our aim is to ensure the solutions we deliver are ‘inclusive’. I confess, we don’t always get it 100% right, but we always endeavour to consider how our work will be received by all.

An inclusive approach needs to take into consideration the widest possible scale of human diversity. As a team that supports a network of global offices of over 1000 employees - culture, language, gender, sexual orientation, religion, age, and cognitive variance are just a few of the factors that need to be considered.

We recently developed a new global website for Cundall, with accessibility and inclusivity as a primary objective. From the offset of the design process, we discussed ‘user defined journeys’ through the website. This required creating personas that visualise what that user may look like, developing a picture of where in the world they are logging on from, what language they speak, whether the imagery they are seeing is relatable and whether there could be any disabilities that need considering. Good design leaves the audience feeling that it talks to them, rather than leaving them feeling excluded.

We looked at inclusivity from two main standpoints:

• The web content accessibility guidelines (WCAG) — the globally recognised standards that set out (mostly) measurable steps to make content accessible to the widest possible audience (we aimed to meet WCAG 2.1 AA accessibility standard)
• Inclusive content — the less concrete but equally important side of design that tries to ensure it resonates with a diverse set of people with different personal characteristics.

These two arms of inclusivity often overlap, so the points below don’t necessarily follow one or the other. Nor does the following constitute a complete list. Many factors affect inclusive design and we’ve just highlighted a few of the main areas of consideration for our website redesign.

Inclusive imagery

Throughout the website we use photography of Cundall staff rather than stock images and videos, but we also need to ensure that these images are diverse. Along with testimonials and quotes, we strive to represent the full spectrum of Cundall employees across the global team. This encourages wider connections with every visitor to our site including staff, clients and job seekers.

Readability and plain language

Much research has been done into what constitutes good design for web readability, which is fundamental for people with specific learning disabilities such as dyslexia. Formatting is the minimum that needs to be addressed such as the larger fonts we have used, narrower text columns, avoiding justification and minimal use of underlining, italics and ALLCAPS which can make words harder to decipher.

It can be common for users with cognitive disabilities to struggle with keeping place when blocks of content are too long. By using sub headers in our people pages and a three-paragraph structure on our project pages, it breaks up the visual structure of the content making it easier to read.

Colour

Colour vision deficiency or ‘Colourblindness’ as it is more commonly termed, affects approximately one in 12 men and one in 200 women globally. There are three types, the most common red-green colourblindness makes it hard to tell the difference between red and green, blue-yellow colour blindness, and the rare complete colour blindness which leaves the world in shades of grey. We’re careful to avoid these colour combinations and to maintain a strong contrast ratio between text and background colour.

Alt text and tabbed browsing

Behind the scenes on the website the content management system (CMS), has additional inputs to make the website accessible. Alternative (Alt) text is written for every image on the website to convey the content to anyone with vision difficulties accessing the page with screen reader software (and those with low bandwidth!). Although our primary consideration is the user of the website, alt text can also boost the content’s visibility to search engines like Google (more proof that inclusive design often improves results for a wider group of people than first imagined). We avoid embedding text into the imagery on the website as this cannot be deciphered by screen readers (although good alt text can mitigate this issue to an extent).

Other technical considerations include attention to the tabbed browsing experience. Screen readers often use tabbed browsing (using the keyboard as a primary interface) to bypass visual interaction tools (like the mouse, or touch interactions), as do users with reduced motor skills. This means the order of inputs (links) on the page is vital to good user experience. It also means the wording of those links is vital, and we take care not to include any random “click here” links, that to a screen reader, give no indication of where the link goes to.

Multi-language capability and regional differences

Although currently solely in English, the design of the website has been futureproofed to allow for multiple language delivery. Chinese translation is underway and will be implemented in 2022, and as a global company with 21 offices internationally, Polish, Romanian, Spanish, and Arabic may not be far behind. We’ve also implemented regional home pages to let our different teams across the world create welcoming content specific to their own communities.

A balanced approach to technical language

During our design process it became clear that our website content would need to be accessible and interesting to those who have many years of engineering education and experience as well as those that know very little about the industry. That meant keeping the content clear and concise, avoiding specialised language and in turn opening it up to a wider audience.

What we’ve learned

In conclusion, good inclusive design needs to speak to a wide spectrum of people with different needs, capabilities and characteristics, which is a big undertaking. As I said we don’t and won’t always get it right, but we’re certainly putting 100% effort into trying to ensure all our outputs have considered the potential needs of our audience to make everyone feel included.

As designers, we want to be told if our work is failing, so please let us know if you spot something we can improve! We can read guidance and study standards but you sharing your personal user experience is an enormous help, too.

This blog outlines the process of our website development, but if you are interested and want to do some further reading then there are many in depth resources available on the topic. Such as Accessibility, Usability, and Inclusion | Web Accessibility Initiative (WAI) | W3C.

Cundall.com was developed in collaboration with Ten4, a digital agency dedicated to good user experience, accessibility and inclusive design.