role=slider Requisitos WAI ARIA para telas sensíveis ao toque

Tenho uma implementação personalizada de controle deslizante. Quando ele está em :focus:visible, uso as teclas de seta ( Up/ Lefte Right/ Down) para mover o polegar. Suponho que isso seja suficiente para declarar o controle role="slider"em navegadores de desktop.

O que devo oferecer suporte em dispositivos com tela sensível ao toque?

MDN diz apenas:

Aviso: Para alterar o valor do controle deslizante, as tecnologias assistivas baseadas em toque precisam responder aos gestos do usuário para aumentar e diminuir o valor, sintetizando eventos-chave. Teste completamente os widgets de controle deslizante usando tecnologias assistivas em dispositivos onde o toque é o mecanismo de entrada principal antes de usar a função de controle deslizante (e todos os widgets de intervalo) .

ATUALIZAÇÃO Eu realmente acredito que não há necessidade de um MRE aqui, porque minha implementação é bem simples:

1. Eu uso o comportamento padrão de arrasto para o polegar. Há muitas implementações de arrasto, como uma incluída no jQuery UI , mas eu preferi o arrasto do interact.js (eixo Y travado, ou seja, unidimensional).

2. Para tornar o controle amigável para aqueles que têm dificuldades com movimentos E usuários de leitores de tela, eu também cuido das teclas de seta:

    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);é exatamente o mesmo manipulador que é chamado pelo comportamento arrastável .

Além disso, adicionei o divseguinte atributo:

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