What Are the Most Common Accessibility Mistakes?

 

Website accessibility isn’t just about adding fancy features or ticking off compliance boxes. It’s about making sure everyone — no matter their abilities or circumstances — can use your site without barriers.

But here’s the truth: even well-meaning website owners and designers often make simple mistakes that unintentionally make a site hard or impossible to use for some people.

The good news? Once you know what these mistakes are, they’re often easy to fix.

In this article, we’ll cover six of the most common accessibility mistakes:

1. Missing alt text for images

2. Poor color contrast

3. Text that can’t be resized

4. Videos without captions

5. Links and buttons too small to click

6. Navigation that can’t be used with a keyboard

We’ll explore why each mistake matters, how it affects users, and the practical steps to correct it.

---

1. Missing Alt Text for Images

What It Is
Alt text (short for “alternative text”) is a written description of an image that’s stored in the HTML. Screen readers use it to describe images to visually impaired users.

Why It Matters
Without alt text, someone using a screen reader won’t know what an image shows. They might hear something unhelpful like “image1234.jpg” instead of “Family enjoying a picnic in the park.”

Example
Imagine an online clothing store where the product images have no alt text. A blind shopper browsing with a screen reader would have no idea whether they’re looking at a red dress or a pair of jeans. That’s not just frustrating — it’s excluding a customer.

How to Fix It

• Write clear, concise alt text describing the image’s purpose, not just its appearance.

• If an image is purely decorative, use empty alt text (alt="") so screen readers skip it.

• Avoid stuffing alt text with keywords — it’s about description, not SEO tricks.

Pro Tip: If your site has hundreds of images, you can prioritize adding alt text to the most important ones first — such as product photos, infographics, or images with critical information.

---

2. Poor Color Contrast

What It Is
Color contrast refers to the difference in brightness between text (or important elements) and its background. Poor contrast makes text hard to read, especially for people with low vision or color blindness.

Why It Matters
If your text blends into the background, it’s not just an aesthetic issue — it’s a readability problem.

Example
Light gray text on a white background might look stylish on your high-resolution monitor in perfect lighting, but in bright sunlight on a phone, it becomes unreadable.

How to Fix It

• Aim for at least a 4.5:1 contrast ratio for normal text, and 3:1 for large text (18px+ bold or 24px+ regular).

• Use free tools like the WebAIM Contrast Checker to test your colors.

• Don’t rely on color alone to show meaning — pair it with text or icons.

Pro Tip: Test your site in grayscale mode to see how it looks without color — this mimics color blindness and helps you spot low-contrast areas.

---

3. Text That Can’t Be Resized

What It Is
Some websites use fixed font sizes or design elements that break when you zoom in. This prevents users from increasing text size to a level comfortable for them.

Why It Matters
People with low vision, eye strain, or even just older readers often need larger text to read comfortably. If your site blocks zoom or breaks when resized, it’s excluding them.

Example
A blog with fixed 12px font might be fine for young readers with perfect eyesight, but for someone with cataracts, it’s a strain.

How to Fix It

• Use relative units like em or % instead of px for font sizes.

• Test your site by zooming to 200% — it should still be usable and readable.

• Avoid fixed-height containers that cut off enlarged text.

Pro Tip: Make sure line spacing also increases with larger text — tight lines make reading harder when zoomed.

---

4. Videos Without Captions

What It Is
Captions are the text version of spoken content in videos, synchronized with the audio. They benefit deaf and hard-of-hearing users — and anyone watching in a noisy place.

Why It Matters
Without captions, hearing-impaired visitors can’t follow your video’s dialogue or narration. You also risk losing viewers who simply can’t turn the sound on at that moment.

Example
A cooking tutorial without captions means a deaf viewer won’t know the measurements or instructions, even if they can see the ingredients.

How to Fix It

• Add closed captions to all videos. Platforms like YouTube can auto-generate them, but always review and edit for accuracy.

• Provide a full transcript as a backup — helpful for people who prefer reading or want to skim.

Pro Tip: Good captions also describe important sounds (“[applause]” or “[phone ringing]”) to give full context.

---

5. Links and Buttons Too Small to Click

What It Is
Tiny clickable elements make it hard for people with motor disabilities, tremors, or those using small touchscreens to interact with your site.

Why It Matters
If a user can’t reliably click the link or button they want, frustration rises — and conversions drop.

Example
A “Buy Now” button squeezed between other clickable elements can lead to accidental clicks, abandoned carts, or complete drop-offs.

How to Fix It

• Make clickable areas at least 44x44 pixels (Apple’s guideline) or 48x48 pixels (Google’s guideline).

• Add enough spacing between clickable elements.

• Use clear labels — not vague text like “Click here.”

Pro Tip: Try navigating your site using only one finger on a small phone screen — you’ll quickly spot any too-small buttons.

---

6. Navigation That Can’t Be Used With a Keyboard

What It Is
Some websites require a mouse to navigate. If menus, forms, or buttons can’t be accessed via keyboard, users with motor disabilities or screen readers are locked out.

Why It Matters
Not everyone can use a mouse — some rely on keyboards, voice commands, or switch devices. Your site should work for them, too.

Example
A dropdown menu that only opens on mouse hover will be invisible to someone navigating with the Tab key.

How to Fix It

• Ensure all interactive elements are reachable with the Tab key.

• Use visible focus indicators (like outlines) to show which element is active.

• Avoid JavaScript traps that block keyboard navigation.

Pro Tip: Unplug your mouse and try using your site with only your keyboard — it’s the quickest accessibility test you can do.

---

Why These Mistakes Happen

Most accessibility mistakes aren’t made out of neglect — they happen because:

• Designers prioritize visual style over usability.

• Developers don’t test with assistive technologies.

• Website owners assume their audience doesn’t include people with disabilities.

But the truth is: your audience always includes people with accessibility needs — and often more than you think. According to the WHO, over 1 billion people worldwide live with some form of disability. And that’s not counting temporary impairments like injuries or situational limitations.

---

The Benefits of Fixing These Mistakes

When you correct these accessibility mistakes, you’re not only helping people with disabilities — you’re improving your site for everyone.

• Better SEO — Search engines can “read” alt text and structured captions.

• Wider Audience — More people can use your site comfortably.

• Higher Conversions — Clear, usable design leads to more clicks and purchases.

• Good Brand Image — Shows you value inclusivity.

---

A Quick Accessibility Audit Checklist

Here’s a simple checklist you can run through to spot and fix these common mistakes:

✅ Add descriptive alt text for all important images
✅ Check text-to-background contrast
✅ Test zoom at 200% — text should still be readable and layout intact
✅ Add captions and transcripts for all videos
✅ Make buttons and links large enough to tap easily
✅ Test your site with keyboard-only navigation

---

Final Thoughts

These six mistakes — missing alt text, poor contrast, non-resizable text, videos without captions, small clickable areas, and mouse-only navigation — are among the most common accessibility barriers online.

The good news? They’re also some of the easiest to fix once you’re aware of them.

Accessibility isn’t about making your site bland or overcomplicated. It’s about making it usable for everyone. And when you design for inclusivity, you often find that your site becomes clearer, cleaner, and more user-friendly for all visitors — which is a win no matter who your audience is.