html - 2d x/y 轴平面输入的适当咏叹调角色和行为是什么？

Question

我有一个组件，它呈现一个 x/y 轴平面和一个用户可以在平面内移动的小块。这里可访问性的某些方面看起来非常简单:小结应该是可聚焦的；键盘上/下/左/右应按一定间隔移动小块以在适当的方向上增加 x/y 值。即使使用辅助文本输入，无论用户是否使用辅助技术，这些适用于小部件的行为都可能会有所帮助。

但是当我开始研究应该如何以 aria-wise 方式标记它时，我不确定合适的角色应该是什么，或者传达可用功能的最佳方式是什么。

最接近角色的匹配项似乎是“ slider ”: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role

但是 MDN 上描述的 slider 角色似乎是单轴 slider 所特有的。

Answer 1

slider 实际上只是一维的，因此它不是合适的角色。

要了解这一点，请阅读 ARIA 1.1 中 slider 的描述。 http://www.w3.org/TR/wai-aria-1.1/

描述中没有提到您可以使用除简单数值以外的其他东西，值之间的比较应该是唯一的和总的(对于 2D 点不是)，它还读取以下内容:

Elements with the role slider have an implicit aria-orientation value of horizontal

它是水平的；它当然可以是垂直的；但绝对不是同时。

顺便说一句，默认情况下，例如 Jaws 或多或少地为 slider 宣布:“左右 slider 。使用左右箭头键调整值”，这对您的情况是错误的。

如果你在一个离散的平面上，我会建议使用 grid/row/gridcell。但是由于您是在连续平面(或几乎)中选择坐标，您的情况很特殊/非常规，如果不存在您可以应用的预定义 ARIA 配方。

在没有真正足够角色的情况下，最好的办法可能是根本不为您的组件指明任何角色。因此，辅助技术不会通过告诉用户您的控制实际上不是什么而使用户感到困惑，也不会向用户提供有关如何使用它的错误指示。完全没有迹象可能比错误的迹象要好。

当然，您仍然必须使用 aria-label/aria-labelledby 为您的组件添加标签，使其可聚焦且可使用键盘。您还应该通过提供精确的键盘使用说明来理想地弥补预定义角色的缺失。为此，在 aria-describedby 中保持简短(每次控件聚焦时可能会读取它)，如果需要/如果控件非常复杂，请在其他地方用纯文本对其进行更长的解释。

如果实在太复杂，你也可以放弃，只要你提供一个可以接受的备选输入，均等的可能性。对于颜色选择器，输入 RGB 值或#XXXXXX 代码当然是可以接受的并且是足够的替代输入方式。