11 Website Accessibility Errors to Avoid in Web Design and Development

More than 1 billion people worldwide live with some form of disability. That's roughly 15% of the global population — and a significant share of your website visitors.

If your website isn't accessible, you're not just excluding people. You're opening the door to legal risk, losing organic traffic, and creating a poor user experience for them.

In the U.S., websites must comply with the Americans with Disabilities Act (ADA) and meet WCAG 2.1 guidelines. Failure to do so can lead to costly lawsuits — and web accessibility litigation has been rising steadily for years.

The good news? Most accessibility errors are easy to fix once you know what to look for.

Want a quick way to identify issues on your site? A web accessibility solution like ADA Tray® can help you detect and address common accessibility errors without rebuilding your entire site.

1. Missing Alt Text on Images

What Is It?

Alt text (alternative text) is a written description added to images in HTML. It looks like this:

<img src="team-photo.jpg" alt="Five team members smiling at a company event">

When alt text is missing, screen reader users hear nothing — or worse, a confusing file name like "IMG_4892.jpg."

Why It Matters

• Screen readers rely on alt text to describe images to blind and low-vision users.
• Search engines also use alt text to understand image content, which affects SEO rankings.
• Missing alt text violates WCAG 2.1 Success Criterion 1.1.1.

Quick Fix

• Add descriptive alt text to every meaningful image.
• Use alt="" (empty) for purely decorative images so screen readers skip them.
• Keep alt text concise — 125 characters or fewer is a good rule of thumb.
• Never stuff keywords into alt text. Describe the image naturally.

2. Poor Color Contrast

What Is It?

Color contrast refers to the difference in lightness between text and its background. Low contrast — like light gray text on a white background — makes content nearly impossible to read for people with low vision or color blindness.

Why It Matters

• WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
• Poor contrast affects users with cataracts, color vision deficiency, and aging-related vision loss.
• It also hurts readability for everyone in bright sunlight or on older screens.

Quick Fix

• Use a free contrast checker tool (like WebAIM's Contrast Checker) during design.
• Avoid using color alone to convey meaning — add labels, icons, or patterns too.
• Test your live pages with a website accessibility checker before publishing.

Example of low vs. high contrast:

Bad
Light gray text #AAAAAA on white #FFFFFF

Good
Dark gray #595959 on white #FFFFFF

3. Keyboard Navigation Problems

What Is It?

Keyboard navigation allows users to move through a website using only their keyboard — typically the Tab, Enter, and arrow keys. Some people cannot use a mouse due to motor disabilities, repetitive strain injuries, or blindness.

Why It Matters

• If users can't tab through your menus, forms, or modals, they're locked out entirely.
• This affects users of screen readers, switch devices, and keyboard-only setups.
• Poor keyboard navigation violates WCAG 2.1 Success Criterion 2.1.1.

Quick Fix

• Test your site by unplugging your mouse and navigating with only the Tab key.
• Ensure every interactive element — links, buttons, forms, dropdowns — is reachable by keyboard.
• Make sure focus indicators are visible (the outline that appears around focused elements). Never set outline: none in your CSS without providing an alternative.
• Avoid keyboard traps — situations where users get stuck inside a modal or widget with no way out.

4. Missing Form Labels

What Is It?

A form label is the text that describes what a form field is for — like "Email Address" or "Phone Number." When labels are missing or not properly linked to their fields, screen readers cannot tell users what to type.

Why It Matters

• Screen readers announce the label when a user focuses on a form input.
• Without a label, the user hears only "edit text" — completely useless.
• This affects checkout forms, contact forms, sign-up pages, and search bars.

Quick Fix

Use the HTML element and link it to the input with a matching for and id:

<label for="email">Email Address</label>

<input type="email" id="email" name="email">

• Never use placeholder text as a substitute for a visible label.
• Use aria-label or aria-labelledby as a backup when visible labels aren't possible.

5. Bad Heading Structure

What Is It?

Headings (H1 through H6) create a document hierarchy. A bad heading structure skips levels (like jumping from H1 to H4) or uses headings purely for visual styling — bold text styled to look like a heading — rather than for structure.

Why It Matters

• Screen reader users navigate pages by jumping between headings. It's their version of skimming.
• A broken heading structure makes pages confusing and hard to navigate.
• Search engines also use heading structure to understand page content.

Quick Fix

• Use only one H1 per page (the main title).
• Follow a logical order: H1 → H2 → H3.
• Don't skip heading levels.
• Use headings to organize content, not just for visual style. If you want larger text, use CSS — not a heading tag.

6. Empty Buttons and Links

What Is It?

An empty button or link has no visible or programmatic text. Examples include icon-only buttons with no label or anchor tags with no inner text.

<!-- BAD: No label -->
<button><img src="search-icon.png"></button>

<!-- GOOD: Labeled -->
<button aria-label="Search"><img src="search-icon.png" alt=""></button>

Why It Matters

• Screen readers announce buttons and links by their text. An empty element gets announced as "button" or "link" — nothing more.
• Users have no idea what clicking will do.
• This violates WCAG 2.1 Success Criterion 4.1.2.

Quick Fix

• Add an aria-label attribute to icon-only buttons.
• Add descriptive text inside links: use "Read our accessibility guide" instead of just "Click here."
• Audit all buttons and links during code review.

7. Auto-Playing Media

What Is It?

Auto-playing media refers to videos, audio clips, or animations that start automatically when a page loads — without user interaction.

Why It Matters

• Auto-play can disorient users with cognitive disabilities or sensory sensitivities.
• It interferes with screen readers that are actively reading the page aloud.
• It can cause discomfort or distress for users with vestibular disorders (motion sensitivity).
• WCAG 2.1 requires that auto-playing content lasting more than 3 seconds can be paused or stopped.

Quick Fix

• Disable auto-play by default. Let users choose to play media.
• If auto-play is required, mute audio by default and provide a visible pause button.
• Avoid auto-playing carousels and animations. If you use them, include a pause control.

8. Missing ARIA Labels

What Is It?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that make dynamic content and complex widgets accessible. Missing ARIA labels leave assistive technology with no way to interpret interactive elements.

Why It Matters

• Dynamic content — like dropdowns, modals, tabs, and carousels — doesn't map naturally to HTML semantics.
• Without ARIA roles and labels, screen readers can't tell users what's happening on screen.
• This is one of the most technically complex areas of accessible web design.

Quick Fix

• Use aria-label to name elements without visible text.
• Use aria-expanded, aria-haspopup, and aria-controls for dropdowns and menus.
• Use role="dialog" on modals.
• Don't overuse ARIA — native HTML elements already have built-in semantics. Use ARIA only when needed.

An accessibility widget for website use — like ADA Tray® — can add ARIA attributes automatically to help bridge gaps in your existing code.

9. Inaccessible PDFs

What Is It?

PDFs are notoriously difficult to make accessible. An inaccessible PDF is one that was created from a scan, has no reading order tags, or lacks alt text for images within the document.

Why It Matters

• Many businesses share critical content as PDFs: menus, reports, forms, brochures.
• A screen reader attempting to read an untagged PDF will either fail or read content in the wrong order.
• The ADA requires that digital documents be accessible to people with disabilities.

Quick Fix

• Create PDFs from tagged source files (Word, InDesign) rather than scans.
• In Adobe Acrobat, use the Accessibility Checker to find and fix issues.
• Add document titles, alt text for images, and proper reading order.
• Where possible, offer HTML versions of documents as an alternative.

10. Mobile Accessibility Issues

What Is It?

Mobile accessibility covers touch target size, zoom support, font size, and gesture-based navigation on smartphones and tablets.

Why It Matters

• More than 60% of web traffic now comes from mobile devices.
• Users with motor disabilities rely on larger tap targets and alternative input methods.
• iOS and Android both have built-in accessibility features — your site needs to work with them.

Common Mobile Accessibility Errors

• Touch targets smaller than 44x44 pixels (Apple's recommendation).
• Disabling zoom with user-scalable=no in the viewport meta tag.
• Text that's too small to read without zooming.
• Interactive elements placed too close together.

Quick Fix

• Set touch targets to at least 44x44 pixels.
• Never disable user zoom. Let people scale your content.
• Use a minimum font size of 16px for body text.
• Test with VoiceOver (iOS) and TalkBack (Android) on real devices.

11. No Accessibility Testing

What Is It?

Accessibility testing means evaluating your site against WCAG 2.1 standards — either through automated tools, manual review, or both.

Why It Matters

• You can't fix what you don't measure. Without testing, accessibility problems stay hidden until a lawsuit or complaint surfaces them.
• Automated tools catch around 30–40% of accessibility issues. Manual testing catches the rest.
• Regular testing keeps your site compliant as content changes over time.

Quick Fix

• Run automated scans using a website accessibility checker regularly.
• Conduct manual audits using keyboard-only navigation and screen reader testing.
• Include accessibility testing in your QA checklist for every new page or feature.
• Use a web accessibility solution like ADA Tray® to continuously monitor and address accessibility issues across your site. Learn how to do a website accessibility audit.

Accessibility Best Practices Checklist

Use this checklist before publishing any new page:

• All images have meaningful alt text (or empty alt for decorative)
• Text meets minimum color contrast ratios (4.5:1 for body text)
• All interactive elements are keyboard accessible
• All form inputs have proper labels
• Heading structure is logical and sequential
• All buttons and links have descriptive text or ARIA labels
• No media auto-plays without user control
• ARIA labels are used correctly on dynamic content
• PDFs are tagged and accessible
• Mobile touch targets are at least 44x44 pixels
• Accessibility testing is completed before launch

Why Accessibility Is Also Good for SEO

Accessible websites tend to rank better in search. Here's why:

• Alt text helps Google understand images and index them in image search.
• Heading structure helps search engines parse page content and topics.
• Keyboard navigation improves Core Web Vitals and interaction metrics.
• Clean code and ARIA labels make pages easier for bots to crawl.
• Mobile accessibility directly impacts mobile usability scores.

Fixing accessibility errors and fixing SEO issues often go hand in hand. It's not a tradeoff — it's the same goal.

How ADA Tray® Helps

ADA Tray® is a web accessibility solution designed for website owners, developers, and agencies who need an efficient way to address common accessibility barriers.

As a website accessibility plugin, ADA Tray® helps you:

• Quickly surface and address common WCAG violations
• Add accessibility overlays and assistive features without rebuilding your site
• Support your overall ADA compliance strategy
• Provide users with accessibility tools like text resizing, contrast adjustments, and keyboard navigation enhancements

It's not a one-click fix for everything — no single tool is — but it's a practical starting point that works alongside your development and testing efforts.

Don't wait for a lawsuit to take accessibility seriously. Try ADA Tray® today to make it easier to identify errors, apply fixes, and keep your site compliant over time.

FAQ Section

Q1: What are the most common website accessibility errors?
The most common errors include missing alt text on images, poor color contrast, broken keyboard navigation, missing form labels, empty buttons and links, and bad heading structure. These issues affect users with visual, motor, and cognitive disabilities and often violate WCAG 2.1 guidelines.

Q2: What is WCAG 2.1 and why does it matter?
WCAG 2.1 stands for Web Content Accessibility Guidelines version 2.1. It's the internationally recognized standard for web accessibility. Meeting WCAG 2.1 at Level AA is widely considered the benchmark for ADA-compliant websites in the U.S.

Q3: What is the ADA and how does it apply to websites?
The Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities. Courts have consistently ruled that websites are "places of public accommodation," meaning businesses must make them accessible. Failure to do so can lead to costly lawsuits and settlements.

Q4: How do I check if my website is ADA compliant?
Use a combination of automated tools and manual testing. Run an audit with a website accessibility checker to catch common errors. Then test with keyboard-only navigation and a screen reader. A web accessibility solution like ADA Tray® can also help identify and address ongoing compliance gaps.

Q5: What is an accessibility widget for websites?
An accessibility widget is a tool or plugin added to a website that gives users control over display settings — like font size, contrast, and cursor size. It also helps site owners address common WCAG barriers. ADA Tray® is an example of a website accessibility widget that provides both user-facing controls and compliance support.

Q6: Does accessibility affect SEO?
Yes. Many accessibility improvements — such as descriptive alt text, logical heading structure, fast-loading pages, and clean semantic HTML — also benefit SEO. Search engines favor well-structured, readable content that serves all users.

Q7: What is color contrast accessibility?
Color contrast accessibility refers to ensuring there is enough visual difference between text and its background so that people with low vision or color blindness can read it. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text.

Q8: Are PDFs required to be accessible?
Yes, in most cases. If your organization is covered by the ADA, digital documents, including PDFs, should be accessible to people with disabilities. Accessible PDFs include document tags, proper reading order, and alt text for images.

Q9: What is keyboard navigation and why does it matter?
Keyboard navigation allows users to interact with a website using only a keyboard — without a mouse. It's essential for users with motor disabilities and for screen reader users. A site that can't be fully navigated by keyboard fails a core WCAG requirement.

Q10: How often should I test my website for accessibility?
Accessibility testing should happen at every major development milestone and at least once per quarter for live sites. Any time new content is added or design changes are made, re-testing is recommended. Automated monitoring tools can help flag new issues between manual audits.