DEV Community

Kedar Kulkarni
Kedar Kulkarni

Posted on

🛠️ Fixing Common Accessibility Issues – Alt Text, Contrast, Headings & Forms

#webdev #html #a11y #frontend

In Part 1, we explored the basics of accessibility and how to create a solid semantic HTML foundation. Now, let’s move forward by identifying and fixing the most common accessibility problems that appear on real-world websites.

These small fixes can drastically improve usability and compliance with WCAG Level A and AA standards.

🖼️ 1. Missing or Inaccurate Alt Text for Images

Images must include meaningful alternative text (alt) to describe their purpose to screen readers and assistive tools.

❌ Common Problems

  • Missing alt attribute
  • Decorative images without alt=""
  • Redundant alt text (e.g., same as caption or nearby text)

✅ Best Practices

  • Describe the function of the image, not the appearance.
  • If an image is purely decorative, use alt="" to hide it from screen readers.
  • Don't duplicate nearby content.

🧪 Example 

<!-- Bad: missing alt -->
<img src="search-icon.png">

<!-- Good: functional alt -->
<img src="search-icon.png" alt="Search">

<!-- Decorative image -->
<img src="divider.png" alt="">
Enter fullscreen mode Exit fullscreen mode

🛠️ Tool Tip: Use WAVE to detect missing or redundant alt text.

🎨 2. Poor Color Contrast

Low contrast between text and background colors makes content unreadable for users with visual impairments or color blindness.

❌ Common Issue

Text blends into the background due to insufficient contrast.

✅ Fix It

Ensure a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text.

🔧 Example 

/* Too light */
color: #cccccc;
background: #ffffff;

/* Better */
color: #333333;
background: #ffffff;
Enter fullscreen mode Exit fullscreen mode

Use the WAVE contrast checker or WebAIM contrast tool to validate.

🧩 3. Improper Heading Structure

Headings help screen reader users understand the page structure and quickly navigate between sections.

❌ Common Mistakes

  • Skipping heading levels (e.g., <h1> → <h3>)
  • Using headings for styling only
  • Missing <h1> altogether

✅ Best Practices

  • Use only one <h1> per page, usually as the page title.
  • Maintain a logical hierarchy: <h1> → <h2> → <h3>, and so on.
  • Don’t skip levels.

🧪 Example 

<!-- Correct order -->
<h1>Page Title</h1>
  <h2>Section 1</h2>
    <h3>Sub-section</h3>

<!-- Skipped order (bad) -->
<h1>Page Title</h1>
  <h3>Sub-section</h3> <!-- Skipped h2 -->
Enter fullscreen mode Exit fullscreen mode

🧠 Use the WAVE tool to view the heading outline visually and fix skipped levels.

📝 4. Form Inputs Without Labels

Unlabeled form controls are unusable with screen readers and keyboard navigation. Screen readers rely on label associations to describe the purpose of each input field.

❌ Issues

  • No <label> element
  • Only placeholder used (not accessible)
  • Labels are not correctly associated

✅ Fix It

There are two valid ways to associate labels:

  1. Using for and id
  2. Wrapping input inside the <label>

🧪 Examples 

<!-- Good with for/id -->
<label for="email">Email:</label>
<input id="email" type="email" name="email">

<!-- Good with wrapping -->
<label>
  Email:
  <input type="email" name="email">
</label>

<!-- Using ARIA -->
<input type="email" aria-label="Enter your email">
Enter fullscreen mode Exit fullscreen mode

❗ Don’t rely only on placeholder — it disappears after input and is not read consistently by assistive tools.

🔍 5. Keyboard Navigation Failures

Many users rely on keyboards (not mice) to interact with websites. All interactive elements must be reachable via the Tab key and should show a visible focus state.

✅ Keyboard Navigation Checklist:

  • Can you tab to links, buttons, form fields, and controls?
  • Does each element show a visual outline when focused?
  • Can you tab out of all interactive elements? (No “keyboard traps”)

🧪 Test it:

  • Open your site
  • Hit Tab repeatedly
  • Observe what gets focus and in what order

🛠️ Use tabindex="0" on custom elements to include them in the natural tab flow.

🧾 Summary Checklist

✅ Fix Description
Alt Text Add meaningful alt for functional images, alt="" for decorative
Contrast Maintain minimum contrast ratio (4.5:1 for normal text)
Headings Use semantic headings in correct order; don’t skip levels
Labels Associate each input with a visible or accessible label
Keyboard Make sure all functionality works via keyboard only

🔄 Coming Up: Building Accessible Widgets with ARIA in React (Blog 3)

Next, we’ll explore ARIA roles, states, and properties to build accessible custom components like dropdowns, modals, and toggle buttons — especially in React apps.

Top comments (0)