Make Your Website Welcoming for Everyone: A Solo Business Owner’s Guide to Accessibility

A man is sat at his desk looking at his tablet looking frustrated.

Photo by Surface on Unsplash

If people can’t enjoy your website, you’ll lose them.

And you’re here because you want a website that everyone can experience, free of frustration.

The whole point of your website is to convert curious visitors into clients, community members or subscribers. You want them to take action, and ultimately to choose you. So the last thing you want is for potential clients to get frustrated and leave. 

And if you, like me, want your website to spark interest and create meaningful connections, we should create an accessible experience that aligns with your values of care and inclusivity. 

What exactly is website accessibility?

An accessible website means that anyone can access and enjoy it, no matter their ability.

So all website pages, website content, integrations, functionality, features, navigation and generally the way you move through it is easy to navigate for anyone who may have disabilities or impairments. We need to consider how our websites affect visitors who may:

  • Be using a screen reader

  • Have low or impaired vision

  • Be deaf or hard of hearing

  • Have dyslexia

  • Be on the autism spectrum

  • Have physical or mobility difficulties

As a small business owner, it’s important to know that there are over 16 million people with a limiting long term illness, impairment or disability (Family Survey, 2022). By making your website accessible, you’re also upping your own opportunities to reach more potential clients.

Is it a legal requirement?

All businesses, even us solo business owners, have to make sure that everyone can access our website information in accordance with the Equality Act of 2010 in the UK, Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act in the US, European Accessibility Act, Web Accessibility Directive in the EU, and Disability Discrimination Act 1992 (DDA) in Australia. 

How to start making your website more accessible

I’m no accessibility expert, but I know enough about design to be intentionally inclusive. I’ve broken down the areas of accessibility and some ways to fix the most common problems I spot.

Visual Accessibility

Some website visitors may have low vision, impaired vision or colour blindness. We don’t all see elements in the same way, so design and layout needs to consider visually impaired users. Your website should have the following:

  • Good colour contrasts: Low colour contrasts, like yellow on white, or white on a light blue, makes your elements hard to read. If your brand’s colour palette instructs you to use those colour combinations, deepen the hues until the colour contrasts pass AA standards. You can check your colour contrasts with tools like Colour Contrast or Coolors Contrast Checker.

  • Legible font sizes: Keep your body copy over 16px. Users shouldn’t have to zoom in to read your words as it can impact the layout, affecting the website experience.

  • Generous spacing between groups of buttons: Multiple buttons and clickable elements need good spacing between each other so that they don’t appear as one button

  • Use words to share information, not just image, colours and icons: Using words to give information or calls to action means that it won’t be missed by people who can’t differentiate between different colours or screen readers. Icons are fine as long as accompanied with the important text.

Example of a good font size vs a non-accessible font size for body copy.

Navigation

Some visitors might be using the keyboard to access the website instead of a mouse, or may be using assistive technology like a screen reader. So navigation needs to be simple and easy, avoiding any complicated layouts, popups or hidden content. You should:

  • Use a logical layout: Make sure that visitors can navigate through content in a logical order using the tab button without jumping to content and sections that aren’t actually next to each other.

  • Add alt text to website images: Provide a description of your images into the ‘alt text’ field whenever you upload one. That way, visitors who can’t see them due to visual impairment or slow loading have the context. You don’t need to provide alt text for decorative images like backgrounds or patterns.

  • Make sure a keyboard can access all of your elements: such as buttons, forms and any link text.

  • Include a ‘skip to content’ button: this allows screen readers to bypass the navigation links and all the repeated content so visitors can get straight to the good part. If you’re using a builder like Squarespace or Wix, you might already have one.


Content

Structure and support your content so that visitors using assistive technologies, and visitors with dyslexia or autism can experience your website without friction. This includes:

  • Avoid underlining, italicising, and uppercase text: Underlined text looks like link text. And Words can look crowded and bunched together for some visitors

  • Changing any link text that says ‘click here’: All links need context, so be descriptive and informative

  • Roomy form fields and spacing: Use roomy form fields and include sufficient spacing between fields and buttons. Also make sure your form fields are labelled, and include descriptions where it’s needed.

  • Correct content structure and HTML5: And all copy should be using the correct tags, like H1, H2, H3 and Body tags. H1 should only be used once on a page, and as it sits at the top of the hierarchy, it should title, or summarise the page.

An example of how to make your link text accessible, showing body copy that has an unhelpful linked text as ‘click here’, vs a good example with a sentence detailing the link’s context as the hyperlink.

A good and bad example of how your link text should be labelled.

 

Multimedia

Images, audio and videos may not be accessible for all visitors. Visually impaired visitors will need context for images, and deaf or hard of hearing visitors will need context for video and audio clips, so:

  • Images on text: Don’t create images with text. All content for reading should be accessible to screen readers. It can’t be zoomed in or adapted to the user's needs.

  • Add captions to videos: You can do this using Capcut or Canva’s dynamic text feature.

  • Add transcripts to audio: Include a transcript with audio clips, particularly podcast episodes. If it’s an instrumental music clip, consider adding a caption detailing the audio and its context.

  • No autoplay: Avoid making video and audio autoplay because it can be overwhelming for some visitors with sensory needs.

Avoid: adding important text in image files. Instead, use live text on or next to your website images.

 

Forms and Popups

I’m thinking of my own Mum and her reduced mobility here. Some forms are a nightmare for her and other visitors with reduced mobility or physical disabilities to access. So:

  • No time limits: remove any timed restrictions on forms, popups or actions so that users can get through them at a comfortable pace

  • All form fields must be labelled: Help users complete forms without friction with clear field labels, and helpful descriptions and error messages.

  • Form redirection: If users are redirected to a landing page once they’ve submitted your form, make sure it’s not a dead end if there’s no header or footer.

A non-accessible form example with small form fields, no field labels vs an accessible form with form field labels and good spacing between elements.

 

Small screens and mobiles

Consider the accessibility for visitors experiencing your website on a smaller screen like a tablet or mobile phone. Google actually penalises websites that are not mobile friendly which affects your search-engine visibility. To be small screen friendly:

  • Use a responsive design: adapt your design to look great on all screen sizes. 

  • Good sized buttons and spacing: If buttons are too small, they’re difficult to press on touch devices. And avoid grouping buttons and clickable elements too close to each other.

  • Be compatible with assisted technologies: Content should be readable for users who need audio assistance or screen readers.


Free and Paid Accessibility Tools you can use

An accessibility poster that details how to design for accessibility, part of a series from the Home Office UK

1o f 5 Accessibility Posters available to download for free from the Home Office UK website.

These are just a few of the most common issues that I find when business owners build their own websites. If you want to make your website fully accessible, here are some useful website accessibility tools to get you started:


Don’t let style impact your website experience for the people you want to reach. A compliant website can still be beautiful and unique when designed and developed with accessibility in mind. And if you need my help with that, let’s talk about your website goals.

And if you know more about accessibility that you’d like to me know, I’d love to learn! As said, I’m no expert, but I’m always willing to expand what I do know and apply to my own practices.

Kayleigh Hall

Kayleigh is the founder and designer of Hall Creative, a brand and website design studio based in Walsall, UK. Kayleigh has been supporting small conscious business owners help people see and choose them by creating humanising brand and website experiences shaped by brand strategy.

To work with Kayleigh, explore brand and website services before dropping her a line in the contact form to start the conversation about you.

http://hallcreative.co.uk
Next
Next

Cover your website with the right legal policies