What does "Focusable Elements Should Have Interactive Semantics" mean in a figure?

Question

I am reviewing a site with the Firefox accessibility inspector, and there is one problem that I cannot solve. The following piece of html yields the error, "Focusable Elements Should Have Interactive Semantics", and I cannot figure out why. This is one of a list of captioned thumbnails that link to different pages.

<figure class="col-sm-4" aria-label="{{ label }}" title="{{ title }}">
    <a href="{% url 'example' %}" role="img" aria-label="{{ label }}" title="{{ title }}" tabindex="0">
        <img src="{{ src }}" class="img-responsive" alt="{{ alt }}" title="{{ title }}" loading="lazy" />
    </a>
    <figcaption class="text-center bottom-20">
        <strong>{{ text }}</strong><br/>
        {{ text2 }}
    </figcaption>
</figure>

Any ideas? I explicitly added tabindex="0" to the a tag just in case that solved it, but still has this error message regardless of whether or not that is there. I also tried adding tabindex="-1" to the figure, figcaption, and img tags to make them all non-focusable in case that was the problem, but that did not do anything either. From what I can tell, the "a" link is the only focusable element, and the "a" tag is considered interactive semantics, so I'm not sure what the issue is.

Answer 1

The issue you have is the misuse of role="img".

What you are essentially saying is that the anchor is an image.

So the browser sees this as an image as far as screen readers and the accessibility tree are concerned, but still present the item as focusable as it is a link.

This results in a mismatch of expectations, think of it in reverse, it is essentially the same as making an image focusable, but there is no reason to do this as an image in of itself is not interactive.

If you remove this role from the hyperlink (as it is not correct) you should find that the problem goes away as now the hyperlink is seen as a hyperlink by the accessibility tree.

An additional point here is that you have an aria-label on the figure and hyperlink. This will override the contents of the hyperlink so the image should be made decorative (using alt="" and role="presentation") and you should remove the aria-label from the figure as well.

Alternatively remove the aria-label from the image and figure and instead use the alt attribute on the image as the link text. That is down to judgement as I cannot see what values you have for each but I would say the alt attribute should be the hyperlink content as this is more robust than aria.

Finally having the title attribute on both the link and the image is unnecessary, I would just put it on the image.

proposed code

As discussed I cannot see your aria-label or alt content so I can't tell which is most appropriate, but the below is how I would structure your HTML from the info I can see.

<figure class="col-sm-4">
    <a href="{% url 'example' %}">
        <img src="{{ src }}" class="img-responsive" alt="{{ alt }}" title="{{ title }}" loading="lazy" />
    </a>
    <figcaption class="text-center bottom-20">
        <strong>{{ text }}</strong><br/>
        {{ text2 }}
    </figcaption>
</figure>

Quick fiddle to show behaviour

<h2>incorrect, no link text read out</h2>
<figure class="col-sm-4">
    <a href="https://google.com" role="img">
        <img src="https://placehold.it/400x400" class="img-responsive" alt="link text" title="not really needed but should be link text if used" loading="lazy" />
    </a>
    <figcaption class="text-center bottom-20">
         <strong>supporting info</strong><br/>
        for image
    </figcaption>
</figure>

<h2>link text is read out</h2>
<figure class="col-sm-4">
    <a href="https://google.com">
        <img src="https://placehold.it/400x400" class="img-responsive" alt="link text" title="not really needed but should be link text if used" loading="lazy" />
    </a>
    <figcaption class="text-center bottom-20">
        <strong>supporting info</strong><br/>
        for image
    </figcaption>
</figure>

Answer 2

There are a few things wrong with the snippet.

---

Firstly, fixing the initial error.

By default, an a element will be in the focus order and the user can tab to it, by adding the inappropriate role role=img it is now removed from that.

When an inappropriate role like paragraph is used for an interactive element, the element will not receive focus, and the screen reader will not announce anything. – https://dequeuniversity.com/rules/axe/3.0/focus-order-semantics

Removing the role=img and tabindex from the hyperlink and ensuring the img has suitable alt text will act as the readble text from the screen-reader.