Angular js，可访问性，表格，键盘箭头键导航答案

【问题标题】：angular js, accessibility , tables, keyboard arrow keys navigationAngular js，可访问性，表格，键盘箭头键导航
【发布时间】：2020-09-13 17:55:13
【问题描述】：

我有一个旧的 Angular js 应用程序，我的任务是解决可访问性问题。我有一个表格，其中包含单元格内的单选按钮，我需要使用向上和向下箭头键在它们之间导航。

在我使用屏幕阅读器 (NVDA) 对其进行测试之前，我已经有一种方法可以处理这个问题并且它工作正常

由于某种原因，SR 导致该方法被忽略并导致表格失去焦点。

我设法使它工作的唯一方法是使用role="application" 设置表。但是从我到目前为止所阅读的内容来看，在这种情况下使用它是错误的

这是其中一个细胞的样本：

    <td class="scheduleLineCell" style="text-align: center;">
         <input type="radio" 
                class="btnRadio ng-valid ng-not-empty ng-touched ng-dirty" 
                aria-describedby="" 
                value="126" data-ng-model="selectedIdList[childSchedule.gridIndex]" 
                data-ng-key-press="scheduleKeyPress" 
                data-ng-grid-index="0" 
                xng-focus="isFocusOnStationButton == false &amp;&amp; 
                isFocusOnMapButton == false &amp;&amp; ScheduleLine.Id == 
                selectedIdList[search.currentScheduleGridIndex]" name="2096">
    </td>

【问题讨论】：

您的问题太模糊，无法解决。您要实施什么“方法”？以及它如何/为什么不起作用？预期与实际行为是什么？如果您专注于呈现的 HTML 示例而不是角度代码，您可能会在这里得到更好的答案。
在没有屏幕阅读器的情况下工作的行为只是将焦点从一个单选按钮移动到另一个单选按钮，当然选择它（它们每个都在不同的行单元格中。问题是使用SR 出于某种原因禁用了此功能
我仍然很难理解你想要做什么，什么不起作用。如果您可以发布整个 HTML 表格，这可能会有所帮助。键盘交互应该起作用的方式是您应该能够tab 进入单选按钮组。一旦焦点集中在一个组上，您应该能够使用向上/向下箭头键在各个按钮之间移动。这是辅助技术用户所期望的标准行为。没有期望箭头会在组之间移动。 w3.org/wiki/RadioButton

标签： javascript angularjs keyboard accessibility

【解决方案1】：

你能在这里或 JSfiddler 上做一个工作示例吗？

我可以这么说。

您不应将控件放在表格中或将表格用于设计目的。
一个。如果您有一个输入数据行，请从“div”s
乙。记住屏幕阅读器经常重复表格标题！
JAWS 和 NVDA 确实弄乱了屏幕 JSEvents 并为我们提供了一个示例页面来帮助
(AngularJS) 将控件重构回组件或指令，看看是否有帮助。
一个。例如 <custom-radio-button ng-value="val" aria-checked="true"></custom-radio-button>

【讨论】：

我知道当前的结构是错误的，但我暂时不打算更改它，无论如何我找到了解决问题的方法 - 将 role="presentation" 添加到变形表。不是 100% 确定它为什么有效，但它确实有效......如果有人能解释是什么让这个解决方案有效，请解释
timwright.org/blog/2016/11/19/… 我认为这会有所帮助，对于屏幕阅读器，您已经更改了页面结构，以便它可以找到内容。