在网格内实现可访问性
Implementing accessibility inside the grid
我正在开发一个包含许多行和列且符合可访问性的网格。我在这里遇到的问题很少...
用户可以通过点击每个点来构造网格内的几何形状。他们还可以将每个点拖动到网格内的另一个位置。
我正在考虑使用选项卡焦点使网格中的每个点都可访问。但是，我不确定如何在用户尝试构建网格中的形状时有意义地向用户宣布（比如当他们到达网格中的一个点时，屏幕应该说什么reader？）以及如何制作每个点都可拖动并向用户宣布？
根据您页面上的其他内容，我可能会将整个网格设为 一个 制表位，然后使用箭头键在网格中导航。它使跳转到页面上的其他交互元素（链接、按钮、复选框等）变得更容易一些。如果整个页面由 just 网格组成（即页面上 tab 没有其他内容），那么您可能可以使用 tab 在网格中导航。
假设您使用箭头键进行导航，您可以使用 shift+箭头键来执行实际移动。因此，我可以向右箭头五次，然后向下箭头一次，以到达您示例中的最北端。然后我可以使用 shift+rightarrow 将那个点向右移动。
或者，您可以通过按 enter 箭头指向该点并进入“编辑”模式，然后就不需要 shift加方向键移动点。你可以按一个未修改的箭头。再次按 enter 可以保存点更改并使您退出“编辑”模式。 escape 应该取消移动。
在空网格交点上按 enter 可以创建一个新点。
当您在网格中移动箭头时，您希望听到交点处是否存在现有点。如果没有意义，那么除了网格坐标 (row,col) 之外，您不需要宣布任何其他内容。如果是一个点，那么在网格坐标之后，说“点”之类的话。如果我从左上角开始，然后向右箭头，然后向下到达形状的东边，您会听到类似这样的声音：
- 向右箭头 "1, 2"
- 向右箭头 "1, 3"
- 向右箭头 "1, 4"
- 向右箭头 "1, 5"
- 向右箭头 "1, 6"
- 向右箭头 "1, 7"
- 向下箭头 "2, 7"
- 向下箭头“3、7、点”
- 向下箭头 "4, 7"
- 向下箭头“5、7、点”
（左上角是0,0还是1,1可能无关紧要，随便选一个。）
至于点的作用，确实没有很好的built in role. A <button> comes close but doesn't imply you can move it around. This is probably a good case to use aria-roledescription. You might have to use the application作用，我很少推荐，但你会希望所有键盘事件都发送到你的网格而不是由屏幕解释 reader。如果没有应用程序角色，按箭头键会将键盘事件发送到屏幕 reader，屏幕会读取页面上的下一个词或行。使用应用程序角色会自动将事件发送给您（因此您可以在 JS 中拥有事件处理程序）。
如果您不使用应用程序角色，屏幕 reader 用户仍然可以与您的网格进行交互，但他们必须手动切换模式才能这样做。这很容易做到，但您必须通知屏幕 reader 用户他们需要切换。
我希望这足以开始。
我正在开发一个包含许多行和列且符合可访问性的网格。我在这里遇到的问题很少...
用户可以通过点击每个点来构造网格内的几何形状。他们还可以将每个点拖动到网格内的另一个位置。
我正在考虑使用选项卡焦点使网格中的每个点都可访问。但是，我不确定如何在用户尝试构建网格中的形状时有意义地向用户宣布（比如当他们到达网格中的一个点时，屏幕应该说什么reader？）以及如何制作每个点都可拖动并向用户宣布？
根据您页面上的其他内容，我可能会将整个网格设为 一个 制表位，然后使用箭头键在网格中导航。它使跳转到页面上的其他交互元素（链接、按钮、复选框等）变得更容易一些。如果整个页面由 just 网格组成（即页面上 tab 没有其他内容），那么您可能可以使用 tab 在网格中导航。
假设您使用箭头键进行导航，您可以使用 shift+箭头键来执行实际移动。因此，我可以向右箭头五次，然后向下箭头一次，以到达您示例中的最北端。然后我可以使用 shift+rightarrow 将那个点向右移动。
或者，您可以通过按 enter 箭头指向该点并进入“编辑”模式，然后就不需要 shift加方向键移动点。你可以按一个未修改的箭头。再次按 enter 可以保存点更改并使您退出“编辑”模式。 escape 应该取消移动。
在空网格交点上按 enter 可以创建一个新点。
当您在网格中移动箭头时，您希望听到交点处是否存在现有点。如果没有意义，那么除了网格坐标 (row,col) 之外，您不需要宣布任何其他内容。如果是一个点，那么在网格坐标之后，说“点”之类的话。如果我从左上角开始，然后向右箭头，然后向下到达形状的东边，您会听到类似这样的声音：
- 向右箭头 "1, 2"
- 向右箭头 "1, 3"
- 向右箭头 "1, 4"
- 向右箭头 "1, 5"
- 向右箭头 "1, 6"
- 向右箭头 "1, 7"
- 向下箭头 "2, 7"
- 向下箭头“3、7、点”
- 向下箭头 "4, 7"
- 向下箭头“5、7、点”
（左上角是0,0还是1,1可能无关紧要，随便选一个。）
至于点的作用，确实没有很好的built in role. A <button> comes close but doesn't imply you can move it around. This is probably a good case to use aria-roledescription. You might have to use the application作用，我很少推荐，但你会希望所有键盘事件都发送到你的网格而不是由屏幕解释 reader。如果没有应用程序角色，按箭头键会将键盘事件发送到屏幕 reader，屏幕会读取页面上的下一个词或行。使用应用程序角色会自动将事件发送给您（因此您可以在 JS 中拥有事件处理程序）。
如果您不使用应用程序角色，屏幕 reader 用户仍然可以与您的网格进行交互，但他们必须手动切换模式才能这样做。这很容易做到，但您必须通知屏幕 reader 用户他们需要切换。
我希望这足以开始。