自定义role=slider组件在触屏设备上的WAI ARIA适配需求

问题背景 #

我实现了一个自定义slider组件，桌面端已完成以下适配：

• 组件处于:focus:visible状态时，支持通过ArrowUp/ArrowLeft和ArrowRight/ArrowDown箭头键移动滑块thumb，符合role="slider"的键盘交互要求
• 用interact.js实现了thumb的一维拖拽（锁定Y轴），也可替换为jQuery UI等方案
• 处理了箭头键的步进逻辑：Ctrl键慢移、Shift键中速、默认快速，松开按键后滑块复位，核心逻辑代码如下：

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);

• 给组件添加了aria-label说明操作方式：

<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." …>

现在想了解：在触屏设备上，这个组件还需要支持哪些功能？

MDN文档相关提示：

警告：要更改滑块值，基于触摸的辅助技术需要通过合成按键事件来响应用户增减值的手势。在使用slider角色（及所有范围组件）前，请在以触摸为主要输入方式的设备上使用辅助技术全面测试滑块组件。

触屏设备需补充的适配点 #

• 无障碍属性实时同步：触摸拖拽或点击调整thumb位置时，必须实时更新aria-valuenow、aria-valuemin、aria-valuemax三个核心属性，确保屏幕阅读器能实时播报当前滑块值。可以在onThumbPositionChange函数里统一处理这些属性的更新。
• 轨道点击定位支持：触屏用户习惯直接点击滑块轨道快速定位，需要实现点击轨道任意位置时，将thumb移动到对应坐标，并复用onThumbPositionChange触发值更新逻辑。
• 触摸焦点管理：触摸thumb时自动让组件获得焦点，同时显示清晰的焦点样式（比如高亮边框），确保使用蓝牙键盘或辅助技术的用户能明确感知当前交互对象。
• 合成按键事件兼容：部分触屏辅助技术会将触摸手势转化为箭头键合成事件，需测试你的onArrowKey函数能否正常处理这些事件——重点确认合成事件的key值、ctrlKey/shiftKey等修饰符是否与原生按键一致。
• 触摸事件冲突处理：区分触摸点击和拖拽行为，比如当触摸移动距离超过5px时判定为拖拽，避免拖拽过程中误触发点击事件导致thumb位置跳变。可在interact.js的拖拽回调中添加状态标记，阻止点击逻辑执行。
• 触摸反馈优化：拖拽或点击调整值时，给thumb添加视觉反馈（如缩放、阴影变化），让用户明确感知操作生效；步进式滑块每一步调整需有清晰的视觉提示。

内容的提问来源于stack exchange，提问作者Shtole