FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://www.romainmenke.com/lighthouse-bug-anchors-without-href-attribute/without.html

What happened?

I used an anchor tag without an href attribute and placed an image inside:

<a>
	<img src="https://picsum.photos/200/300" alt="" width="200" height="300" loading="lazy">
</a>

Our actual template code looks much more like :

<a
  {% if link %}
    href="{{ link }}"
  {% endif %}
>
  {# ±200 lines of template code #}
  <img src="https://picsum.photos/200/300" alt="" width="200" height="300" loading="lazy">
  {# ±200 more lines of template code #}
</a>

And then I got this error:

Links are not crawlable

There are a bunch of warnings on that page but only Links are not crawlable is relevant to this issue.

What did you expect?

The HTML specification clearly envisions a dual mode for anchor elements.

Either they have an href attribute, which makes them true anchor elements or they do not, in which case they represent a placeholder.

This concept is also used in CSS for the location pseudo classes : https://drafts.csswg.org/selectors/#the-any-link-pseudo

These only match anchors that do have an href attribute.

When templating (server-side) it really helps to be able to wrap a bunch of html with an anchor tag and optionally give it an href attribute only when it needs to be a link.

This makes the variable part in the template much smaller (only 1 attribute).

I expect Lighthouse to embrace the relevant specifications and to not give any warnings here.

I also expect Lighthouse to have consistent behavior between anchor tags without href when they contain text vs. when they contain images.

What have you tried?

N/A

How were you running Lighthouse?

Chrome DevTools

Lighthouse Version

latest

Chrome Version

latest

Node Version

N/A

OS

N/A

Relevant log output

N/A