How to make your web content accessible and D&I friendly

At its core, diversity and inclusion communications is about making sure your message reflects and connects with your audiences. Seems pretty simple, right? But most marketing communicators understand that simple isn’t always easy. Sometimes, it’s hard enough to make sure your message lands just right, let alone worrying about the format. So when it comes to translating it into digital spaces, it can often feel like opening up Pandora’s box.

Headshot of Jennifer Pyne, Brand Director at Radley Yeldar

The good news is, we’ve been exploring how to champion inclusivity in communications by building it into the design itself. Our recently released report, Inclusive by Design, looks at the sea of challenges in diversity and inclusion communications, including why it goes wrong and how to better approach it. As part of our thinking, we outlined ten practical principles to help guide communications. When it comes to digital messaging, web accessibility is a critical element too often overlooked. We know navigating WCAG 2.0, AA and AAA standards is easier said than done, so we’ve pulled together a few of our top tips on how to make your website more inclusive and help engage your visitors even more.


1.    More than just a pretty (type)face:

Typeface and colour selection is about much more than good aesthetics. These design elements have enormous impact on how easily (or not) your audiences will be able to see, understand and engage with your content. It’s really important that you use specific digital fonts on your online platforms to ensure legibility and make it easier for the reader to digest content in situ. Check out Google Fonts for fonts that are up to web accessibility standards and also completely free. When it comes to colours, it’s usually best to keep it simple, avoiding certain colour combinations that may make it harder to read for those with vision impairments or conditions like colour blindness. Light colours and pastels are particularly difficult when it comes to web accessibility. When in doubt, use a contrast checker. For type choices, make sure that it’s large enough and legible for everyone to read – any text below 40px should be kept simple and bold, particularly considering audiences who default to viewing content on mobile. 

2.   Actively interactive:

It’s good practice to use clear, simple language in all communications, but on websites in particular, there is an added opportunity to play with interactivity in a way that could make your communications easier to understand. If definitions or contextual information could help audiences digest key messages, consider bolstering your content with interactive information displays to help explain unfamiliar terminology or embedding hyperlinks to make related content easily accessible. This could be as simple as a pop-up label that displays when viewers hover their cursor over a word, or a content page that’s chock full of helpful resources, like Wikipedia’s linked articles. But be careful to avoid flashing content, which poses a problem to those with neurodiverse conditions. 

3.    Designing for eyes and ears:

Video content can be extremely effective and engaging, but in order for audiences to get the maximum value from it, it needs to be configured properly. Closed captions or transcripts aren’t just a nice-to-have, they are necessary to ensure that video content is accessible – not only for those who have hearing impairments, but also those who are watching in environments where they are not able to listen to audio, such as on a noisy bus or in a quiet library. 

4.    The medium is the message:

The actual design and layout of the website itself should consider the different formats your audiences use. Varying specifications of desktops, tablets, and mobile phones means there’s a wide range of resolutions and screen orientations that need to be accounted for. Responsive design is an absolute no-brainer if you want to ensure that all audiences are able to view your content, no matter which device they may be on. It also means that your website will be more search engine friendly, with a URL that’s able to serve all devices. Non-decorative, non-text content should include text alternatives, including images, buttons, icons, etc. Text isn’t always the only or preferred way to inform or direct users, icons exists to support actions that you want the user to perform, so don’t shy away from them. And there are resources to ensure your icons are as functional as they are illustrative.

Keeping the above tips in mind can help improve your audience’s experience on your website. Though these may seem like small considerations at first, it can make all the difference to your next viewer. Your communications will demonstrate that you value all of your audiences, and in turn, they will want to engage more with your content. Still not sure where to start? There are great resources to find clues on topics and key words for ensuring you are providing relevant content people are actively searching for. Adopting an inclusive approach, in digital communications and beyond, is how we’ll improve the experience for everyone.

To read more about what we found on the shocking state of D&I clichés, why diversity is important for business, and how to actually get to good D&I communications, you can download Radley Yeldar’s full report, Inclusive by Design.

If you'd like to hear more from Jennifer, check out our recent webinar - 'Making essential digital communications accessible and inclusive'.