动态生成的咏叹调是由值仍然可访问?

时间:2017-10-06 21:10:04

标签: javascript accessibility wai-aria zurb-foundation-6

我正在我的网站上运行自动辅助功能测试,并为使用Zurb Foundation's tooltip(v6.2.3)的工具提示元素收到错误。

该问题被标记为“此元素具有aria-describedby属性值,其中包含一个或多个无效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>

基金会的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 Tooltip,它使用插件创建ID名称:

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

据我所知,这是一个有效的ID,应该正常工作。我假设如果我的测试工具无法获取ID,辅助技术也会遇到问题。

我的问题是:这样可以保留原样,还是真的存在错误,会导致辅助技术出现问题?

我使用ARIA属性相当新,所以如果这个问题令人困惑或措辞不当,请向我道歉。谢谢!

1 个答案:

答案 0 :(得分:0)

  

我的问题是:这样可以保留原样,还是真的有错误会导致辅助技术出现问题?

aria-describedby添加了javascript,div也是如此。屏幕阅读器读取生成的DOM。所以一切都好。

如果你指出了你使用的工具会有帮助,因为错误可能是这个工具由于其隐藏状态而无法检索div,但这不是屏幕阅读器的问题观点看法。请注意,aria-hidden=true没有任何区别。