如何在 listitem (ARIA) 上按下屏幕阅读器 NVDA 读取 ENTER 键？答案

【问题标题】：How can I make screen reader NVDA reads ENTER key when press it on listitem (ARIA)?如何在 listitem (ARIA) 上按下屏幕阅读器 NVDA 读取 ENTER 键？
【发布时间】：2021-07-16 22:20:45
【问题描述】：

我从昨天开始就在努力让它工作，但我做不到。问题是：我有一个项目列表，您可以使用 ENTER 键选择并选择其中一个，但是当您按 ENTER 键进入所选项目时，ScreenReader 不会读取任何内容。

我尝试了很多东西，aria-selected="false"（它只适用于按钮，但我试图用<a> 来做这件事，所以它不起作用），javascript，aria-atomic= "true" 但输入键不读取 nvda（屏幕阅读器）

这是我正在尝试修复的一段代码

<div class="SelectedNames"> <ol> <li ng-repeat="name in names" ng-class"isSingleNameSelected(name) == true ? 'selected' : no-selected'" ng-click="verifySelected(name)"> <a href="%" class="nameTitle> {{ item.name }}</a>

我正在修改零件内部。因为我猜它可以在不触及其余代码的情况下工作

我不介意您是否可以向我展示另一种方法，例如没有 aria 的 javascript 来执行此操作。我只需要它在您按 enter 进入列表项中的项目时工作如果有人能发现如何解决它，我会很感激，因为我做不到。谢谢

【问题讨论】：

标签： javascript wai-aria

【解决方案1】：

你的问题不是很清楚。但我了解您希望“点击”功能也可以在点击“输入”按钮时发挥作用。如果我的理解是正确的，你需要添加(keypress)事件。

似乎您正在使用 Angular（因为我可以看到 ng-repeat 和所有内容）。因此，您的代码可以更改为此以支持键盘可访问。

这称为键盘辅助功能：

// Only Mouse click event 

<li (click)="callSomeFunction($event)"> 
   Some LI item
</li>


// Mouse click and Keyboard accessible event
<li (click)="callSomeFunction($event)" (keypress)="callSomeFunction($event)"> 
   Some LI item
</li>

(keypress) 会做的是，每当您按下键盘上的任何按钮时，它都会调用该函数。

您可以使用另外 2 个事件：(keyup) 和 (keydown) 这将让您在按键完成后或按键期间控制函数的调用。您可以使用任何您想实现上述功能的东西。

【讨论】：