让屏幕阅读器读出 div 中的所有文本答案

【问题标题】：Have screen reader pronounce all texts in the div让屏幕阅读器读出 div 中的所有文本
【发布时间】：2019-01-29 01:02:02
【问题描述】：

我有一个div 定义如下。我希望div 中的每个文本都被发音为这个div 中的用户选项卡。在这种情况下，当用户切换到外部div 时，屏幕阅读器会读取 item.X 和 item.Y（item 是一个变量）。

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

首先，您有一个<div tabindex="0">，它允许键盘焦点移动到该元素，但该元素似乎没有做任何事情。它不是交互式元素。 html spec for tabindex 中有一个警告。

作者应该只在元素充当交互式控件或小部件时才使它们具有焦点

如果您的

确实做某事（也许您在 javascript 中有一个点击处理程序），那么您仍然会遇到问题，因为您的

没有任何语义含义。屏幕阅读器不会知道

的用途。这就是role 发挥作用的时候。如果您设计了自己的链接而不是使用元素，并且您的自定义链接由

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

特别是，倒数第三个项目符号说：

除非给定角色，否则不要在 span 或 div 上使用 aria-label 或 aria-labelledby。

但同样，不要为您的

赋予随机角色只是为了强制读取标签。

本质上，您正在寻找要读取的“可访问名称”。 accessible name calculation 定义明确。

请参阅步骤 2.F 和 2.F.ii 关于“从内容中命名”和遍历 DOM 中的子元素。但这又取决于角色。

因此，在您的情况下，不知道

的用途，很难给出具体建议。

【讨论】：

我的div就像一个导航栏，但是div里面的每个元素都是不可点击的。每个元素表示用户需要经历的一个步骤。换句话说，div 不是用户难以处理的。我的问题是在这种情况下，我是否需要屏幕阅读器才能阅读其内容？
啊，所以它更像是一个进度指示器，向您显示您已完成的步骤，或您需要完成的步骤。它不是真正的“导航”栏，因为您不使用它导航到其他页面。对于进度指示器，您可以将所有步骤放在一个列表中（可能是一个
我认为有些困惑是关于如何使用屏幕阅读器。您确实不需要需要使元素具有焦点 (tabindex="0") 以便屏幕阅读器用户访问该元素。使用适当的语义 html，例如使用

【解决方案2】：

也许你需要让 aria-label 解析它的值：

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

还是我把事情搞混了？

【讨论】：