画外音未读取链接的描述（aria-描述）

Question

我的代码中有

<a>

标记，该标记附加了工具提示，并且工具提示应该由 aria-描述的读取。 Mac 上的画外音只是忽略它，只宣布链接。

关联的 WAI-ARIA 角色、状态和属性 用作工具提示容器的元素设置了 role="tooltip"。 触发工具提示的元素通过 aria-scribedby 引用工具提示元素。

Answer 1

由于 link 元素是由其父元素描述的，因此它是一个包含自身的循环引用。这可能就是它被忽略的原因。

document.querySelector('li#li1').textContent;

// output 
// Check out the video report for last year's National Folk Festival.

我知道您正在遵循的 W3C 示例，但我认为这不是一个很好的示例。列表项中的 DOM 节点已经以编程方式关联，无需尝试使用 ARIA 进一步将它们链接在一起。

据我了解，

aria-describedby

旨在引用 different DOM节点（即兄弟元素或子元素），而不是父元素。

来自 aria-按规范描述：

aria-labelledby 属性与 aria-scribedby 类似，都引用其他元素来计算文本替代...

如果您尝试创建工具提示，那么

<a>

元素在语义上并不真正正确。如果您尝试创建用于显示隐藏文本的触发器，请改用

<button>

。锚元素意味着 URI 将发生变化，但对于工具提示来说通常并非如此。

工具提示模式一般用在交互式UI控件上，像这样：

<input aria-describedby="password-rules" id="password" type="password" />
<div id="password-rules">Passwords must contain a minimum of 8 characters.</div>

如果您的目标是向常规链接添加额外的咨询文本，那么您可以尝试的另一种技术是使用仅屏幕阅读器文本，源自引导程序库。