问题描述
我正在使用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”显式添加到标签中,以防万一解决了该问题,但是无论是否存在该错误消息,仍然会显示此错误消息。我还尝试过在图形,figcaption和img标签上添加tabindex =“-1”,以使所有标签都无法聚焦,以防出现问题,但这也没有任何作用。据我所知,“ a”链接是唯一可聚焦的元素,“ a”标记被认为是交互式语义,所以我不确定问题出在哪里。
解决方法
您遇到的问题是滥用role="img"
。
您实际上要说的是锚点是图像。
因此,就屏幕阅读器和可访问性树而言,浏览器将其视为一幅图像,但由于它是一个链接,因此仍然呈现可聚焦的项目。
这会导致期望值不匹配,反之亦然,这与使图像可聚焦基本相同,但是由于图像本身不是交互式的,因此没有理由这样做。
如果您从超链接中删除此role
(因为它是不正确的),您应该会发现问题消失了,因为现在可访问性树将超链接视为超链接。
这里的另一点是,您在aria-label
和超链接上有一个figure
。这将覆盖超链接的内容,因此应使图像具有装饰性(使用alt=""
和role="presentation"
),并且还应从aria-label
中删除figure
。 / p>
或者从图像中删除aria-label
和figure
,而使用图像上的alt
属性作为链接文本。这取决于判断,因为我看不到每个值都有什么值,但是我会说alt
属性应该是超链接内容,因为它比aria
更健壮。
最后,在链接和图像上都没有title
属性,我只需要将其放在图像上即可。
建议的代码
如前所述,我看不到您的aria-label
或alt
内容,因此我无法确定哪个最合适,但是下面是我如何根据看到的信息来构造HTML。 / p>
<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>
快速摆弄行为举止
<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
来将其移至焦点位置。
当将诸如段落之类的不合适角色用于交互式元素时,该元素将不会获得焦点,并且屏幕阅读器将不会宣布任何内容。 – https://dequeuniversity.com/rules/axe/3.0/focus-order-semantics
从超链接中删除role=img
和tabindex
并确保img
具有合适的alt
文本将作为屏幕阅读器的可读文本。