javascript - 动态生成的 aria-descriptedby 值是否仍然可以访问？

Question

我正在我的网站上运行自动可访问性测试，并收到使用 Zurb Foundation's tooltip 的工具提示元素的错误。 (v6.2.3)。

该问题被标记为“此元素的 aria-descriptedby 属性值包含一个或多个无效 id。” 据我所知，它所描述的 div 确实有一个有效的 id，但由于它是由 JavaScript 生成的，也许这就是导致问题的原因？

这是代码在我的编辑器中的样子:

<span data-tooltip aria-haspopup="true" class="has-tip" title="I'm on bottom and the default position.">"tip-bottom"</span><br>

在渲染时，Foundation 的 JavaScript 将其更改为:

<span data-tooltip="77rhf0-tooltip" aria-haspopup="true" class="has-tip" title="" aria-describedby="vd07t8-tooltip" data-yeti-box="vd07t8-tooltip" data-toggle="vd07t8-tooltip" data-resize="vd07t8-tooltip">"tip-bottom"</span>

Foundation 的 JavaScript 也会在文档底部生成:

<div class="tooltip" role="tooltip" aria-hidden="true" data-is-active="false" data-is-focus="false" id="vd07t8-tooltip" style="display: none; top: 421.812px; left: 410.766px; opacity: 1;">I'm on bottom and the default position.</div>

工具提示的 ID 是随机生成的。

来自 zurb 的 JS 工具提示，它使用插件来创建 ID 名称:

var elemId = this.$element.attr('aria-describedby') || Foundation.GetYoDigits(6, 'tooltip');

据我所知，这是一个有效的 ID，并且应该可以正常工作。我认为如果我的测试工具无法获取 ID，辅助技术也会遇到问题。

我的问题是:可以保持原样吗？还是这里确实存在会导致辅助技术出现问题的错误？

我对使用 ARIA 属性相当陌生，因此，如果这个问题令人困惑或措辞不当，我深表歉意。谢谢!

Answer 1

My question is: would this OK to leave as is, or is there genuinely an error here that would cause an issue with assistive technology?

您的 aria-scribedby 是用 javascript 添加的，div 也是如此。屏幕阅读器读取生成的 DOM。所以一切都好。

如果您指明使用哪个工具，将会有所帮助，因为错误可能是该工具由于其隐藏状态而无法检索 div，但这不是问题从屏幕阅读器的 Angular 来看。请注意，设置 aria-hidden=true 没有任何区别。