Common Accessibility Mistakes

Common Web Accessibility Mistakes

Many accessibility issues are introduced unintentionally during design and development. These mistakes can make websites difficult or impossible to use for people who rely on keyboards, screen readers, magnifiers, voice control, or other assistive technologies.

Avoiding the following common mistakes will significantly improve your website's usability, SEO, and compliance with the Web Content Accessibility Guidelines (WCAG).

1. Incorrect HTML Structure

• ✘ Using div elements instead of semantic HTML elements.
• ✘ Skipping heading levels such as jumping from H1 directly to H3.
• ✘ Using tables for page layout.
• ✘ Creating pages without landmarks such as main and nav.

2. Poor Image Accessibility

• ✘ Missing alternative text for informative images.
• ✘ Using filenames such as "image1.jpg" as alternative text.
• ✘ Adding unnecessary alt text to decorative images.
• ✘ Embedding important text inside images.

3. Keyboard Accessibility Problems

• ✘ Interactive elements that cannot be reached using the keyboard.
• ✘ Removing visible focus indicators.
• ✘ Creating keyboard traps inside dialogs or menus.
• ✘ Using an illogical tab order.
• ✘ Missing skip navigation links.

4. Form Accessibility Issues

• ✘ Form fields without associated labels.
• ✘ Placeholder text used instead of labels.
• ✘ Required fields that are not clearly identified.
• ✘ Generic validation messages such as "Invalid Input."
• ✘ Error messages that do not explain how to fix the problem.

5. Visual Accessibility Problems

• ✘ Poor color contrast between text and backgrounds.
• ✘ Using color alone to communicate information.
• ✘ Small text that cannot be resized.
• ✘ Ignoring reduced motion preferences.
• ✘ Fixed layouts that break when users zoom.

6. Incorrect ARIA Usage

• ✘ Using ARIA when semantic HTML is sufficient.
• ✘ Applying incorrect ARIA roles.
• ✘ Forgetting to update ARIA states.
• ✘ Using invalid ARIA attributes.
• ✘ Creating custom widgets without keyboard support.

7. Inaccessible Interactive Components

• ✘ Clickable div elements used instead of buttons.
• ✘ Dialogs that do not trap or restore keyboard focus.
• ✘ Dropdown menus that cannot be operated using the keyboard.
• ✘ Tabs without ARIA roles or keyboard navigation.
• ✘ Links with vague text such as "Click Here."

8. Multimedia Accessibility Issues

• ✘ Videos without captions.
• ✘ Audio files without transcripts.
• ✘ Auto-playing media without controls.
• ✘ Important information delivered only through audio.
• ✘ Missing audio descriptions for visual-only content when needed.

9. Accessibility Testing Mistakes

• ✘ Relying only on automated accessibility tools.
• ✘ Never testing with a keyboard.
• ✘ Skipping screen reader testing.
• ✘ Testing only the homepage.
• ✘ Not retesting after accessibility fixes.

10. Accessibility Process Mistakes

• ✘ Treating accessibility as a final testing task.
• ✘ Ignoring WCAG requirements during design.
• ✘ Not educating developers about accessibility.
• ✘ Skipping accessibility during code reviews.
• ✘ Assuming accessibility only benefits people with disabilities.