Ensuring Accessibility in Recruitment Website Design

I’m a huge supporter of web accessibility for so many reasons - firstly it was one of the original pillars of the early internet, secondly I use glasses and hate websites where the text is too small, thirdly it shows a demonstrable commitment to diversity and so many other reasons. Having a fully accessible website shows your real dedication to diversity, going beyond simple words pasted somewhere on your website and it will open you up to a larger and still highly relevant candidate pool. 

The Importance of Accessibility in Recruitment Website Design

The majority of us navigate our daily lives with minimal barriers, effortlessly using the internet for various tasks. However, many people with disabilities, who are neurodivergent, are visually impaired, face significant challenges when accessing online content. As the internet evolves, ensuring accessibility has become crucial, especially for recruitment websites that aim to attract a diverse pool of candidates. We’ve seen through our own businesses and that of our clients the importance of diversity and how it can drive our organisations forward in a positive manner. We’re going to explore the importance of accessible recruitment website design and provide you with practical steps to make your website more inclusive.

What Is Accessibility When It Comes to Your Recruitment Website?

An accessible recruitment website can be used effectively by individuals with various disabilities, including visual, auditory, and physical impairments and those who may consider themselves as neurodivergent. Here are some key elements to ensure accessibility:

1) Alt Text for Visual Content: Ensure images and videos have alternative text descriptions and subtitles for screen readers. If your website has been developed by a developer with accessibility in mind then each image should have an “alt” tag. You may have seen this alt text before when an image appears to be missing and you see a line of text in its place. Alt text should describe the image succinctly in 3-7 words ideally. It’s used by tools such as screen readers to give context to images that visitors may find hard to see. 

2) Text Alternatives for Audio Content: I love to see video content on websites but I still rarely see it on recruitment agency websites. People spend a huge amount of time on social media, YouTube, streaming services, etc. consuming video content and I think recruitment businesses are missing out on increased engagement stats from a lack of it. When you do use video on your website, make all content has subtitles. There are so many tools that can automate this for you so it doesn’t need to be time consuming. 

3) Keyboard Navigation: Make sure the website can be navigated using a keyboard for those unable to use a mouse. A user should be able to navigate to all interactive elements, on all pages, using the “Tab" key and interact with any button or link using the “Enter” key. You can check this yourself by visiting each of your website pages and seeing if you can move around and interact using the “Tab” and “Enter” keys. 

4) Readable Text: Ensure sufficient contrast between text and background colours, and allow users to adjust font size. This can be a little harder depending on the colour palette you’ve chosen for your website but try to keep a large enough contrast so those who are visually impaired can properly see all text across your website. There are lots of free tools on the internet that show you contrasting colours, which will make the process so much easier. 

5) Logical Structure: Design a predictable and logical site structure for easier navigation. This plays into both accessibility and user experience. Your pages, navigation menu (including sub-headers) should be organised and grouped into logical categories. 

Why Accessibility Matters for Recruitment Websites

Accessibility is critical in modern web design and development, particularly for recruitment websites. Ensuring your site is accessible:

1) Broadens Reach: Makes your website usable by a wider audience, including individuals with disabilities. We’re simply opening up the candidate pool to a much wider and still highly relevant audience, which can only be of benefit to your consultants and your bottom line. As an example, I use glasses when on my laptop and I can actually remember times when I’ve navigated away from recruitment agency sites because the text was too small and it annoyed me that I would have to manually increase the screen size. 

2) Demonstrates Inclusivity: Shows a commitment to inclusivity and diversity, appealing to clients and candidates alike. A lot of recruitment businesses talk about diversity, their commitment to it, place employment opportunity statements on the website and so on, yet they rarely take any real positive action. This is a demonstrable action you can take to the bank. Having a fully accessible website is a USP you can boost about to client HR & talent acquisition teams. 

3) Enhances User Experience: Improves overall user experience, encouraging more interactions and applications. We don’t design and develop websites for ourselves and our own egos, they’re designed for our users, to make our users happy and want to buy from us. They’re designed to inform and generate revenue and a great user experience will dramatically improve the chances of accomplishing both of these. 

4) Legal Compliance: Ensures compliance with accessibility laws and regulations, reducing legal risks. This is a minimum to avoid a legal letter from a regulatory body. There are actually laws in place, currently in America which allows the visually impaired to sue retailers if their websites aren't fully accessible!  

How to Check How Accessible Your Recruitment Website Is

1) Google Lighthouse: Use this free tool to analyse your website's performance, SEO, best practices, and accessibility. I’ve written a separate blog piece on using Google Lighthouse to test the health of your website. It’s an amazing free tool that you can easily access and allows you to check the quality of the work delivered by your web developer. 

2) Browser Extensions: Tools like Wave, Tenon, Axe, and SiteImprove can help evaluate accessibility. There are numerous options out there these days, enough to dedicate a whole blog post to but have a look around as they’ll really help. 

3) Manual Testing: As mentioned before you can test to see if you can navigate your site using the "Tab" & “Enter” keys to ensure all interactive elements are accessible and usable.

Accessibility Tools and Resources

1) ReciteMe: An accessibility tool that can read out website content, enlarge text, change background colours, and more. I’ve seen this in action on a few recruitment sites and it’s unbelievable! If you’re really committed to accessibility then this is the pinnacle. Integrating your website with ReciteMe really demonstrates your commitment to accessibility and disabled and neurodivergent groups. 

2) Web Content Accessibility Guidelines (WCAG): Guidelines from the W3C that provide a framework for improving accessibility. The W3C is a regulatory body for the internet and provides tonnes of information on best practice, including a comprehensive suite of accessibility guidelines. Have a look if you like but the documentation can get a little technical and may be best read by your web developer. 

3) WebAIM: Another similar body to W3C, WebAIM offers lots of free & paid evaluation tools, training, and technical assistance for web accessibility.

4) Screen Readers: help those who are visually impaired to engage with your website through a piece of software that reads all of the text in the current viewport. Ensure website compatibility with screen readers like JAWS, NVDA, and VoiceOver.

Practical Steps to Improve Accessibility

1) Use Semantic HTML: Ensure your web developer uses semantic HTML to improve accessibility. Now it may be hard to test this yourself as you won’t necessarily know what you’re looking for or at. Essentially websites are built using “tags”, which signal to web crawlers what this code chunk is, so we have <p> tags, which are used for paragraphs of text, <footer> tags that signal the footer of the website, <header> tags that signal the header of the site, <address> tags which are used for writing the address and hundreds more. 

2) Add Alt Text to Images: Provide descriptive alt text for all images. As mentioned previously each image has an “alt” tag, which is a small line of text, maybe 5-7 words describing that particular image. You may have seen it occasionally when an image cannot be found and you see a small piece of text in the blank space. 

3) Enable Keyboard Navigation: mentioning this one again but ensure all interactive elements are accessible via keyboard using the “Enter” key. You can test this yourself by seeing if you click on buttons and links using the “Enter” (& “Tab”) key

4) Clear Form Labels: Label form fields on your contact, newsletter and application forms clearly and provide accessible error messages. Ideally you should steer clear of “placeholder text” (the text you see in the form field signalling what the field is for such as “First name”, “Email”, “Telephone”, etc.) and stick to just using labels that sit above each form field. 

5) Ensure Text Contrast: Use tools to check and optimise colour contrast between text and background. I realise this can be difficult depending on the colour palette you have chosen but bear it in mind when picking background and text colours. 

6) Responsive Design: Make sure your website is functional on all devices and screen sizes. This is important for accessibility, user experience and also user experience. You can check if your website is mobile friendly by using Google’s free Developer Tools. 

Top Tips for Designing an Accessible Recruitment Website

1) Colour Contrast: As mentioned ensure sufficient colour contrast for text readability.

2) Avoid Colour-Only Indicators: Use patterns or text to highlight important information, not just colour.

3) Form Accessibility: Use clear labels and instructions for form fields and avoid placeholder text if you can.

4) Keyboard Support: Ensure all navigation and interactive elements can be used with a keyboard such as “Enter” and “Tab” (and various other keys).

5) Focus States: Design visible focus indicators for interactive elements. A focus state is the coloured box around a field or a button when it is selected. Make sure these are easily seen so users know which element they have selected. 

6) Alt Text for Images: Write useful alt text for all non-text content and save your image with a descriptive file name.

7) Semantic Markup: Use correct HTML markup to help assistive technologies read your content. If you really want to test this, you can access the HTML code of your website using the Google Developer Tools and there are plenty of free tools out there when you copy and paste your code in to check how semantic it is. 

8) Accessible Animations: Avoid animations that flash more than three times per second to prevent seizures or discomfort. I have Epilepsy myself and although I haven;t had a seizure in over a decade some flashing images can still make me uncomfortable. 

Conclusion

Making your recruitment website fully accessible is not just about compliance; it's about creating a welcoming and inclusive environment for all users. By following these guidelines and continuously improving your site's accessibility, you can attract a wider pool of talent and enhance your agency's overall recruitment efforts. For more information and assistance in designing an accessible recruitment website, get in touch with us.