图中"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-label
和 figure
,而是使用图像上的 alt
属性作为 link 文本。这取决于判断,因为我看不到每个值的值,但我会说 alt
属性应该是 hyperlink 内容,因为它比 aria
.[= 更可靠28=]
终于在 link 和图像上都具有 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>
该代码段存在一些问题。
首先修复初始错误
默认情况下,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=img
和 tabindex
并确保 img
具有合适的 alt
文本将充当 screen-reader 中的可读文本.
我正在使用 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-label
和 figure
,而是使用图像上的 alt
属性作为 link 文本。这取决于判断,因为我看不到每个值的值,但我会说 alt
属性应该是 hyperlink 内容,因为它比 aria
.[= 更可靠28=]
终于在 link 和图像上都具有 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>
该代码段存在一些问题。
首先修复初始错误
默认情况下,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=img
和 tabindex
并确保 img
具有合适的 alt
文本将充当 screen-reader 中的可读文本.