8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

将焦点集中在模态框内 - 可访问性

Thyag 2月前

37 0

我试图在模态框打开时,焦点应该移动到模态框内的第一个可聚焦元素(比如关闭按钮)。此外,在模态框打开时,用户只能导航

我试图在模式打开时将焦点移动到模式内的第一个可聚焦元素(例如关闭按钮)。此外,当模式打开时,用户只能使用 Tab 键在模式内的元素之间导航。

我试过下面的代码。但它陷入了模式,但在一些选项卡之后它转到浏览器的地址栏。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .modal {
         display: none;
         position: fixed;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 250px;
         height: auto;
         z-index: 999;
         background-color: aliceblue;
      }
   </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   <button class="openModal">Open Modal</button>
   <div class="modal">
      <button class="closeModal">Close Modal</button>
      <h4>Text here</h4>
      <a href="/main-page">Link to Main page</a>
   </div>

   <a href="/home">Home</a>
   <a href="/about">About</a>

   <script>
      $(document).on('click', '.openModal', function (e) {
         $('.modal').fadeIn();
         $('button').attr('tabindex', '-1');
         $('a').attr('tabindex', '-1');
         $('.modal button').removeAttr('tabindex',);
         $('.modal a').removeAttr('tabindex',);
      });

      $(document).on('click', '.closeModal', function (e) {
         $('.modal').fadeOut();
         $('button').removeAttr('tabindex',);
         $('a').removeAttr('tabindex',);
      });
   </script>
</body>
</html>
帖子版权声明 1、本帖标题:将焦点集中在模态框内 - 可访问性
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Thyag在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • @fdomn-m 请查看我的回答。我在使用屏幕阅读器时在我的网站上使用了相同的功能。

返回
作者最近主题: