html - 图中的 "Focusable Elements Should Have Interactive Semantics"是什么意思？

Question

我正在使用 Firefox 辅助功能检查器查看一个站点，但有一个我无法解决的问题。下面的一段 html 产生错误，“可聚焦元素应该具有交互语义”，我不知道为什么。这是链接到不同页面的带标题的缩略图列表之一。

<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>

有任何想法吗？我明确地将 tabindex="0"添加到 a 标签以防万一解决它，但仍然有此错误消息，无论是否存在。我还尝试在图形、figcaption 和 img 标签中添加 tabindex="-1"以使它们都不可聚焦，以防出现问题，但这也没有任何作用。据我所知，“a”链接是唯一可聚焦的元素，“a”标签被认为是交互式语义，所以我不确定问题是什么。

Answer 1

您遇到的问题是滥用 role="img" .
你本质上说的是 anchor 是一个图像。
因此，就屏幕阅读器和可访问性树而言，浏览器将其视为图像，但仍将项目呈现为可聚焦，就像它是链接一样。
这会导致预期的不匹配，反过来想，它本质上与使图像可聚焦相同，但没有理由这样做，因为图像本身不是交互式的。
如果您删除此 role从超链接(因为它不正确)，您应该发现问题消失了，因为现在超链接被可访问性树视为超链接。
这里的另一点是您有一个 aria-label在 figure和超链接。这将覆盖超链接的内容，因此图像应该具有装饰性(使用 alt="" 和 role="presentation" )并且您应该删除 aria-label来自 figure以及。
或者删除 aria-label来自图像和 figure而是使用 alt图片上的属性作为链接文本。这取决于判断，因为我看不出你对每个人有什么值(value)，但我会说 alt属性应该是超链接内容，因为这比 aria 更强大.
终于有了 title链接和图像上的属性都是不必要的，我会把它放在图像上。
提议的代码
正如所讨论的，我看不到您的 aria-label或 alt内容，所以我不知道哪个最合适，但下面是我如何根据我可以看到的信息来构建您的 HTML。

<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>

快速 fiddle 以显示行为

<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>