主页 / coding / 问题 / 79575348
Accepted
Shtole
Asked: 2025-04-15 22:05:07 +0800 CST

role=slider WAI ARIA 对触摸屏的要求

  • 772

我有一个自定义的滑块实现。当滑块为 时:focus:visible，我会处理箭头键（Up/Left和Right/ Down）来移动滑块。我想，这足以role="slider"在桌面浏览器中声明该控件了。

我应该在触摸屏设备上支持什么？

MDN只是说：

警告：要更改滑块值，基于触控的辅助技术需要通过合成按键事件来响应用户增加或减少值的手势。在使用滑块角色（以及所有范围微件）之前，请在以触控为主要输入机制的设备上，使用辅助技术对滑块微件进行全面测试。

更新我真的相信这里不需要 MRE，因为我的实现非常简单：

  1. 我对拇指使用了标准的可拖动行为。有很多可拖动实现，例如jQuery UI捆绑的一个，但我更喜欢interact.js 的可拖动功能（Y 轴锁定，即一维）。

  2. 为了让那些行动不便的人和屏幕阅读器用户能够方便地进行控制，我还处理了箭头键：

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

1 个回答

  1. Best Answer

    我至少会确保您可以通过拖动和点击来更改值，并使用VoiceOver和Talkback进行测试，以确保标准滑块控件正常工作。将您的滑块与人们习惯使用的标准 HTML 滑块进行比较。W3C 有一些自定义滑块实现的示例，可以与 VoiceOver 配合使用，但是如果我双击、按住并拖动以更改值，则不会读取值，因此还有一些改进空间。您可以使用 aria live 区域来解决这个问题，当值发生变化时，它会动态更新值。我也想尝试使用语音控制软件，以下是Windows 内置语音控制中滑块的说明。

    • 1

相关问题