Common Website Accessibility Mistakes and How to Fix Them

46 minutes ago

7 min read

What is accessibility and why does it matter?

Accessibility is far more than just a marketing decision that you make. Accessibility is far more than just a marketing decision; it ensures that every visitor has equal access to information, regardless of disabilities or impairments. By having an accessible website, you not only comply with the current laws made to level the playing field, but you show to all visitors that you care about their experience from the start. Unfortunately, unless you know the rules, it can be easy to make decisions that will be detrimental to some people’s experience on your website. The good part? Once you’re aware of the rules, it’s easy to make small, meaningful changes that will improve the experience on your website for all visitors. In this article, we’ll explore common accessibility mistakes businesses make on their websites and how to fix them.

Older woman wearing glasses sitting in front of a laptop.

What’s the Standard for Accessibility on Websites?

The World Wide Web Consortium – also known as the W3C – is a not-for-profit organization that was founded in 1994 by Tim Berners-Lee that has a noble goal in mind: Making sure that the internet remains open, accessible, and interoperable for all users. In the pursuit of this goal, the W3C has developed comprehensive guidelines to facilitate web accessibility: the Web Content Accessibility Guidelines, or WCAG. The WCAG is guided by 4 core principles. A website should be:

perceivable
operable
understandable
robust

These principles feature multiple tiers of compliance ranking from A to AAA, A being the bare minimum. The benchmark set by most accessibility-focused legislations asks for a compliance to WCAG 2.1 AA, or higher. For the purpose of this article, we will concentrate on the AA guidelines.

Insufficient Colour Contrast

What company do you think about when you see the colours red and yellow? If you thought about the golden arches of McDonald’s, you’re not alone. As one of the most recognizable brands in the world, McDonald’s now figuratively owns yellow and red, and its major recognition from colours alone is a good lesson in what strong branding can do to make your company memorable.

Colour is one of the most important choices you will make for your business. A unique colour combination can not only make your website and promotional material look more appealing but, like McDonald’s, can help your business be immediately recognizable.

When building your brand book and your website, using your brand colours is important, but using them with intent is the first step in making sure that your website is accessible to all. That intent includes having the correct colour contrast between the background of a section and the text on top of it.

What is considered a good colour contrast? It depends on the size of your text.

Accessibility Best Practices for Colour Contrasts

For large text (24 px or 18 px bold) should have a contrast ratio of at least 3:1, meaning that your background needs to be at least 3 times lighter or darker than the text on it.
For normal text (23 px or less, 17 px or less when bold), the contrast ratio should be 4.5:1 to be compliant with WCAG AA standards.
When putting text on top of an image, put a darker or lighter overlay on top of the image to avoid making text harder to read.

Not sure if your colours are up to par? There are many online tools that can be used to test the contrast ratio between two colours so you can easily adjust if falling short.

Unidentified Form Fields

A completed form is a sign of success and, ultimately, the goal of many companies’ website. Labelling each field may seem like common sense; without clear labels, visitors may not be able to tell what information belongs in each field. But a lot of websites rely on placeholder text in each field instead of using proper labels, decreasing accessibility. In fact, 51% of forms tested by WebAIM in their 2026 accessibility study didn’t have proper labels.

Yes, placeholder text is legible to many modern types of assistive technology, but they aren’t as efficient as proper labels. As placeholders disappear once information is typed, they force visitors to rely on their short-term memory to recall the information requirement for each field. For people with attention deficits, working memory limits, or other cognitive impairments, losing the placeholder text can cause confusion and anxiety while also increasing errors in filling the form.

Accessibility Best Practices for Forms

Give every field a descriptive, visible label, such as “Email address” rather than a vague “Enter details.”
Ask your web developer to connect each label to its field in the website’s code.
Do not rely on placeholder text inside the box as the only label.
Identify required fields in words.
Explain any special formatting before submission
Provide helpful error messages that say what went wrong and how to correct it
Test that visitors can complete and submit your form using only a keyboard.

Missing Alternative Text

They say a picture is worth a thousand words but never underestimate the power of actual words when it comes to the accessibility of your website. Alternative text not only helps optimize your website for search engines, but also enables visitors who rely on screen readers to understand the content and context of your images, ensuring they have access to the full picture.

According to WebAIM’s report on accessibility from 2026, 53.1% of the homepages evaluated had at least one image without an alternative text, rendering at least one portion of the content inaccessible to people with vision impairments.

Do all images need alternative text? No.

As a general rule, writing an alternative text for anything that conveys information is a must.

A bar used use purely aesthetically as a divider on the website? It can be marked as being a decorative element. This will cause screen readers to skip over that element completely, reducing unnecessary descriptions for the end user.

An image used to illustrate the block of text next to it? While it may not convey important information, the content of the image can show important context and should include a descriptive text.

Accessibility Best Practices for Alternative Text

Keep your description clear and concise.
Maximum of 150 characters.
Avoid starting with “Image of” or “Picture of”.
Be descriptive (Who is in the image, what is happening, key elements).
Avoid keyword stuffing.
End your alternative text with a period.

Poor Heading Structure

Think of your website’s headings as a roadmap. They help visitors find the information they need without reading every word. Headings help visitors scan through your website to find information quickly, and help search engines prioritize and categorize your content. But headings have another function; people using screen readers can also navigate from heading to heading, making a clear structure especially important.

So, what are the most common heading blunders?

Text that aesthetically looks like a heading without being assigned a heading level
Headings out of order
Assigning a heading for style and not for function

Accessibility Best Practices for Headings

Give the page a descriptive main heading (H1).
Use H2s for its main sections, and H3s for subsections within them.
Avoid skipping levels when opening a subsection, such as jumping from H2 to H4.
Change the styling (font size, weight, etc.) of the correct heading instead of choosing a heading out of order because your prefer its established style.

Before publishing, read only the headings in order. Do they give a clear outline of the page? If not, adjust the wording or hierarchy so that visitors can understand how the information fits together.

Inaccessible PDFs and Embedded Content

Accessibility doesn’t stop at the edge of your web page. Downloadable brochures and embedded videos are all part of your visitors’ experience, too. If that content is difficult to read or operate, it can prevent people from getting all the information you’re trying to give or completing a task.

PDFs and videos are some of the most commonly-used methods to convey a lot of information quickly, but they aren’t always made accessible to all. PDFs are often just an image of text, the written words indistinguishable from any other graphic elements, rendering it illegible to assistive technologies.

Videos can also have their fair share of problems. Between dialogues and narrations that may not be available without accompanying text, fast moving content that can be harmful to users, a lack of description of the content shown, and erroneous automated closed captions, the video on your website may only be useful to a handful of visitors.

Accessibility Best Practices for PDFs and Embedded Content

PDFs

Start with an accessible source document.
Use proper Headings.
Ensure link texts are meaningful.
Provide alternative text for informative images.
Identify all table headers.

Videos

Provide accurate captions.
If using automatic captions, review them before publishing.
Offer a transcript.
Ensure important visual information is described.
Avoid fast cuts and flashing patterns.
Test to ensure that controls are accessible through a keyboard.

Wrong Font Choice

Your brand’s font may look great in a logo, but that doesn’t mean it’s the best choice for a full page of text. Decorative lettering, very thin strokes, and tightly packed characters can make your content harder to read, and that’s only the beginning. Certain fonts use characters that are very similar from one another, making it harder to distinguish them. Some fonts don’t scale up nicely, rendering them harder to read for people requiring a larger font size. The goal when picking a font for the text on your website should be not only to choose a stylish font, but to pick one that will make your message easy to read and understand. So, what font should you use? Accessibility Standards Canada suggests the following:

Arial
Aptos
Verdana
Calibri
Lato

If none of those appeal to you, you can find many accessible serif and sans-serif fonts, you just have to pay attention to best practices when picking a font.

Accessibility Best Practices for Font Choices

Simple design.
Letters and characters that are easily distinguishable.
Font size is at least 16 px.
The letters don’t mirror each other.
There is a good amount of space between each character and each line.
The font isn’t excessively ornate.

How to Prevent Accessibility Issues

Many website platforms offer features that support accessibility, but a platform alone cannot guarantee an accessible website. The template you choose, the content you publish, and the tools you add all affect the final experience.

The good news: knowing is half the battle! By simply being aware of factors that can improve your website’s accessibility, you’re halfway there. And the rest is not so difficult.

Start with a publishing checklist:

Check colour contrast.
Review alternative text.
Confirm heading levels.
Check that your forms are labeled.
Make sure your content is easy to read.
Test downloadable or embedded content.

Share the checklist with anyone who creates or updates your website, so the same standards are applied consistently. Next, you can verify with your webmaster what features your website platform has and how they ensure that your website complies with accessibility best practices and guidelines.

Need to Redesign Your Website for Accessibility? Yellow Pages Can Help!

Whether you want to redesign your website because you’ve found accessibility gaps or just want to give your website a facelift, our team can help! Powered by Wix and its many accessibility-friendly features, all our websites are built with accessibility, AI readiness, and good design practices in mind. Speak to an expert about your website needs today!