Javascript NVDA屏幕读卡器未在角色内读取和获取焦点="；“对话”；_Javascript_Jquery_Html_Accessibility_Nvda

Javascript NVDA屏幕读卡器未在角色内读取和获取焦点="；“对话”；

javascript jquery html

Javascript NVDA屏幕读卡器未在角色内读取和获取焦点="；“对话”；,javascript,jquery,html,accessibility,nvda,Javascript,Jquery,Html,Accessibility,Nvda,下面提到的代码反映了屏幕上的“对话框”。我正在使用NVDA屏幕阅读器阅读屏幕。打开对话框时，焦点应转到“关闭对话框”按钮。当对话框打开时，屏幕阅读器将焦点放在关闭按钮上，但不读取按钮文本。屏幕阅读器一直在阅读背景 JSIDLE链接： .对话框{显示：无；} $（函数（）{ $（'p.first'）.focus（）.focusin（）； setTimeout（函数（）{ $（“.dialog”）.show（）； $（“.element”）.focus（）.focusin（）； }, 3000);

下面提到的代码反映了屏幕上的“对话框”。我正在使用NVDA屏幕阅读器阅读屏幕。打开对话框时，焦点应转到“关闭对话框”按钮。当对话框打开时，屏幕阅读器将焦点放在关闭按钮上，但不读取按钮文本。屏幕阅读器一直在阅读背景

JSIDLE链接：


.对话框{显示：无；}
$（函数（）{
$（'p.first'）.focus（）.focusin（）；
setTimeout（函数（）{
$（“.dialog”）.show（）；
$（“.element”）.focus（）.focusin（）；
}, 3000);
var focusElm=$（'.element'）；
$（文档）.on（'keydown click'，函数（e）{
var代码=e.keyCode | | e.which；
if（$（e.target）.hasClass（'element'））{
e、 预防默认值（）；
e、 停止传播（）；
如果（如移位键和代码===9）{
focusElm.focus（）.focusin（）；
}如果（代码===9 | |代码===37 | |代码===38 | |代码===39 | |代码===40）{
focusElm.focus（）.focusin（）；
}否则如果（代码===13）{
console.log（“代码13”）；
}
}
});
});
Lorem ipsum door sit amet，Concetetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua
如果你是一名小职员，那么你可以在一家普通消费品公司的实验室里实习。
关闭对话框

晚会迟到了！但是，我还是把焦点放在了jqueryui-dialog.open的对话框上：function（event，ui）{document.addEventListener（'keydown'，function（e）{if（e.key=='Tab'| | e.keyCode=='9'）{if（$（element.dialog（'isOpen'））{var isChildItemActive=false；$（element.children（）.each（函数）（）{if（$（this）.is（“：focus”）{isChildItemActive=true；}}}）；if（！isChildItemActive）{$（element）.find（':focusable'）.first（）.focus（）；}}}}}}}），派对迟到了！但是，我还是在jqueryui-dialog.open:function（event，ui）的对话框上获得了焦点{document.addEventListener（'keydown'，function（e）{if（e.key=='Tab'| | e.keyCode=='9'）{if（$（element）.dialog（'isOpen'））{var isChildItemActive=false；$（element.children（）。每个（function（）{if（$（this.is（'focus））{isChildItemActive=true；}）；if（！isChildItemActive）{$（element）.find（':focusable'）.first（）.focus（）；}}}}，

<html>
   <body>
      <style>
         .dialog {display:none;}
      </style>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
         $(function() {
            $('p.first').focus().focusin();
            setTimeout(function() {
                $(".dialog").show();
                $(".element").focus().focusin();
            }, 3000);
            var focusElm = $('.element');
            $(document).on('keydown click', function(e) {
                var code = e.keyCode || e.which;
                if ($(e.target).hasClass('element')) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (e.shiftKey && code === 9) {
                        focusElm.focus().focusin();
                    } else if (code === 9 || code === 37 || code === 38 || code === 39 || code === 40) {
                        focusElm.focus().focusin();
                    } else if (code === 13) {
                        console.log('code 13');
                    }
                }
            });
        });
      </script>
      <p class="first" tabindex="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p tabindex="0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>     
      <div class="dialog" role="dialog" aria-label="dialog box">
         <button class="element" tabindex="1" title="close dialog" alt="close dialog">
         close dialog
         </button>
      </div>
   </body>
</html>