使用ARIA描述并查看转子中的链接列表时,iOS(MacBook Pro)语音限制。链接目的WCAG 2.2.4

发布于 2025-02-01 10:14:45 字数 294 浏览 5 评论 0原文

我观察到MacBook Pro上运行语音时,ARIA描述的值用于满足上下文中的链接目的,WCAG 2.4.4,当我打开转子并查看链接列表时,不可见。当我直接关注元素时,我确实会听到文本。这不是所需的经历,因为如果多个锚包含相同的链接文本,使用辅助技术的人仍然具有模棱两可的目的。
我知道我可以使用Aria-labelledby满足需求,并在每个CTA中添加唯一的ID以及提供有关链接目的更多详细信息的部分。这只会增加更多的开发工作,最终将增加成本。

我对声音的明显限制感到好奇。有人以前遇到过吗?
有人建议解决方案,以便可以使用ARIA描述吗?

I observed when running voice over on MacBook Pro that the aria-describedby value used to satisfy link purpose in context, WCAG 2.4.4, is not visible when I open the rotor and view the list of links. I do hear the text when I focus directly on the element. This is not the desired experience as the person using assistive technology is still left with an ambiguous purpose if multiple anchors contain the same link text.
I know I can use aria-labelledby to satisfy the requirement and add unique IDs to each CTA as well as the section that provides more details about links purpose. This only adds more development work which ultimately will increase costs.

I am curious about voice over's apparent limitation. Has anyone encountered this before?
Anyone have suggested solutions to so that one can use aria-describedby?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一笑百媚生 2025-02-08 10:14:46

我不会担心。配音并不孤单。 PC上的NVDA和下巴都列出了 >链接而不是可访问的描述。那是故意的。如果链接通过aria-descred提供了链接对话框中的上下文,则可以。

通常,我通常会出于aria -labelledfy提供所有上下文。

无论您是使用aria-labelled还是aria-deScription并不会真正导致“更多的工作”或更多成本。如果有成本,那是可以忽略的。

从理论上讲,这可能是“少的工作”,听起来可能是您正在使用的模式:

<h3 id="context">important heading</h3>
<a href="#" aria-describedby="context">learn more</a>

这是我通常要做的:

  • 在标题上添加ID(尽管您应该已经在标题上有一个ID在ARIA描述中引用它)
  • 将ID添加到链接中
  • 添加aria-labelledby到引用两个ID的链接,
<h3 id="context">important heading</h3>
<a href="#" aria-labelledby="linkID context" id="linkID">learn more</a>

我看不到第二个示例与第一个示例“增加成本”与第一个示例是如何的。这将显示“转子链接”对话框中的完整上下文。

如果我想在语法上更改或更加正确,我将拥有一个隐藏的“关于”文本,也可以在aria-labelleddy中使用。如果我有几个链接,它们都可以指向“关于”文本相同的链接。

<span class="display:none" id="abt">about</span>

<h3 id="context">important heading</h3>
<a href="#" aria-labelledby="linkID abt context" id="linkID">learn more</a>

<h3 id="context2">another important heading</h3>
<a href="#" aria-labelledby="linkID2 abt context2" id="linkID2">learn more</a>

现在,屏幕读取器将说并显示“有关重要标题的更多信息”和“更多有关另一个重要标题”的信息。

I wouldn't worry about it. VoiceOver is not alone. NVDA and JAWS on the PC both list just the accessible name of the link and not the accessible description. That's intentional. It's ok if the link does not have context in the links dialog if your context is provided via aria-describedby.

I typically provide all the context with aria-labelledby for exactly the reason you're asking about - so that the links dialog will show the full context.

Whether you use aria-labelledby or aria-description doesn't really cause "more work" or more cost. If there is a cost, it's negligible.

In theory, this might be "less work" and sound like it might be the pattern you're using:

<h3 id="context">important heading</h3>
<a href="#" aria-describedby="context">learn more</a>

Here is what I usually do:

  • add an ID to the heading (although you should already have an ID on the heading in order to reference it in aria-describedby)
  • add an ID to the link
  • add aria-labelledby to the link that references the two IDs
<h3 id="context">important heading</h3>
<a href="#" aria-labelledby="linkID context" id="linkID">learn more</a>

I don't see how the second example "increases costs" compared to the first one. This will show the full context in the rotor links dialog.

If I want to get fancy or more grammatically correct, I'll have a hidden "about" text that I also use in aria-labelledby. If I have several links, they can all point to the same "about" text.

<span class="display:none" id="abt">about</span>

<h3 id="context">important heading</h3>
<a href="#" aria-labelledby="linkID abt context" id="linkID">learn more</a>

<h3 id="context2">another important heading</h3>
<a href="#" aria-labelledby="linkID2 abt context2" id="linkID2">learn more</a>

Now the screen reader will say and display "learn more about important heading" and "learn more about another important heading".

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文