在屏幕阅读器上工作的空闲超时警告模式

Posted 2023-05-07

【中文标题】在屏幕阅读器上工作的空闲超时警告模式

【英文标题】：Idle timeout warning modal working on screen reader

【发布时间】：2016-12-20 02:34:27

【问题描述】：

我需要有关在用户空闲时触发的模式的帮助。在我在运行 NVDA 的 Firefox 上进行测试之前，它运行良好。使用箭头键和在手机上滑动时出现焦点问题。当模态出现并且用户使用箭头或滑动时，如果我等待单击它，几秒钟后焦点将从是按钮反弹到标题。我已将工作示例加载到：https://jsfiddle.net/ncanqaam/

我将空闲时间段更改为一分钟，并删除了调用服务器以延长用户会话的部分。

var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;

var lastActivity = new Date();

function getIdleTime() 
    return new Date().getTime() - lastActivity.getTime();


//Add Movement Detection
function addMovementListener() 
    $(document).on('mousemove',  onMovementHandler);
    $(document).on('keypress',  onMovementHandler);
    $(document).on('touchstart touchend',  onMovementHandler);

//Remove Movement Detection
function removeMovementListener() 
    $(document).off('mousemove', onMovementHandler);
    $(document).off('keypress',  onMovementHandler);
    $(document).off('touchstart touchend',  onMovementHandler);


//Create Movement Handler
function onMovementHandler(ev) 
    lastActivity = new Date();
    console.log("Something moved, idle time = " + lastActivity.getTime());


function hide() 
    $('#overlayTY').removeClass('opened'); // remove the overlay in order to  make the main screen available again
    $('#overlayTY, #modal-session-timeout').css('display', 'none'); // hide the modal window
    $('#modal-session-timeout').attr('aria-hidden', 'true'); // mark the modal window as hidden
    $('#modal-session-timeout').removeAttr('aria-hidden'); // mark the main page as visible


if (state == "L") 
    $(document).ready(function() 
        //Call Event Listerner to for movement detection
        addMovementListener();
        setInterval(checkIdleTime, 5000);
    );

    function endSession() 
        console.log('Goodbye!');
    

    var modalActive = false;
    function checkIdleTime() 
        var idleTime = getIdleTime();
        console.log("The total idle time is " + idleTime / oneMinute + " minutes.");

        if (idleTime > sevenMinutes) 
            var prevFocus = $(document.activeElement);
            console.log('previously: ' + prevFocus);
            var modal = new window.AccessibleModal(
                mainPage: $('#oc-container'),
                overlay: $('#overlayTY').css('display', 'block'),
                modal: $('#modal-session-timeout')
            );

            if (modalActive === false) 
                console.log(modalActive);
                $('#modal-session-timeout').insertBefore('#oc-container');
                $('#overlayTY').insertBefore('#modal-session-timeout');
                modal.show();
                $('#modal-overlay').removeClass('opened');
                modalActive = true;
                console.log(modalActive);
                console.log('the modal is active');
                $('.js-timeout-refresh').on('click touchstart touchend', function()
                    hide();
                    modalActive = false;
                    prevFocus.focus();
                    addMovementListener();
                    lastActivity = new Date();
                );

                $('.js-timeout-session-end').on('click touchstart touchend', function()
                    hide();
                    $('#overlayTY').css('display', 'none');
                    endSession();
                );
               
        
        if ($('#overlayTY').css('display') === 'block')
            removeMovementListener();
        

        if (idleTime > timeoutPeriod) 
            endSession();
        
    

【参考方案1】：

可能的解决方案

当覆盖可见时禁用主体上的指针事件。这将限制正文元素上的键盘/滑动事件 使用 JS/jQuery 触发对yes按钮的关注

【参考方案2】：

问题在于 Voiceover Safari，当用户在锚点或按钮上滑动时，焦点会设置在这些元素上；但是，如果元素是 H2，它将不会收到焦点，因为它本来不应该收到任何焦点。为了补偿我试图在 H2 上设置手势事件，但是 Voiceover Safari 需要时间来读取元素文本或标签输出加载，因此它会阻止任何事件触发，这会在尝试将焦点设置在从加载的模式上时产生问题超时功能而不是可点击元素。希望苹果将来会解决这个问题。