Question

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

JSFiddle Link：http://jsfiddle.net/1uLsab5s/

<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>

NVDA屏幕阅读器无法在角色=“对话框”内阅读并获得焦点

0 个答案: