5 website accessibility essentials for small business owners

By Aime Cox-Tennant, founder of Bristol-based web design company Studio Cotton.

Working on your website accessibility is all about identifying and removing barriers that are preventing your disabled visitors from having the tip-est, top-est experience with your small business.

Let’s cut straight to the most important point. As a small business owner, it is your legal duty to ensure nobody is at a substantial disadvantage when accessing your goods and services because of their disability.

And now for what’s probably the second most-important point – I am not a lawyer, and this isn’t legal advice. The guidance and insight shared in this article is coming from a small business website design expert (me, hi!) with tonnes of research and experience implementing website accessibility improvements. Not a lawyer.

I wanted to shed some light on the ways any small business can start to work on their website accessibility, so that you can attract and convert as many website visitors as possible.

1. Nobody expects perfection – but you do need to try

There is no one way that disability impacts how people use websites. Even two people with the same disability can experience different barriers when surfing online.

So if you want to make sure every visitor will have the perfect, friction-free experience with your small business – that’s really admirable and defo the right thing to want. But, it’s probably not possible.

Rather than thinking, “I will never be able to make my website 100% accessible, so what’s the point?” and popping make my website accessible onto the to-do list that resides at the bottom of your desk drawer – I reckon you should focus on doing what you can now – and schedule time to keep learning and keep implementing more wins.

I opened this article with the phrase “identifying and removing barriers” because that is key to website accessibility.
It’s unrealistic that you’ll be able to open your website right now, identify every potential barrier and remove them all – but gaining insight and chipping away, starting today, is the perfect approach for website accessibility newbies.

2. Don’t use yourself as a measuring stick

“I can just about read this text” is a phrase I hear all the time in DIY website design. Whether it’s text on top of an image, teeny tiny text, or low-contrast backgrounds – we’ve all tweaked our settings, sat back and thought “cool, I can make it out so I’ll stop twiddling”.

Unfortunately, what is just-about-accessible to you can often be a barrier to your website visitors. Remember – you are not building your website for you, you are building it for your customers.

Instead of using your own personal experience (and the judgment derived from that experience) as the benchmark for a design feature like text styling, take a moment to seek external guidance – yep, in this example I just want you to Google “website text accessibility”, and implement the advice from tonnes of reputable sources.

3. Keep your website fonts standard

If it wasn’t clear from my last section – the way you style your text is one of the most important and impactful factors of website accessibility.

It is also by far the most common way that I see small businesses create those barriers. If some people can’t read your text – your products, your offers, your prices, your terms and conditions – when others can, then a situation has been created that pops those people at a disadvantage

Now there are a tonne of guides for making accessible font choices, but here I just want to start with an easy one – don’t fluff about with the default/global styling of your fonts, particularly your body text.

• Do not expand the space between letters
• Or the space between words
• Don’t use all caps
• Keep away from italics & underlines

4. Check content can be just as well understood without images

Not everyone who visits your website will be able to see your beautiful illustrations, graphics, and photography – including your product pics.

Pictures may be worth a thousand words, but as we don’t want to put our disabled visitors who cannot experience those pictures at a disadvantage – we often need to write a lot of those words down, too.

Make sure not to include any offers solely in images, e.g. sales promotions, and to thoroughly describe the physical characteristics of your products within your product descriptions.

5. Use your headings properly

Headings and subheadings on a website are usually marked up with tiny bits of HTML code, the headings tags e.g.:

• <h1>Heading 1</h1>
• <h2>Heading 2</h2>
• <h3>Heading 3</h3>
• <h4>Heading 4</h4>
• <h5>Heading 5</h5>
• <h6>Heading 6</h6>

A lot of DIY website designers (and some professionals too) treat these tags as a bit of a font style palette. Want a really big bit of text? Nab an H1. Tiny little heading? H5. Big client testimonial? H3.

That is categorically the wrong way to use H tags. As well as impacting styles on some website builders/themes, H tags have a defined hierarchical meaning, and should be used like this:

• Each page (including products and blogs) has a single H1, usually the title
• That page is then divided into clear sections, starting with an H2
• And if/when one of those sections needs to be broken down into subsections, those should start with H3s
• And when one of those subsections needs to be broken down into sub-subsections, those should start with H4s

Using heading tags all willy-nilly creates a colossal barrier for people browsing online with a screen reader, which, as you might’ve guessed, reads out the content of the screen.

Screen readers can use the headings of the page as a navigation, kinda like an internal menu for each page, product and blog article.

Incorrectly applied heading tags make content on your website impossible to find and navigate, again creating a disadvantage for some of your visitors.

So there are some easy ways to get started with your website accessibility. Like I mentioned, it’s a really good idea to commit to the ongoing removal of accessibility barriers, so here’s some more resources to bookmark for next time:

• Wave by WebAIM: a free accessibility checker for any website
• The A11y Project: a community-driven effort to make digital accessibility easier
• A set of posters on how to design for accessibility from the UK Home Office
• Funkify: A disability simulator for Google Chrome.