Accessibility as a Marketing KPI

There are plenty of metrics that we all track as marketers as a matter of course. No one bats an eye when we talk about measuring traffic, bounce rate, dwell time or conversions as key performance indicators for our marketing activity.

I think we're missing a big one, though, as an industry – accessibility.

I've been spending a lot more time lately rekindling my interest in web design and there's a fantastic movement in that community where making something that is 'pretty' is now secondary. The primary focus is on making something that is simply usable by everyone. Interestingly, those people focussed on usability tend to make the most beautiful stuff, but that's a correlation that's not really relevant.

Case Study: Nudge Global

I think we should be doing the same as marketers, and here's why:

That's right. A potential 15% of your visitors are dealing with some form of disability that could impact their experience while navigating and digesting your content. That's a huge number. How many of that 15% of your visitors would stop bouncing, stick around and convert if they were simply able to consume your content, or use your product more easily than your competitors? But there's more...

Assuming you're one of the 85% of people without a disability: have you ever been entering information into an online form, hit [TAB] to get to the next input field only to have the focus of the page move somewhere completely different? It's confusing, it's bad UX, and it's a potential cause of poor conversion rates. That is a simple example of inaccessibility, and it applies to everyone. Imagine how confusing that same situation is to someone who can't see!

The bad news is that you're likely excluding a portion of your audience, and as such having a negative impact on your bottom line.

The good news is that this is one of the problems you're most in control of fixing.

What I'll do now is explore some of the easiest things you can do to make your site more accessible. This definitely won't be an exhaustive list, but there will be enough here to help you start welcoming in some of that >15%.

Get Your Structure Right

The structure of the HTML that forms the basis of your pages is incredibly important to overall accessibility. Getting it right means that the example above is very unlikely. Getting it right means that those using screen readers, for instance, can navigate through your content with expected results from their inputs.

• Ensure there's a descriptive page title for every page
• Avoid skipping heading levels, i.e. H2 directly under H1, H3 directly under H2, etc
• Consider using a "Skip to content" link early in the markup

Don't Butcher Your Links

Links are the very foundation of the World Wide Web, being the connection between pages that make it a web. For some reason, developers and marketers have decided to butcher them over the years – so here's a few basics to make sure you're not making things needlessly difficult for your users:

• Don't rely on colour alone to show that something is a link (i.e. you should underline your links)
• Use descriptive link text, describe where the link takes you (i.e. don't use "click here")
• Don't remove default focus styles for links, unless you're going to replace them.

Media

Images, animations & video all have their own accessibility needs to avoid serving up content that can't be consumed by a visitor without alternative. We all want to use great media on the web, but there are a few things you can do to avoid the biggest issues:

• Use Alt Tags descriptively and succinctly. These are what is read out to users of screen readers, so think about how you would describe the media to someone who couldn't see it.
  • BONUS: Search engine bots can't see (oversimplification, but run with it). How do you think they decide what an image is about, and which images to serve for which queries?
• Give transcripts for your videos. Generally you've already got a script, and if you haven't it's a simple task or even simpler outsource activity to somewhere like Fiverr.
• Use animation thoughtfully, and ensure that CSS animations adhere to the prefers-reduced-motion settings.
• Avoid flashing/strobing. You don't want to trigger a seizure.

Contrast is Good

Visual impairment isn't confined to "can see/can't see"; the vast majority fall somewhere on the spectrum inbetween. When thinking about accessibility for those with low vision or colourblindness, contrast is your friend.

• Don't rely on colour alone to convey a message (i.e. UNDERLINE. YOUR. LINKS.)
• Ensure that contrast between text and background is high enough, using a tool like the WebAIM's Contract Checker to check against WCAG levels.
• Avoid very light shades, which are difficult to see on any background for those with low vision.

Make Sure Your Text is Readable

Fonts are something that brands tend to get extremely protective about. Something about how the curvature of the 'a' aligns with the growth of the soul that generic widget x will provide. That's great, but it's useless if that font happens to be illegible by sticking stringently to exact pixel sizes.

• Use a limited number of fonts, with alternatives for those who can't download or use your preferred choice
• Don't use px units, as these don't resize particularly well for those who are zooming
• Use em or rem units instead.

There you go. A non-exhaustive list of accessibility guidelines that, when implemented, will have a positive effect on your visitors' experience. That positive effect on experience will, in turn, transform into better conversion rates and happier customers. I'd call that a pretty useful win.