Common Accessibility Mistakes

# CHAPTER 18

Common Accessibility Mistakes #

1. Introduction #

Accessibility is not a mystical art; it is a rigid set of rules. When a product fails an accessibility audit or is hit with a devastating ADA lawsuit, it is rarely because the engineering team attempted a highly complex, theoretical interaction and failed. It is almost always because the team repeatedly violated the absolute most basic, fundamental rules of web design. These are unforced errors driven by aesthetic trends, lazy coding, or a complete lack of UX empathy. In this chapter, we will audit the Common Accessibility Mistakes. We will identify the "Big Five" catastrophic failures—Low Contrast, Missing Alt Text, Missing Labels, Keyboard Traps, and Fake Buttons—and establish exactly how to eradicate them from your workflow permanently.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Identify and correct the "Big Five" most common WCAG accessibility violations.

• Spot the UX danger of exclusively using Placeholder Text.

• Diagnose and fix the "Generic Div" (Fake Button) developer anti-pattern.

• Recognize the accessibility failure of color-dependent UI feedback.

• Audit a complex form for missing <label> tags and error loops.

3. Mistake 1: Low Contrast Text (The #1 Failure) #

*The Error:* Over 80% of accessibility failures on the web are contrast-related. Designers use #999999 light gray text on a white background because it looks "sleek and minimalist." *The Reality:* To a user with low vision, cataracts, or someone simply outside in the sun, the text literally does not exist. It is an invisible page. *The Fix:* Use a contrast checking plugin (like Able) in Figma. Ensure ALL normal body text hits the WCAG AA mathematical threshold of 4.5:1. Stop guessing; use the math.

4. Mistake 2: Missing Alt Text (The Silent Image) #

*The Error:* A developer drops an <img> tag into the HTML and forgets the alt attribute. *The Reality:* A blind user reading an article suddenly hears their screen reader scream out: *"Image-14562-Final-V2.jpg."* It shatters their cognitive flow and provides zero context. *The Fix:* Every single image MUST have an alt attribute. If the image is crucial, write descriptive text (alt="A graph showing a 20% rise in sales"). If the image is purely decorative fluff, you MUST include the empty attribute alt="" so the screen reader knows to silently ignore it.

5. Mistake 3: The Placeholder-Only Form #

*The Error:* To save screen space, a designer deletes the permanent text labels above the form inputs, relying solely on the disappearing gray placeholder text inside the box. *The Reality:* A user with ADHD clicks the box, the text vanishes, they look away for two seconds, and they have complete cognitive amnesia. They don't know what they are supposed to type. *The Fix:* Every input MUST have a permanent, visible text label positioned outside the box.

6. Mistake 4: The Fake Button (<div> Abuse) #

*The Error:* A developer wants a button, but doesn't want to deal with the browser's default button styling. So, they just use a <div> tag and style it with CSS: <div class="blue-btn">Submit</div>. *The Reality:* A generic <div> has zero native accessibility. A keyboard user cannot tab to it. A screen reader user has no idea it is clickable. The button is completely invisible to assistive technology. *The Fix:* Always use the semantic <button> tag. It provides native keyboard focus and explicitly announces its functionality to screen readers for free.

7. Mistake 5: Color-Only Information #

*The Error:* A complex financial dashboard shows a massive table of stock tickers. The positive stocks are colored green; the negative stocks are colored red. There are no other indicators. *The Reality:* To a user with Deuteranopia (red-green color blindness), the entire table looks like a uniform field of muddy brown text. They have lost thousands of dollars because they cannot tell which stock is dropping. *The Fix:* Color + Iconography. Positive stocks must be green AND have an upward arrow [^]. Negative stocks must be red AND have a downward arrow [v].

8. Diagrams/Visual Suggestions #

*Visual Concept: The Anatomy of a WCAG Failure* Provide a single, disastrous UI mockup demonstrating multiple errors.

• The Design: A login form.

• *Error 1:* The background is light gray, the text is medium gray (Contrast Fail).

• *Error 2:* The input boxes only have placeholders, no top labels (Form Fail).

• *Error 3:* The "Login" button is just a red rectangle with no focus ring around it (Keyboard Fail).

• *Error 4:* A red border appears on an error, but there is no warning icon or text (Color-Only Fail).

This "Find the Errors" visual acts as a fantastic capstone test.

9. Best Practices #

• The "Unplug the Mouse" Rule: The single greatest best practice you can adopt as a UX professional is to unplug your mouse for 15 minutes every Friday and attempt to navigate the product you are currently building. It is a humbling, instant reality check that exposes 90% of structural errors.

10. Common Mistakes #

• The "Skip Link" CSS Trap: A developer builds a brilliantly accessible "Skip to Main Content" link for keyboard users. To ensure it doesn't mess up the visual design, they apply the CSS display: none to hide it. *The Failure:* display: none completely removes the element from the DOM for screen readers. The accessibility feature was just destroyed by CSS. *The Fix:* Use the visually-hidden CSS technique (moving it off-screen) so it remains in the code but invisible to the eye.

11. Mini Project: The 5-Minute Audit #

Let's find the flaws in the wild.

1. 1. The Target: Open the website of a local, small-to-medium business (not a massive tech giant).

1. 2. Test 1 (Contrast): Can you easily read all the gray footer text? (Probably not).

1. 3. Test 2 (Keyboard): Hit Tab rapidly 10 times. Did a Focus Ring appear? Do you know where you are on the page? (Probably not).

1. 4. Test 3 (Forms): Go to their "Contact Us" page. Are there visible labels above the boxes?

1. 5. *Result:* You will quickly realize that the vast majority of the internet is operating illegally and inaccessibly due to a lack of baseline UX education.

12. Practice Exercises #

1. 1. Explain why replacing the native HTML <button> tag with a generic, CSS-styled <div> tag is considered one of the most catastrophic accessibility failures in frontend development.

1. 2. Define the "Color-Only Information" failure. Give a real-world example of how a designer might accidentally create an interface that is completely unusable for a red-green color blind user.

13. MCQs with Answers #

14. Interview Questions #

• Q: A client hands you an existing website and asks you to find the "Big Five" accessibility errors. Without using any automated plugins, walk me through the exact manual steps you would take to find the most common WCAG failures.

• Q: Explain the "Silent Image" failure regarding Alt Text. If an image is purely decorative, why is it a massive mistake to completely delete the alt attribute from the HTML code, and what should you do instead?

• Q: You are auditing a checkout flow. The user makes an error, and the UI simply turns the input box border red to indicate the mistake. Walk me through the psychological and physiological reasons why this fails, and exactly how you would redesign the error state to pass WCAG guidelines.

15. FAQs #

Q: Do I really need to memorize WCAG rules? A: You don't need to memorize the exact section numbers (like "WCAG 1.4.3"), but you absolutely must memorize the mathematical outcomes: 4.5:1 for contrast, 44x44px for touch targets, 16px minimum font size, and the necessity of Focus states. These are the laws of physics for digital design.

16. Summary #

In Chapter 18, we reviewed the battlefield. We recognized that the vast majority of accessibility failures are not complex engineering problems, but easily avoidable design choices born from prioritizing aesthetics over usability. We targeted the "Big Five" errors, establishing absolute zero-tolerance policies for low-contrast text, missing Alt attributes, disappearing form placeholders, unsemantic <divs>, and color-dependent feedback loops. By memorizing these common failures, you possess a mental alarm system that will prevent you from ever releasing a fundamentally broken interface into the world.

17. Next Chapter Recommendation #

You possess the knowledge to find errors, fix them, and build perfect systems. Now, you must prove this knowledge to a hiring manager. Proceed to Chapter 19: Accessibility Interview Questions and Challenges.