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 full 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 specific learning disabilities 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. Creating 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 the artwork talks to them, rather than leaving them feeling excluded.

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. This encourages wider connections with every visitor to our site including staff, clients and job seekers.

Typography

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 ‘Colour blindness’ as more commonly termed, affects approximately one in 12 men and one in 200 women globally. There are three types, the most common red-green colour blindness 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 between text and background colour.

Accessibility

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, the alt text is also indexed by search engines affecting the website ranking. We avoid embedding text into the imagery on the website as this cannot be deciphered by screen readers. Images also resize based on the device the user is on. As a browser window gets smaller on a mobile, the image and the text also gets smaller. That can make it difficult if not impossible for any user to read, especially those with partial sight.

Language

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 a regional home page that depending where in the world the website is viewed from; you are welcomed with content that is most significant to the region.

Content

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 and 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.

In conclusion good inclusive design needs to speak to everyone, 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 need to be told if our work is failing you, so please let us know! We can read guidance and study standards but it’s through you sharing your personal user experience that we’ll continue to learn.

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.