用于此颜色选择器小部件的正确 ARIA 角色是什么?
What's the correct ARIA role to use for this color picker widget?
我创建了 this color picker widget,它具有一个不寻常的、主要基于鼠标的控制方案来操纵 HSV 值:
- 向上移动鼠标增加亮度(值),向下移动鼠标降低亮度
- 左右移动鼠标改变颜色(色调)
- 滚动以增加鲜艳度(饱和度)
我正在考虑为盲人和视力有限的用户创建一个替代输入,但由于 3D 滑块式控制方案根本不使用可见滑块,role="slider"
没有在这里申请。那么我应该为那种 3D "slider" 使用什么 ARIA 角色?
从纯理论的角度来看,这是 input[type=color]
标签的替代品,因此根据 ARIA in HTML 它应该没有任何作用。
交互实际上是两个不同滑块的交互(垂直用于亮度,水平用于色调)。
使屏幕 reader 用户可以访问内容的一种可能方法是在底层 HTML 中显示两个单独的滑块,并使用 aria-orientation 属性指示每个滑块的方式一个是介绍。然后,您需要确保 JavaScript 为每个键盘提供相关的键盘支持。
ARIA APG 有一些演示。
如果任一滑块影响另一个滑块的状态(例如,如果更改亮度会改变色调),那么您可能需要更复杂的解决方案。 double slider 的变体可能是一种选择。 example/demo 现在有点旧了,但是调整它以使用 APG 模式应该可以解决问题。
我创建了 this color picker widget,它具有一个不寻常的、主要基于鼠标的控制方案来操纵 HSV 值:
- 向上移动鼠标增加亮度(值),向下移动鼠标降低亮度
- 左右移动鼠标改变颜色(色调)
- 滚动以增加鲜艳度(饱和度)
我正在考虑为盲人和视力有限的用户创建一个替代输入,但由于 3D 滑块式控制方案根本不使用可见滑块,role="slider"
没有在这里申请。那么我应该为那种 3D "slider" 使用什么 ARIA 角色?
从纯理论的角度来看,这是 input[type=color]
标签的替代品,因此根据 ARIA in HTML 它应该没有任何作用。
交互实际上是两个不同滑块的交互(垂直用于亮度,水平用于色调)。
使屏幕 reader 用户可以访问内容的一种可能方法是在底层 HTML 中显示两个单独的滑块,并使用 aria-orientation 属性指示每个滑块的方式一个是介绍。然后,您需要确保 JavaScript 为每个键盘提供相关的键盘支持。
ARIA APG 有一些演示。
如果任一滑块影响另一个滑块的状态(例如,如果更改亮度会改变色调),那么您可能需要更复杂的解决方案。 double slider 的变体可能是一种选择。 example/demo 现在有点旧了,但是调整它以使用 APG 模式应该可以解决问题。