The top three accessibility issues on websites
“Accessibility” in website design means making sure your website can be easily used and understood by everyone including people with disabilities. That could mean someone who’s blind or has low vision using a screen reader, someone with limited mobility navigating by keyboard, or someone with dyslexia who finds certain fonts harder to read.
The internet is a big part of how we connect, work, learn, and shop. If your website isn’t accessible, you're unintentionally excluding people. And many of those barriers are easily avoidable.
Accessible design improves the experience for all users, not just those with disabilities.
Issue 1: Low contrast in the colours used between text and the background
This is the most common accessibility issue seen on websites. A lack of colour contrast can affect us all at some point when viewing a website in low light, high glare or when tired. It especially affects those with low vision and colour blindness.
Unfortunately this issue can originate in the choice of brand colours, and it may mean tweaking those colours to something slightly darker or lighter.
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios:
4.5:1 for normal-sized text
3:1 for large text (over 18pt or bold 14pt)
Higher contrast is always better for readability, even if it exceeds the minimum.
You can check your website with an online colour contrast checker such as this one https://webaim.org/resources/contrastchecker/. Remember to check your buttons as well as text on a coloured background.
If your colours are not passing, some easy fixes are:
Make the colour darker or lighter so there is a greater difference
Increase the size of the text
Make the text bold and add a bit of letter spacing
Text in logos is exempt from the guidelines, however from a designer viewpoint, why would you not want your logo text to be clear and easy to read for everybody?
Issue 2: Using inappropriate or unclear alternative text for images, or worse no alt-text
This is one of the most common accessibility issues but is also the easiest to fix. All meaningful images should have an alt-text description.
Alt text is a short, written description of an image that’s added to the HTML code of a website. It’s not usually visible on the screen, but it’s vital for:
People using screen readers (often blind or visually impaired users).
Anyone with slow internet or images turned off.
Search engines trying to understand what your images are about.
Your website builder should let you easily edit or add alt-text to images.
Keep each description short, usually around 125 characters. Try not to overthink it.
Be descriptive, but concise.
No need to say “image of”, “photo of”, or “picture of.” The screen reader takes care of that.
But, do say if it’s a logo, illustration, diagram, painting, or cartoon.
Don’t repeat text that’s in the same section of the website.
End the alt-text with a full stop.
Images that are purely decorative or don’t add meaning can be tagged “decorative”.
If an image links to something, use alt-text to describe where it goes and what it does.
Issue 3: Heading Hierarchy
This is an issue I mostly see with DIY websites or ones that have been heavily edited by the owner after they have been handed over from the designer.
Headings aren’t just for making text look bold or big. On a website, they’re used to structure your content in a clear, meaningful order for everyone including Google.
That includes:
People using screen readers who rely on headings to navigate
People who scan quickly on mobile
Neurodiverse people who appreciate a clear, scannable layout
Google, reads your headings to understand what your content is about so it can be indexed and ranked
Heading tags are the hidden html code that provides hierarchy to your headings from the most important to the least. Your website builder should let you choose which tag to apply. Most people decide which to use depending on the size they want the heading rather than its importance. Instead think of your page as a book:
H1 = the title of the book (should only appear once per page and at the top)
H2 = chapter titles
H3 = subheadings under a chapter
H4–H6 = further levels if you need them (but most sites don’t go past H4)
So instead of using headings to just "make text big", each one should reflect the structure of your information.
These are all things you can fix with a few simple tweaks. A more accessible website isn’t just good practice, it’s good for your audience, your reach, and your brand.
Written by Catherine Watson of Boldly Design. Catherine is based in New Zealand and is a graphic and web designer who I work with on many of my website copy projects.