#16 alt, no wait…, aria-label, no wait…, alt

submitted on by Spell

Context: A list of images that link to detail pages.

Bad code

<a tabindex="0">
  <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
    <div>
      <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
    </div>
  </div>
</a>

Issues and how to fix them

  1. If the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed.
    (HTML spec)
  2. If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an href attribute or a <button>, depending on what's happening on click.
  3. Placeholder links aren't focusable. tabindex makes them focusable, but the attribute is another indicator that a proper link would be a better choice here.
  4. alt is not allowed on div elements and it has no effect on their semantic meaning.
  5. Avoid aria attributes when possible. The aria-label attribute on the div is redundant, because the img already has an accessible name (the value of the alt attribute).

Good code

<a href="detail.html">
  <div>
    <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
  </div>
</a>

Resources