在屏幕閱讀器上工作的空閑超時警告模式

Question

我需要幫助一個在用戶空閑時觸發的模態。 它運行良好，直到我在運行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();
        }
    }
}

Answer 1

可能的解決方案

1. 當疊加可見時，禁用正文上的指針事件。 這將限制body元素上的鍵盤/滑動事件
2. 使用JS / jQuery觸發焦點在yes按鈕上

Answer 2

當用戶在錨點或按鈕上滑動時，問題在於Voiceover Safari，焦點設置在這些元素上; 但是，如果元素是H2，它將不會獲得焦點，因為本身它不應該接收任何焦點。 為了補償我試圖在H2上設置手勢事件但是，Voiceover Safari需要時間來讀取元素文本或標記輸出加載，因此它可以防止任何事件被觸發，這會在嘗試將焦點設置為從加載的模態時產生問題超時功能而不是可點擊元素。 希望Apple將來能夠解決這個問題。