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

我需要用戶閒置時觸發的模式的幫助。它運行良好，直到我在運行NVDA的Firefox上測試。使用箭頭鍵時以及在手機上滑動時存在焦點問題。當模式出現並且用戶使用箭頭或輕掃時，如果等待點擊，焦點將在幾秒鐘後從yes按鈕彈出到標題。我已經將工作示例加載到：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(); 
     } 
    } 
}

來源

2016-08-13 user1725382

的問題是與配音Safari瀏覽器，當用戶刷上錨或按鈕焦點確定這些要素;然而，如果元素是H2，它將不會獲得焦點，因爲它本身不應該接收任何焦點。爲了彌補，我嘗試在H2上設置手勢事件，但是，Voiceover Safari需要時間來讀取元素文本或標籤出負載，因此它可以防止任何事件觸發，並且在嘗試將焦點設置爲加載的模式時會產生問題一個超時功能，而不是一個可點擊的元素。希望蘋果將在未來解決這個問題。

來源

2016-09-09 18:55:28 user1725382

候選條件的解決方案

禁用身體上指針的事件時覆蓋可見。這將限制在body元素
使用JS/jQuery的鍵盤/刷卡事件觸發重點是按鈕

來源

2016-09-07 13:58:40

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

回答

相關問題