让屏幕 reader 发音 div 中的所有文本
Have screen reader pronounce all texts in the div
我有一个 div
定义如下。我希望 div
中的每个文本都读作此 div
中的用户选项卡。在这种情况下,
当用户切换到外部 div
时,屏幕 reader 显示 item.X 和 item.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}}
还是我搞混了?
我有一个 div
定义如下。我希望 div
中的每个文本都读作此 div
中的用户选项卡。在这种情况下,
当用户切换到外部 div
时,屏幕 reader 显示 item.X 和 item.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
如果您的
role
发挥作用的时候了。如果您设计了自己的 link 而不是使用 元素,并且您的自定义 link 由 role="link"
在你的 至于使用 aria-label
,同样,这取决于元素的语义。 aria-label
通常在非语义元素上被忽略,例如
特别是倒数第三个项目符号表示:
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}}
还是我搞混了?