Common Accessibility Mistakes – and How to Avoid Them

Building inclusive digital experiences is more important than ever—not just because it's the right thing to do, but because accessible sites perform better and comply with laws like the European Accessibility Act (EAA), effective as of June 28, 2025. Still, many websites slip up on basics. Let's walk through common errors and how to fix them.

1. Missing or Vague Alt Text for Images

**Mistake**: Images without alt text—or alt texts like "image" or "graphic"—leave screen-reader users in the dark.

**Fix**: Write descriptive alt text that captures the essence or function of the image. If it's purely decorative, use alt="" so screen readers skip it.

This isn't just good practice—lawsuits have hinged on this too.

2. Poor Color Contrast

**Mistake**: Light text on a light background or vice versa can be nearly unreadable—for those in bright sunlight, with low vision, or even color blindness.

**Fix**: Stick to contrast ratios of at least 4.5:1 for normal text, and 3:1 for large text, per WCAG standards. Use tools like paletteIO's contrast checker to test your designs.

3. Overlooking Keyboard Navigation

**Mistake**: If users can only interact with your site using a mouse (no Tab navigation, no visible focus indicator), you're excluding a huge group of users.

**Fix**: Ensure every interactive element—links, buttons, forms—is accessible via the keyboard. Show focus with clear outlines or changes in styling.

4. Misuse or Overuse of ARIA

**Mistake**: Treating ARIA roles like a flash fix, or misusing them (e.g., role="heading" on a <p>), often confuses assistive tech. Sometimes ARIA can do more harm than good.

**Fix**: Always prefer native HTML elements over ARIA if they serve the purpose. Use ARIA only when necessary—and do so correctly.

5. Unlabeled or Poorly Labeled Form Fields

**Mistake**: Form inputs without <label> tags or unclear placeholders make filling out forms a nightmare for assistive tech users.

**Fix**: Link labels to inputs using for attributes, and avoid relying solely on placeholder text. Provide clear instructions for any errors.

6. Non-Semantic HTML (Overusing <div> & <span>)

**Mistake**: When everything is a <div>, assistive technologies lose the structural hints that help users navigate the page.

**Fix**: Use semantic elements—<button>, <nav>, <ul>, <main>—to provide meaning. Only use generic wrappers as a last resort.

7. Non-Descriptive Link Text (and Empty Buttons/Links)

**Mistake**: "Click here," "read more," or icon-only links leave users guessing. Empty or unlabeled buttons are equally problematic.

**Fix**: Be explicit: use descriptive text like "Learn about WCAG principles" or "Download PDF". If using icons, accompany them with meaningful aria-label or visible text.

8. Skipping Heading Levels / Poor Heading Structure

**Mistake**: Jumping from <h2> to <h4> or using headings purely for styling disrupts screen reader navigation.

**Fix**: Maintain a logical, sequential structure using headings—H1 > H2 > H3—and follow semantic order.

9. Auto-Playing Media Without Controls or Captions

**Mistake**: Videos or audio that play automatically without pause options or captions can disorient users—especially those with sensory sensitivities or hearing impairments.

**Fix**: Always provide play controls, captions, and transcripts for media content.

10. Relying on Automated Tests Alone

**Mistake**: Automated tools are helpful—but they miss usability issues that real users face.

**Fix**: Combine tools like Axe or Lighthouse with manual testing, keyboard navigation, screen reader trials, and even user testing with people who rely on assistive tech.

Why These Mistakes Persist—and How to Shift the Mindset

Despite evolving legislation like the EAA, 97% of websites still fail basic accessibility standards. Often it's because accessibility is an afterthought, or teams lack awareness or training.

Accessibility isn't extra work—it's smart work. Using semantic markup, basic labels, contrast checks—it all builds better UX, improves SEO, mitigates legal risk, and opens your product to more users.

Quick Reference: Accessibility Mistakes & Fixes

| Common Mistake | Quick Fix | |----------------|-----------| | Missing alt text | Add descriptive alt text or alt="" for décor | | Poor contrast | Use WCAG ratios and test with contrast tools | | Keyboard navigation | Make all elements keyboard-accessible with visible focus | | Misusing ARIA | Use native HTML first; ARIA only when necessary | | Unlabeled forms | Pair <label> with inputs; clear instructions | | Non-semantic HTML | Prefer semantic tags (<nav>, <button>) | | Vague link/button text | Use descriptive text or aria-labels for clarity | | Skipped heading structure | Use headings in proper order (H1, H2, H3…) | | Auto-play media | Offer controls, captions, and transcripts | | Automated testing only | Combine with manual testing and real user feedback |

Final Thoughts

Accessibility mistakes are often small oversights, easy to fix—but they create real frustration for many users. Taking a proactive, inclusive approach to your code—early and consistently—pays dividends in usability, SEO, compliance, and reputation.

Ready to put these principles into practice? Use paletteIO's accessibility-first tools to create color palettes that meet WCAG standards and avoid the contrast mistakes that plague so many websites.

Remember: accessibility isn't a feature you add at the end—it's a foundation you build from the start.