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
- If the
<a>
element has nohref
attribute, then the element represents a placeholder for where a link might otherwise have been placed.
(HTML spec) - 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. - 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. alt
is not allowed ondiv
elements and it has no effect on their semantic meaning.- Avoid
aria
attributes when possible. Thearia-label
attribute on thediv
is redundant, because theimg
already has an accessible name (the value of thealt
attribute).
Good code
<a href="detail.html">
<div>
<img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
</div>
</a>