该颜色选择器小部件可使用的正确ARIA角色是什么？

Question

我创建了this color picker widget，它具有一种异常的，主要基于鼠标的控制方案来操纵HSV值：

• 向上移动鼠标以增加亮度（值），向下移动以降低亮度
• 向左或向右移动鼠标以更改颜色（色调）
• 滚动以增加鲜艳度（饱和度）

我当时在考虑为盲人和视力不佳的用户创建替代输入，但是由于类似3D滑块的控制方案根本没有真正使用可见的滑块，因此role="slider"并没有在这里申请。那么对于那种3D“滑块”我应该使用什么ARIA角色？

Answer 1

从理论上讲，这是input[type=color]标签的替代品，因此根据ARIA in HTML，它应该没有作用。

Answer 2

该交互实际上是两个不同的滑块（垂直表示亮度，水平表示色调）的交互作用。

一种使屏幕阅读器用户可以访问的东西的可能方法是在底层HTML中显示两个单独的滑块，并使用aria-orientation属性指示每种显示方式。然后，您需要确保JavaScript为每个键盘提供了相关的键盘支持。

ARIA APG有一些演示。

如果其中一个滑块影响另一个的状态（例如，如果更改亮度会更改色调），则可能需要更复杂的解决方案。可以选择对double slider进行更改。那个示例/演示现在已经有点老了，但是将其修改为使用APG模式应该可以解决问题。