We don't expect you to read something that we couldn't be bothered to write, and that's why we don't use AI to create our blogs. The info, advice, and opinions you're about to enjoy are straight from the brains of Holly and Sophie AKA The Good Eggs.
We may include affiliate links. This allows us to make a little bit of ££ at no extra cost to you. We promise to only spend it on good stuff.
As big-hearted small business owners, we want everyone to feel welcome in our digital spaces. A key part of that is ensuring that our websites are accessible.
In this blog, we’ll share a range of website accessibility tips to ensure that anyone can visit and use your website with ease. They’ll help make your site more user-friendly for people with disabilities, which will also improve your website’s user experience for all visitors.
Some of our tips for how to make your website accessible also have the added benefit of increased SEO performance and a more eco-friendly website.
These tweaks and changes are ones that we think should be doable as a DIY website owner, no matter the website builder that you use. We don’t expect you to have any coding knowledge, and we’ve avoided using technical jargon wherever we can.
Depending on your sector and country of operation, specific accessibility legislations might apply to your site. This blog is intended as general guidance — if you have specific requirements or questions about how to make your website accessible, please do get in touch.
Are you building your first website and want to be doubly sure that it’s accessible? Our Squarespace website package might be for you!
What Is Website Accessibility?
Website accessibility simply means ensuring that websites are usable for all visitors, regardless of ability.
You need to consider different types of disabilities and conditions when designing your site, as these will impact how people access and understand what’s on the page. These include:
- Auditory disabilities (hard of hearing, deafness, deaf-blindness)
- Visual disabilities (low vision, blindness, colour blindness)
- Speech disabilities
- Motor/physical disabilities
- Cognitive disabilities
- Age-related ability concerns
- Temporary disabilities (post-surgical restrictions, injuries)
If you’d like to learn more, the World Wide Web Consortium (W3C) has loads of useful information about accessibility fundamentals, including in-depth guidelines and a free course. The Director of W3C is Tim Berners-Lee, the inventor of the World Wide Web, so we trust them to know what’s what when it comes to the internet.
Website Accessibility Tips For Site Design
Up Your Colour Contrast
Whenever we audit a website for one of our power hour calls, one of the most common accessibility issues we spot is low colour contrast. A low level of contrast between your text and background colours makes your site hard to read, especially for folks with visual impairments, low vision, colour blindness, or photosensitivity.
Here are some examples of high and low contrast buttons so you can see what we mean…
Lots of DIY website templates focus more on aesthetics and aren’t created with accessibility in mind, so they might have colour contrast issues.
Thankfully, there are some easy ways to check the colour contrast on your site and fix it (if needed) using the accessibility tools below.
WAVE Web Accessibility Evaluation Tool
The WAVE Web Accessibility Evaluation Tool flags a wide range of accessibility issues but is especially useful for checking colour contrast on existing sites. Visit their website and copy in your web address (or use their free browser extension).
Coolors.co Contrast Checker
We love the Coolors colour palette generator, and their other tools are just as helpful. Use Coolors’ contrast checker to test text and background colour combos. The tool also suggests alternatives if your chosen colours aren’t high-contrast enough to be accessible for those with visual impairments.
Canva Accessibility Checker
Canva is one of our favourite online tools. If you’re mocking up designs or making graphics for your site or socials, use Canva’s Accessibility Checker. In a design, head to File > Accessibility > Accessibility Checker.
Want to hear more from Good Egg? Subscribe to our fortnightly newsletter The Highly Emotional Business owner 💌
Soften Pure White And Black
Black text on a white background is a fairly standard combination. However, pure black text (#000000) on a pure white background (#ffffff) can be harsh to look at, especially for a long time. It can cause eye strain and also be hard to read for people with cognitive disabilities, like dyslexia.
Softening the versions of white and black you use for your website will make the reading experience more pleasant for everyone. If your brand colours don’t already include a white-ish and black-ish colour, here’s an easy way to pick some…
- Head to coolors.co (told ya we loved them)
- Copy the hex code of one of your main brand colours into the generator
- Select the ‘View shades’ grid square in the centre of the colour block
- From the colour spectrum that appears, pick the lightest shade and the darkest shade (unless they’re #ffffff or #000000, then pick the one beneath)
- Depending on your brand colours and website, you might need to experiment with a few options, but once you’ve found the right shades, these will then be your off-white and off-black
Show Meaning With More Than Just Colour
In lots of instances, colour is a useful shorthand: red means stop, green means go, etc. However, to make sure your website design is accessible, colour shouldn’t be the only way that you show meaning, as the difference may not be noticeable for those with visual impairments, particularly colour blindness.
According to Colour Blind Awareness, roughly 4.5% of the UK population has colour blindness — that’s approximately three million people!
An area where it’s easy to make this mistake is with links. It’s common practice online for link text to be in a different colour. However, you also need to be able to show it’s a link in another way, as someone with colour blindness might not be able to see the colour change. That’s why it’s best practice to also underline links.
On that same topic, because underlined text is generally accepted to be hyperlinked text, avoid using underlining for emphasis in your website copy. People will assume it’s a link, and that could get confusing. If you want to put a little oomph in your text, use italics instead.
Make Sure Your Buttons Are Accessible
When people come to your biz’s website, there will be certain actions that you want them to do — whether that’s getting in contact, buying a product, or finding out more about your services. The best way to get the visitor to do this is with a call to action (CTA), which often takes the form of a button.
The humble button is the real power player when it comes to your website. Without them, it’s very hard to actually get anything done on your site, so don’t overlook their importance.
Here are a few ways to make sure that your buttons are accessible:
- Use bigger buttons —they’re easier to see for folks with visual disabilities and easier to click or tap, for those with physical disabilities
- Check the colour contrast of your button text and background
- Keep button colours consistent — having familiar patterns throughout your site (e.g., all buttons are pink) makes it more straightforward to navigate
- Have white space around buttons — overcrowding your buttons could make it harder for people with motor skill disabilities or visual disabilities to select the right button
You should be able to tab through all the buttons on your page using keyboard navigation
Have A Responsive Website
Making sure your site is responsive (aka it works well on all screen sizes) is a no-brainer for the modern website owner. According to reports from Statista, more than half of all global internet traffic is now coming from mobile phones, so if your website doesn’t work well on small screens, you’re potentially halving your customer base.
For accessibility, responsive sites are important because they scale well, which allows users with visual disabilities to zoom in properly. A good way to test this on your own website is to go to your browser’s ‘View’ menu and zoom in to 200%. In this zoomed-in view, check on the following:
- Does the layout still make sense? Are buttons, headings, and other visual content still near to relevant sections?
- Have any elements on the page moved weirdly far apart or smushed together?
- Do you have to scroll horizontally to see all of the content?
- Do all of your buttons, forms, menus, and other functionalities still work?
If things look odd with the content zoomed in, you’ll need to edit your website in responsive mode.
With our Website VIP Day, you can buy a day of our web lead Holly’s time to audit your site’s accessibility AND make all the necessary fixes for you.
How to Make Website Copy Accessible
How you format your copy is another key factor in accessible design. The right styling and structure will make your text more readable and easier to understand and make your site clearer for visitors, screen-readers, and search engines.
Be Sparing With Centre-Aligned Text
The symmetry of centre-aligned text is very pleasing, and it looks nice laid out on the page. However, because each line starts in a different place, large blocks of centre-aligned copy can be difficult to process.
As a general rule of thumb, if a block of text is more than three lines long on desktop, you should have it left-aligned for maximum readability.
Choose Readable Fonts
If you also started using computers in the era of colourful, wavy WordArt and school projects with Jokerman and Papyrus title pages, it can be easy to overcomplicate text choices. Swirling ‘handwritten’ fonts, teeny tiny text, blocks of copy written all caps — lots of “aesthetic” text design choices can actually be bad for accessibility.
For accessibility, though, less is definitely more. You ideally want to make your text as simple and legible as possible. We’re certainly not suggesting you style your entire website with Comic Sans (although that much-maligned font genuinely is very accessible), but there are a few rules you can follow, which have been summarised nicely by Accessibility Checker:
“For any body copy, a font size of at least 16px and no less than 13px is recommended to aid with readability. It’s also best to avoid all CAPS, which can be difficult for some people to read.
It’s also important to choose an accessible font. Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman are all good options.”
Use Headings Properly
There are six levels of headings you can use on your site, which normally appear in your editor as Heading 1 – Heading 6 (or H1 – H6).
These aren’t just a design feature to make your titles and subheadings look nice. Using headings to create content structure is important for both accessibility and SEO. Headings help users with screen readers (and Google’s little search engine robots) understand how your page is structured and what it’s about. They also help break up your website copy to make the text easier to understand and more skimmable.
Make Your Links Descriptive
Links on ambiguous phrases like ‘Learn more’ or ‘here’ in copy can create uncertainty, especially for screen reader users. It’s not clear where the link is going to take them, and if you have a lot of ‘Learn more’ links within the same page, that can be very confusing, as they might all go to different places.
Instead, the best practice is to use descriptive links that tell the user where the link is going to take them. This also has positive effects on SEO.
Here’s an example:
Bad: Go here to learn more about Good Egg’s tone of voice services.
Good: Learn more on the tone of voice page of our website.
Descriptive links are also helpful for those with physical disabilities, as, just like using bigger buttons, linking a whole phrase rather than just one or two words gives them a larger surface area to click or tap on.
Being inclusive is just one of the pillars of building a joyful biz that we’ve covered in our FREE ebook The Good Egg Guide to Building A Feel Good Business.
Website Accessibility Tips For Media
As you add images and videos to your site, it’s important to consider how different people will access them. Here’s how to make your website’s media accessible.
Add Alt Text To Your Images
Alt text (or alternative text) is a text description of an image that can be read out by assistive technology. Including alt text makes your website more accessible for people with visual disabilities or users with screen readers, as it means they don’t have to be able to see the image to understand the page.
Every image you add to your website should have alt text attached or be marked as ‘decorative images’, which lets screen readers know that a particular image is just a decoration and doesn’t add any additional meaning to the webpage. To mark an image as decorative, there will usually be a little checkbox in the same screen as where you add your alt text.
The RNIB has some useful advice on writing good alt text, as does vision-impaired blogger Veronica Lewis at Veronica With Four Eyes.
Well-written alt text isn’t only important for accessibility but can also help your site’s SEO. The robots that find information for search engines can’t ‘see’ images, but they can read keywords in your alt text. We’ve written more about this in our blog on diverse stock imagery.
Caption Video Content (and Don’t Set It to Autoplay)
Having videos on your site is a great idea. A 2024 report on video technology suggested that 83% of people want more video content from brands, but only 19% say they frequently receive it.
An absolute must if you’re adding videos to your website is including captions. By captioning your video content, you make it accessible for visitors who are deaf or hard of hearing, but there are all sorts of other benefits to captioned videos.
According to the BBC, the majority of Gen Z audiences prefer to watch media with captions, and having subtitles also makes your content more accessible for non-native English speakers. It’s also more convenient for those visiting your website on mobile, as they’re much more likely to be watching your video on mute.
Online tools like Capcut or Veed can help you with captioning videos, either for free or at a relatively low subscription cost.
However, even though consumers love video, give them the choice of whether or not they want to play it by turning autoplay off. Autoplaying videos can make it hard for users with cognitive disabilities to focus on the page, and if an autoplayed video has sound, it could interrupt screen readers.
Autoplaying videos is also bad for sustainability, as it forces people to download data (and create digital pollution) for a video they might not actually want to watch. We’ve written more about digital carbon footprints and how to reduce them in our blog on being an eco-friendly website owner.
Website Accessibility Checklist
Here’s a summary of all of our tips on how to make a website accessible and ensure that your website is a welcoming space for people with disabilities:
- Use high contrast colours for text, and if you’re using black and white, use slightly off-white and off-black colours
- Show meaning with more than just colour
- Have a consistent design for buttons (and make sure they’re not too small)
- Make sure your website works on mobile
- Be sparing with centre-aligned text (especially if it’s a long piece of copy
- Use readable, 12pt/16px fonts
- Avoid using all caps
- Create good content structure using headings
- Make link text descriptive
- Add alt text to images
- Caption video content
- Don’t set videos to autoplay
Need More Advice On How To Make A Website Accessible?
If you’re struggling with how to make your website accessible, or the online tools are throwing out phrases like ‘ARIA labels’ or ‘alt text’ that you don’t understand, there’s a Good Egg who can help!
We’ve got a range of ways to work with us to suit every budget:
- Book one of our Free Sample calls to get a little bit of support (for free!) and figure out your next steps
- Schedule a Power Hour call, and we can work through your issues together *
- Or get a whole day of expert attention on your site with our Buy My Day service *
Not sure which service will be most helpful, or need something more bespoke? Get in touch to chat about your options.
* These services are almost ready to launch, but we’re too excited to keep them a secret. The links will take you to the waiting list, so you’ll get an email notifying you as soon as they’re live (along with a juicy discount for being early to the party).
