图中"Focusable Elements Should Have Interactive Semantics"是什么意思?

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

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

<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 标签以防万一解决它,但无论它是否存在,仍然有此错误消息。我还尝试将 tabindex="-1" 添加到 figure、figcaption 和 img 标签中,使它们都无法聚焦,以防出现问题,但这也没有做任何事情。据我所知,“a”link 是唯一可聚焦的元素,“a”标签被认为是交互式语义,所以我不确定问题出在哪里。

您遇到的问题是 role="img".

的误用

你实质上是说锚点是一个图像。

因此,就屏幕阅读器和辅助功能树而言,浏览器将其视为图像,但仍将项目显示为可聚焦的,因为它是 link。

这导致了预期的不匹配,反过来想,它本质上与使图像可聚焦相同,但没有理由这样做,因为图像本身不是交互式的。

如果您从 hyperlink 中删除此 role(因为它不正确),您应该会发现问题消失了,因为现在 hyperlink 被视为hyperlink 可访问性树。

这里还有一点是您在 figure 和 hyperlink 上有一个 aria-label。这将覆盖 hyperlink 的内容,因此图像应该是装饰性的(使用 alt=""role="presentation")并且您应该从 [=15= 中删除 aria-label ] 还有。

或者从图像中删除 aria-labelfigure,而是使用图像上的 alt 属性作为 link 文本。这取决于判断,因为我看不到每个值的值,但我会说 alt 属性应该是 hyperlink 内容,因为它比 aria.[= 更可靠28=]

终于在 link 和图像上都具有 title 属性是不必要的,我会把它放在图像上。

建议代码

正如所讨论的,我看不到您的 aria-labelalt 内容,所以我无法判断哪个最合适,但下面是我将如何构建您的 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>

该代码段存在一些问题。


首先修复初始错误

默认情况下,a 元素将处于焦点顺序,用户可以通过添加不适当的角色 role=img 来切换到它。

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

从超链接中删除 role=imgtabindex 并确保 img 具有合适的 alt 文本将充当 screen-reader 中的可读文本.