Breaking Down Web Accessibility – Step 1

Web accessibility can feel like a huge topic and it’s easy to get stuck wondering where to start. The good news? You don’t have to fix everything at once. A smart first step is to tackle the most common accessibility mistakes. Fixing these will instantly make your site easier to use for more people, and it’s a win you can deliver fast.

The typical issues are:

1. Low Contrast
2. No alt text for images
3. Empty links
4. Empty buttons

1. Low Contrast

Low colour contrast between text and background makes it difficult for people with low vision or colour blindness to read.

How to Fix:

• Use tools like WebAIM Contrast Checker to ensure a minimum 4.5:1 ratio for body text and 3:1 for large text.

2. Missing Alt Text for Images

Without alt attributes, screen readers can’t describe the image, leaving visually impaired users without context.

How to Fix:

• Add concise and descriptive alt text.
• If an image is purely decorative, use an empty alt="" so screen readers skip it.

  <!-- ❌ Missing alt -->
  <img src="product.jpg">

  <!-- ✅ Descriptive alt -->
  <img src="product.jpg" alt="Red cotton T-shirt with round neck">

3. Empty Links

Links without text (or with only an icon) are completely meaningless to screen readers.

How to Fix:

• Ensure every link has descriptive text or ARIA labels.
• Avoid using just “Click here” — describe the action.

 
  <!-- ❌ Empty link -->
  <a href="cart.html"></a>

  <!-- ✅ Descriptive link -->
  <a href="cart.html">View shopping cart</a>

  <!-- ✅ Icon with accessible label -->
  <a href="cart.html" aria-label="View shopping cart">
    <svg><!-- cart icon --></svg>
  </a>