javascript - 在屏幕阅读器中移动光标

Question

背景

我有一个具有主/细节类型设计的网站。主视图是一个柱形图，其中单击其中一列(每列代表一个月)会更改详细 View (这是一个列出该期间的一些详细信息的嵌套表)。我已经开始了可访问性审核，正如您可能想象的那样，它并不是很容易访问。我通过添加 aria-hidden="true" 解决了该图表并添加一个不可见的表格，其内容与月份行中的按钮相同。现在激活按钮将执行与单击图表列相同的操作 - 更改详细 View 。

移动焦点

当单击主视图中表格中的按钮时，我的屏幕阅读器(在本例中为 VoiceOver Safari)会读取“已单击按钮”，但随后使用光标键会继续读取表格。我假设用户一旦决定单击哪个按钮就会想要阅读详细 View ，因此我想将它们移到那里。

我尝试过的

我将按钮更改为 <a href="#detail-view" ng-click="loadDetail">并给详细 View 容器 div id="detail-view" 。这似乎没有做任何事情。

Answer 1

简单的回答:不。将焦点转移到失明用户身上实际上是一种可访问性违规。请参阅 WCAG 标准 3.2.2。

简而言之，您不应在按下按钮或其他控件交互后自动启动上下文更改。您应该做的是通过公告或通过在控件本身的辅助功能文本中提供更改的描述来通知用户新内容。提供此上下文的一个示例是将您的主单元格宣布为“选项卡”。只需将按钮作为选项卡进行简单关联即可提供大量信息!

为了使您的应用程序更易于访问，您应该通过提供适当的 Angular 色信息(我在这里最有可能找到“选项卡”，但其他 Angular 色可能适用)来确保用户知道他们处于主从类型的控制中。另外，在主视图和详细 View 的顶部提供标题，以便他们可以轻松地在两者之间导航。只要他们知道自己在哪里，并且可以轻松导航到页面的重要区域，就可以了。自动转移焦点实际上是一种可访问性违规，应该避免。