Phương thức cảnh báo thời gian chờ không hoạt động trên trình đọc màn hình

Question

Tôi cần trợ giúp với phương thức kích hoạt khi người dùng rảnh. Nó hoạt động tốt cho đến khi tôi thử nghiệm trên Firefox với NVDA đang chạy. Có vấn đề với tiêu điểm khi sử dụng các phím mũi tên và khi tôi vuốt trên thiết bị di động. Khi phương thức xuất hiện và người dùng sử dụng mũi tên hoặc vuốt tiêu điểm sẽ bị trả lại từ nút có thành tiêu đề sau một vài giây nếu tôi đợi bấm vào nó. Tôi đã tải ví dụ đang hoạt động về: https://jsfiddle.net/ncanqaam/

Tôi đã thay đổi khoảng thời gian không hoạt động thành một phút và xóa phần gọi máy chủ để mở rộng phiên của người dùng.

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

Vấn đề là với Voiceover Safari khi người dùng swipes trên một neo hoặc nút trọng tâm là đặt trên các yếu tố này; tuy nhiên, nếu phần tử là H2 thì nó sẽ không nhận được tiêu điểm bởi vì bản chất nó không phải là nhận được bất kỳ. Để bù lại tôi đã cố gắng đặt các sự kiện cử chỉ trên H2 nhưng Voiceover Safari cần thời gian để đọc phần tử văn bản hoặc quá trình tải nhãn, vì vậy nó không cho phép bất kỳ sự kiện nào phát sinh và điều này tạo ra sự cố khi cố gắng tập trung vào một phương thức tải một hàm thời gian chờ thay vì một phần tử có thể nhấp. Hy vọng rằng Apple sẽ giải quyết vấn đề này trong tương lai.

Answer 2

Possibles giải pháp

1. Disable con trỏ-sự kiện trên cơ thể khi lớp phủ có thể nhìn thấy. điều này sẽ hạn chế sự kiện bàn phím/swipe trên các yếu tố cơ thể
2. Sử dụng JS/jQuery để kích hoạt tập trung vào nút có