5 Common Website Accessibility Mistakes (And How to Fix Them)

Clients often ask what they can do to make their websites more accessible without our help, and the answer is: A lot!

Accessibility isn’t just about compliance; it’s about ensuring everyone can use your website effectively. Many businesses and organizations unknowingly exclude users with disabilities due to common accessibility issues, but you need not live in ignorance anymore. In this post, we’ll highlight five frequent mistakes and show you how to fix them.

The problem

Because visually impaired users can’t see images, it’s important to describe the contents of an image to them via alternative (or alt) text. These users rely on screen readers to describe images.

Without alt text, users miss critical content, especially in infographics and call-to-action buttons. It’s important to describe these completely and accurately.

The solution

Add descriptive alt text to all non-decorative images that convey important information. Here are some alt text best practices from Harvard University’s accessibility department:

• Keep it short, usually 1-2 sentences. Don’t overthink it.
• Consider key elements of why you chose this image, instead of describing every little detail.
• However, avoid generic descriptions like “image123.jpg” or “picture of a person.”
• No need to say “image of” or “picture of.”
• But, do say if it’s a logo, illustration, painting, or cartoon.
• Don’t duplicate text that’s adjacent in the document or website.
• End the alt text sentence with a period.

For decorative images, use empty alt attributes (alt="") to avoid cluttering screen reader output.

The problem

Low contrast (or the difference between the background and text on your website) makes it difficult for visually impaired users and people with color blindness to read content. Common issues include light gray text on a white background or red/green combinations.

The solution

There are many ways to check contrast between background and foreground colors on your website. And, once you have a sense of what is ample contrast, you’ll start to notice what might not be enough contrast.

You can use a contrast checker tool (like WebAIM’s Contrast Checker) to ensure a minimum 4.5:1 ratio for normal text and 3:1 for large text.

Also, avoid relying on color alone to convey meaning (e.g., error messages should include text that describes a warning, not just red coloring).

The problem

This is where things may get a little more complicated for a beginner webmaster. Forms without labels or proper focus states can be confusing for users navigating with screen readers or keyboards.

Also, keep an eye out for small or low-contrast buttons that make it hard for users with mobility impairments to click or color blind users to see.

The solution

Most form plugins integrate accessibility features these days, but it’s important to do your homework and research your form plugins and what they’re doing to make their forms accessible, as editing the code may not be simple.

If you want to take a look at the code, be sure your form plugin is using elements for all form fields and associating them with inputs using the for attribute.

Ensure buttons are large enough and have clear, descriptive labels (e.g., “Submit Order” instead of just “Submit”).

Add visible focus indicators so keyboard users can see where they are on the page. Again, this is something either your theme or form plugin should do out-of-the-box.

The problem

There are more website users with motor disabilities than you may think. This can include people with a temporary injury. Many users with motor disabilities rely on keyboards, not mice, to navigate websites. This means your website needs to be navigable using the tab key; otherwise, users may get stuck.

The solution

Test your website’s navigation using only a keyboard (Tab key to move forward, Shift+Tab to move backward). Are you able to get through all of the important links? Or do you get stuck, unable to tab out of search bars or beyond the site’s logo? This goes for all interactive elements on your website, including links, buttons, and forms.

A more advanced tip: Use ARIA landmarks and skip links to help keyboard users navigate quickly.

The problem

Remember when half the websites on the internet played music upon opening them? Ugh, we’re glad those days are over! However, it’s easy to forget that embedded YouTube videos or background videos may autoplay on your site.

From an accessibility perspective, videos or audio that play automatically can be disruptive, especially for screen reader users. Also, users with cognitive disabilities may struggle with sudden distractions.

The solution

Remember to always provide controls for media playback (play, pause, volume adjustments). Also, when getting the embed code from YouTube or Vimeo, set videos to start only when the user clicks play.

Want extra credit for your videos? Ensure you have captions and transcripts for all multimedia content. This helps visually and hearing impaired people access your content.

If you’re still not sold on the importance of accessibility, remember that fixing these common mistakes improves the experience for all users, not just those with disabilities.

Check out our Accessibility Resource Guide for more tips about how to keep your website accessible. We update this guide regularly, so check back for updates. Remember: Accessibility isn’t a one-time fix. It requires ongoing attention as your website evolves.

Alpen Lily Web Studio offers accessibility audits and improvements — contact us to ensure your site is inclusive and compliant!