We’re passionate about accessibility here at Chatter, so our in-house Digital team pay a lot of attention to accessible-measures when we design and build digital solutions. And our journey towards accessibility-first solutions to employer branding projects started with a careers website for ITV a few years back. 

We set our goal to make their new careers website as accessible and inclusive as we possibly could within timeframes and budgets. And, after working closely with both The Shaw Trust (specialist accessibility auditors) and ITV’s newly-founded internal accessibility team, the site we built was truly a cut above the competition.

How did we go about the project? Well, we quickly found out that building up our expertise on all things website accessibility meant getting things wrong and learning from them. A lot. And that’s okay! 

Having (multiple) good 3rd-party accessibility audits was a real learning experience. It made us think a lot more about how websites are constructed and how they are used differently to our own experiences - and that really helped us build our knowledge and understanding around accessibility - something that we try to include and be mindful of in all our website builds. 

How you should approach building a website 

First things first – invest in thorough solutions, not just adding ‘Accessibility tools’. These ‘tool’s just cannot and will not fix a lot of underlying accessibility issues, so they’re often seen as just for show. You can learn more about this at Overlay Factsheet. They can have their place (eg as you get older your eyesight probably deteriorates - having a few on-screen helpers can make your website a bit more usable – but it doesn't fix some of the more fundamental problems that could inhibit the use of the website for people with stronger disabilities, and if implemented badly can make their experience worse.

People with diagnosed disabilities often have their own accessibility tools like screen-readers*, so making websites accessible from the ground up benefits everyone - and it’s also great for SEO - google’s web crawler indexes the website much like a blind user!

*fun fact: Apple Macs have great screen readers built in, just press Command+F5 to turn it on and off!

With that in mind, here’s some of the things we think matter most when building accessible websites.

Well structured, semantic HTML 

Put simply, html elements should have text marked up, to indicate things like whether a line of copy is a heading or a paragraph. These should be in sequential hierarchical order, for example using ‘heading levels’ for their actual level of importance, not for visual size and style purposes. 

Also, using HTML lists and making use of niche but practical HTML tags, such as, when you’re displaying a quote from someone can make a big difference to understanding for someone using a screen reader.

Using hidden “Aria Labels”

You can add “Aria Labels” to HTML elements to provide some information about its purpose and functionality. That way, when the functionality is a little more complicated, screen readers can better understand, and the person visiting can get verbal hints to what’s happening on your site.

Image Alt Text 

Screen readers can’t figure out the content of images alone (and AI isn’t quite good enough to understand the content images yet) – they rely on you to describe the image in text form through “alt” tags on images in the HTML, which a screen reader will then read out to describe the image. 

Colour contrast

For people with poor eyesight, colour blindness or reduced vision, the colours you choose for the foreground text and the background it sits on are incredibly important – because they make a huge difference in how easy it is for them to read, especially with poorer eyesight or colour-blindness. 

A Colour Contrast tool such as https://colourcontrast.cc is great for checking your colour combinations, and how accessible they are to different eyesights – we aim to pass AAA-rating for both large and small text.
 

Colour Blindness

Red/Green colour-blindness is pretty well known, but did you know there’s a whole range of different colour-blindness? www.color-blindness.com is a great site for understanding just how many different kinds there are (and there’s a lot), and what they look like. 

This doesn’t mean you should check every colour choice against every colour blindness combination. There’s just too many for it to be an achievable practice. 

A more practical approach is to avoid using colour to convey meaning. 

For example, if you’re showing a warning message, don’t just make it red to show it’s significance, include a warning triangle ⚠️ too and ensure copy conveys that there is a problem. Or on graphs don’t just rely on colour for the lines/bars to differentiate between them.
 

Keyboard-only navigation 

If you’re visually impaired and using a screen reader, or if you have a disability that causes motor-control issues, you can’t use a mouse or trackpad to navigate a website. So, we’re careful about not only making sure a website can be fully navigated with only a keyboard, but also trying to make it easy to skip elements for easier browsing. 

Try going through a website using just the [tab] key to move between links and fields, in combination with enter to select things, to experience it yourself.

You can find out exactly what we do to improve keyboard navigation in our handy digital guide here.
 

Dynamically changing content

Sometimes you may show or hide website content on a screen based on interactive actions, for example, using a “load more” button that dynamically reveals more blog posts. 

Doing this is fine, but it’s important to understand that a screen reader is unlikely to see or explain what’s changed on the page to the visitor, so it needs a little extra help. 

So, for this blog example, when we add the new post to the screen we would also move the ‘focus’ of the web browser to the first loaded item. That way, the screen reader begins reading out that blog post, and nothing gets missed. 

Reduced Motion 

With some disabilities, people can be very sensitive to motion or find it distracting, such as on-screen movement and animations. Windows and MacOS support the ability to disable animations in the operating system. And modern web browsers can see that setting, and expose it to webpage developers so that we can disable all animations/videos on the page. 

Reduced Transparency 

This is a very new feature, and only available on MacOS right now in Google Chrome.
Similar to ‘reduced motion’, users can specify in their (MacOS) system settings that they don’t want transparency used – often because it makes things more visually complicated, or makes text harder to read when displayed over an image. 

On a Mac, and if the user is browsing with Google Chrome, we can identify this setting and then amend the website styling to disable any transparency used, to give the user a better experience. 

—

Hopefully this gives a flavour of some of the things we like to consider when building careers websites to make them more accessible. If you’d like to have a more detailed chat about it, or would like a little advice about your own website, feel free to get in touch - we’d love to have a chat.