让屏幕 reader 发音 div 中的所有文本

Have screen reader pronounce all texts in the div

我有一个 div 定义如下。我希望 div 中的每个文本都读作此 div 中的用户选项卡。在这种情况下, 当用户切换到外部 div 时,屏幕 reader 显示 item.Xitem.Y (项目是一个变量)。

<div tabindex="0">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div> 

我试图给这个 div 一个 role="link",它读取所有内容,但是这个 div 不是 link 所以我不认为它是正确的方法。

<div tabindex="0" role="link">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div> 

我也尝试执行以下操作,但似乎 aria-label 不适用于 Angular 插值。

<div tabindex="0" role="link" aria-label="{{item.X}}">
    <div>{{item.X}}</div>
    <div>{{item.Y}}</div>
 </div>  

实现我的目标的正确方法是什么?

如果不在上下文中查看您的真实代码,很难给出完整的答案。我假设示例代码只是一种简化,但我会指出示例中的问题。

首先,您有一个 <div tabindex="0">,它允许键盘焦点移动到该元素,但该元素似乎没有执行任何操作。它不是交互式元素。 html spec for tabindex.

中有一个警告

authors should only make elements focusable if they act as interactive controls or widgets

如果您的

确实做了一些事情(也许您在javascript中有一个点击处理程序),那么您仍然有问题因为您的
没有任何语义。屏幕 reader 不会知道
的用途。这就是 role 发挥作用的时候了。如果您设计了自己的 link 而不是使用 元素,并且您的自定义 link 由
元素组成,那么您将拥有 role="link"在你的
上。该角色的目的不是强制阅读所有文本。目的是向辅助技术(例如屏幕 reader)传达该对象的 目的 是什么。

至于使用 aria-label,同样,这取决于元素的语义。 aria-label 通常在非语义元素上被忽略,例如

。请参阅“Practical Support: aria-label, aria-labelledby and aria-describedby

的 W3 规范

特别是倒数第三个项目符号表示:

Don't use aria-label or aria-labelledby on a span or div unless its given a role.

但同样,不要为您的

赋予随机角色以强制读取标签。

本质上,您正在寻找要阅读的"accessible name"。 accessible name calculation 定义明确。

参见步骤 2.F 和 2.F.ii 关于 "name from content" 和遍历 DOM 中的子元素。但这又取决于角色。

因此,根据您的情况,在不知道您

的目的的情况下,很难给出具体的建议。

也许您需要 aria-label 解析它的值,方法是:

[aria-label]="{{item.X}}

还是我搞混了?