我有一个自定义的滑块实现。当滑块为 时:focus:visible，我会处理箭头键（Up/Left和Right/ Down）来移动滑块。我想，这足以role="slider"在桌面浏览器中声明该控件了。
我应该在触摸屏设备上支持什么？
MDN只是说：
警告：要更改滑块值，基于触控的辅助技术需要通过合成按键事件来响应用户增加或减少值的手势。在使用滑块角色（以及所有范围微件）之前，请在以触控为主要输入机制的设备上，使用辅助技术对滑块微件进行全面测试。
更新我真的相信这里不需要 MRE，因为我的实现非常简单：
我对拇指使用了标准的可拖动行为。有很多可拖动实现，例如jQuery UI捆绑的一个，但我更喜欢interact.js 的可拖动功能（Y 轴锁定，即一维）。
为了让那些行动不便的人和屏幕阅读器用户能够方便地进行控制，我还处理了箭头键：
function onArrowKey(e)
{
if (mouseDraggingIsInProcess)
return;
if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key))
{
e.stopImmediatePropagation();
e.preventDefault();
if (e.type == 'keydown')
{
const thumbPositionY = match(e)
(
when(e => e.ctrlKey, 1),
when(e => e.shiftKey, (1 + options.stepsCount) / 2),
otherwise(options.stepsCount)
);
if ('ArrowDown' == e.key || 'ArrowRight' == e.key)
onThumbPositionChange(0, thumbPositionY);
else if ('ArrowUp' == e.key || 'ArrowLeft' == e.key)
onThumbPositionChange(0, -thumbPositionY);
}
else if (e.type == 'keyup')
{
reset();
}
}
}
control.on('keydown keyup', onArrowKey);
onThumbPositionChange(0, thumbPositionY);与可拖动行为调用的处理程序完全相同。
另外，我添加了div以下属性：
<div aria-label="A joystick. Use arrow keys to move it fast.
Shift makes it move at medium speed. Control makes it move at slow speed.
After releasing the keys it returns to initial position." …>
