将焦点添加到弹出 /模态时单击以获取选项卡 /可访问性-JavaScript

Question

我有一个元素“单击”上出现的弹出/覆盖层。因为弹出窗口背后有很多HTML内容，所以POP上的按钮/输入元素自然不会具有焦点/Tabindex行为。出于可访问性的原因，我想要它，以便当此弹出我们显示模式中的元素时具有焦点/选项卡索引优先级，而不是其背后的主要内容。

在下面的简单演示中 - 单击“单击我”按钮后，当您使用“选项卡键”时，浏览器仍在覆盖层后面的输入元素中标签。

在显示出显示时如何给出覆盖行为的任何建议将不胜感激。

在模态上创建focus事件似乎不起作用？

codepen： https：//codepen.io/anna_papaul/pen/anna_paul/pen/pen/pen/pen/yyywzbzbzbzbz

/strong>

我几乎可以得到乔治·查普曼（George Chapman）的编码词答案，但是当您按住Enter键时，它会在覆盖层出现而不出现之间来回闪烁，并且似乎在Safari中不起作用吗？

let clickMe = document.querySelector('#click-me'),
modal = document.querySelector('.modal'),
closeButton = document.querySelector('.close')

clickMe.addEventListener('click', () => {
  modal.style.display = 'flex';
  // modal.focus();
})

closeButton.addEventListener('click', () => {
  modal.style.display = 'none';
})

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input, button {
  margin: 1rem;
  padding: .5rem;
}
.click-me {
  display: block;
}

.modal {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;   
  justify-content: center;
  align-items: center;
  background: grey;
  position: absolute;
}

form {
  display: flex;
}

<button id="click-me">Click Me</button>
<form action="">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
</form>

<div class="modal">
  <button class="close">Close x</button>
  <button>More Buttons</button>
  <button>More Buttons</button>
</div>

Answer 1

在使模态对话框中访问时，有几件事要考虑，这些内容不仅仅是将焦点放在模态或模态内提取选项卡顺序。您还必须考虑屏幕读取器，如果使用aria-hidded =“ true”，那么您仍然需要感知基础页面元素，然后您也需要取消隐藏将模态关闭并恢复基础页面时的那些元素。

因此，总而言之，您需要做的是：

1. 将焦点设置为模态内部的第一个焦点元素。
2. 确保基础页面元素隐藏在屏幕读取器中。
3. 确保在模态内限制选项卡顺序。
4. 确保实施预期的键盘行为，例如，按下逃生将关闭或解散模态对话框。
5. 确保在模态关闭时恢复基础页面元素。
6. 确保在打开模态对话框之前先前具有焦点的元素已恢复重点。

您还需要确保模态对话框具有ARIA roun =“ Dialog”属性，以便屏幕读取器宣布焦点已移至对话框，理想情况下，您应该使用aria--标记为和/或aria-descred属性为您的模态提供可访问的名称和/或说明。

这是一个很大的列表，但这通常是针对可访问的模态对话框的建议。请参阅 wai-aria模式对话示例

我已经为您的模态写了一个解决方案，部分基于 hidde De Vries的原始代码用于在模态对话框中限制选项卡顺序。

trapfocusinmodal函数函数列出了所有聚焦元素的节点列表，并添加了 tab> tab 和 shift> shift ++ tab 确保焦点的密钥不会超越模式中的焦点元素。密钥侦听器还绑定到逃生键以关闭模态。

OpenModal函数显示模式对话框，隐藏了基本的页面元素，将类名称放在元素上，该元素在打开模式之前上次保持焦点，并将焦点设置为模式中的第一个焦点元素。

cockemotal函数关闭模式，未隐藏基础页面，并恢复在打开模式之前上次保持焦点的元素。

domisReady函数等待DOM准备就绪，然后绑定 Enter 键，然后鼠标单击事件到opentmodal和cockemodal < /代码>功能。

codepen： https://codepen.io/gnchapman/pen/pen/pen/pen/jjjmqyop

const KEYCODE_TAB = 9;
const KEYCODE_ESCAPE = 27;
const KEYCODE_ENTER = 13;

// Function to open modal if closed
openModal = function (el) {

    // Find the modal, check that it's currently hidden
    var modal = document.getElementById("modal");
    if (modal.style.display === "") {
        
        // Place class on element that triggered event
        // so we know where to restore focus when the modal is closed
        el.classList.add("last-focus");

        // Hide the background page with ARIA
        var all = document.querySelectorAll("button#click-me,input");
        for (var i = 0; i < all.length; i++) {
            all[i].setAttribute("aria-hidden", "true");
        }
        
        // Add the classes and attributes to make the modal visible
        modal.style.display = "flex";
        modal.setAttribute("aria-modal", "true");
        modal.querySelector("button").focus();
    }
};

// Function to close modal if open
closeModal = function () {

    // Find the modal, check that it's not hidden
    var modal = document.getElementById("modal");
    if (modal.style.display === "flex") {

        modal.style.display = "";
        modal.setAttribute("aria-modal", "false")

        // Restore the background page by removing ARIA
        var all = document.querySelectorAll("button#click-me,input");
        for (var i = 0; i < all.length; i++) {
            all[i].removeAttribute("aria-hidden");
        }
        
        // Restore focus to the last element that had it
        if (document.querySelector(".last-focus")) {
            var target = document.querySelector(".last-focus");
            target.classList.remove("last-focus");
            target.focus();
        }
    }
};

// Function to trap focus inside the modal dialog
// Credit to Hidde de Vries for providing the original code on his website:
// https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
trapFocusInModal = function (el) {

    // Gather all focusable elements in a list
    var query = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='email']:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]), [tabindex='0']"
    var focusableEls = el.querySelectorAll(query);
    var firstFocusableEl = focusableEls[0];
    var lastFocusableEl = focusableEls[focusableEls.length - 1];

    // Add the key listener to the modal container to listen for Tab, Enter and Escape
    el.addEventListener('keydown', function(e) {
        var isTabPressed = (e.key === "Tab" || e.keyCode === KEYCODE_TAB);
        var isEscPressed = (e.key === "Escape" || e.keyCode === KEYCODE_ESCAPE);
  
        // Define behaviour for Tab or Shift+Tab
        if (isTabPressed) {
            // Shift+Tab
            if (e.shiftKey) {
                if (document.activeElement === firstFocusableEl) {
                    lastFocusableEl.focus();
                    e.preventDefault();
                }
            }
            
            // Tab
            else {
                if (document.activeElement === lastFocusableEl) {
                    firstFocusableEl.focus();
                    e.preventDefault();
                }
            }
        }
        
        // Define behaviour for Escape
        if (isEscPressed) {
            el.querySelector("button.close").click();
        }
    });
};

// Cross-browser 'DOM is ready' function
// https://www.competa.com/blog/cross-browser-document-ready-with-vanilla-javascript/
var domIsReady = (function(domIsReady) {

    var isBrowserIeOrNot = function() {
        return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
    }

    domIsReady = function(callback) {
        if(callback && typeof callback === 'function'){
            if(isBrowserIeOrNot() !== 'ie') {
                document.addEventListener("DOMContentLoaded", function() {
                    return callback();
                });
            } else {
                document.attachEvent("onreadystatechange", function() {
                    if(document.readyState === "complete") {
                        return callback();
                    }
                });
            }
        } else {
            console.error('The callback is not a function!');
        }
    }

    return domIsReady;
})(domIsReady || {});


(function(document, window, domIsReady, undefined) {

    // Check if DOM is ready
    domIsReady(function() {

        // Write something to the console
        console.log("DOM ready...");
        
        // Attach event listener on button elements to open modal
        if (document.getElementById("click-me")) {
                
            // Add click listener
            document.getElementById("click-me").addEventListener("click", function(event) {
                // If the clicked element doesn't have the right selector, bail
                if (!event.target.matches('#click-me')) return;
                event.preventDefault();
                // Run the openModal() function
                openModal(event.target);
            }, false);

            // Add key listener
            document.getElementById("click-me").addEventListener('keydown', function(event) {
                if (event.code === "Enter" || event.keyCode === KEYCODE_ENTER) {
                    // If the clicked element doesn't have the right selector, bail
                    if (!event.target.matches('#click-me')) return;
                    event.preventDefault();
                    // Run the openModal() function
                    openModal(event.target);
                }
            });
        }

        // Attach event listener on button elements to close modal
        if (document.querySelector("button.close")) {
                
            // Add click listener
            document.querySelector("button.close").addEventListener("click", function(event) {
                // If the clicked element doesn't have the right selector, bail
                if (!event.target.matches('button.close')) return;
                event.preventDefault();
                // Run the closeModal() function
                closeModal(event.target);
            }, false);

            // Add key listener
            document.querySelector("button.close").addEventListener('keydown', function(event) {
                if (event.code === "Enter" || event.keyCode === KEYCODE_ENTER) {
                    // If the clicked element doesn't have the right selector, bail
                    if (!event.target.matches('button.close')) return;
                    event.preventDefault();
                    // Run the closeModal() function
                    closeModal(event.target);
                }
            });
        }

        // Trap tab order within modal
        if (document.getElementById("modal")) {
            var modal = document.getElementById("modal");
            trapFocusInModal(modal);
        }
        
   });
})(document, window, domIsReady);

<button id="click-me">Click Me</button>
<form action="">
    <input placeholder="An Input" type="text"> <input placeholder="An Input" type="text"> <input placeholder="An Input" type="text"> <input placeholder="An Input" type="text">
</form>
<div class="modal" id="modal" role="dialog">
    <button class="close">Close x</button> <button>More Buttons</button> <button>More Buttons</button>
</div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input, button {
  margin: 1rem;
  padding: .5rem;
}
.click-me {
  display: block;
}

.modal {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;   
  justify-content: center;
  align-items: center;
  background: grey;
  position: absolute;
}

form {
  display: flex;
}

Answer 2

出现之后，您必须立即将焦点添加到弹出窗口中时，当您与collectbutton.focus（）同时进行时，仅此操作，这就是为什么我使用settimeTimeout（ ）=＆gt;

（ 当按下箭头键时，它变得可见，因此我使其可见造型：

      .close:focus {
        border: 2px solid black;
        border-radius: 5px;
      }

整个代码：

      let clickMe = document.querySelector("#click-me"),
        modal = document.querySelector(".modal"),
        closeButton = document.querySelector(".close");

      clickMe.addEventListener("click", () => {
        setTimeout(() => closeButton.focus(), 1);
        modal.style.display = "flex";
      });

      closeButton.addEventListener("click", () => {
        modal.style.display = "none";
      });

      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      input,
      button {
        margin: 1rem;
        padding: 0.5rem;
      }
      .click-me {
        display: block;
      }

      .modal {
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background: gray;
        position: absolute;
      }

      form {
        display: flex;
      }
      .close:focus {
        border: 2px solid black;
        border-radius: 5px;
      }

    <button id="click-me">Click Me</button>
    <form action="">
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
    </form>

    <div class="modal">
      <button class="close">Close x</button>
      <button>More Buttons</button>
      <button>More Buttons</button>
    </div>

更新：焦点仅在模态内跳跃：

     let clickMe = document.querySelector("#click-me"),
        modal = document.querySelector(".modal"),
        closeButton = document.querySelector(".close");
      lastButton = document.querySelector(".lastButton");
      clickMe.addEventListener("click", () => {
        setTimeout(() => closeButton.focus(), 1);
        modal.style.display = "flex";
      });

      closeButton.addEventListener("click", () => {
        modal.style.display = "none";
      });

      modal.addEventListener("keydown", function (event) {
        var code = event.keyCode || event.which;
        if (code === 9) {
          if (lastButton == document.activeElement) {
            event.preventDefault();
            closeButton.focus();
          }
        }
      });

body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      input,
      button {
        margin: 1rem;
        padding: 0.5rem;
      }
      .click-me {
        display: block;
      }

      .modal {
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background: gray;
        position: absolute;
      }

      form {
        display: flex;
      }
      .close:focus {
        border: 2px solid black;
        border-radius: 5px;
      }

<button id="click-me">Click Me</button>
    <form action="">
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
      <input type="text" placeholder="An Input" />
    </form>

    <div class="modal">
      <button class="close">Close x</button>
      <button>More Buttons</button>
      <button class="lastButton">More Buttons</button>
    </div>

Answer 3

我尝试最简单的解决方案给您。

因此，我的解决方案是：

1 。查看模态中的所有焦点元素。

let modelElement = document.getElementById("modal");
let focusableElements = modelElement.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');

2 .listen更改对网页的关注。

3 。在“焦点侦听器方法”中，可以检查一下，如果模态是打开的，并且焦点元素不存在于焦点元素列表中，则必须焦点焦点元素列表的第一个元素是焦点。

document.addEventListener('focus', (event) => { 
    if(modal.style.display == 'flex' && !Array.from(focusableElements).includes(event.target))
        Array.from(focusableElements)[0].focus();
}, true);

最终代码：

let clickMe = document.querySelector('#click-me'),
modal = document.querySelector('.modal'),
closeButton = document.querySelector('.close')
console.log(clickMe)


clickMe.addEventListener('click', () =>{
  modal.style.display = 'flex';
  // modal.focus();
})

closeButton.addEventListener('click', () =>{
  modal.style.display = 'none';
})

let modelElement = document.getElementById("modal");
let focusableElements = modelElement.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');

document.addEventListener('focus', (event) => { 
  if(modal.style.display == 'flex' && !Array.from(focusableElements).includes(event.target))
  Array.from(focusableElements)[0].focus();
}, true);

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input, button {
  margin: 1rem;
  padding: .5rem;
}
.click-me {
  display: block;
}

.modal {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;   
  justify-content: center;
  align-items: center;
  background: grey;
  position: absolute;
}

form {
  display: flex;
}

<button id="click-me">Click Me</button>
<form action="">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
  <input type="text" placeholder="An Input">
</form>

<div id="modal" class="modal">
  <button class="close">Close x</button>
  <button>More Buttons</button>
  <button>More Buttons</button>
</div>

Answer 4

将注意力集中在模态中

以将重点放在模态上，您必须将重点放在模态内的聚焦元素上，这就是为什么执行modal.focus（）;并没有导致焦点进入就像您希望的那样，模态不是模态本身并不是一个焦点元素。取而代之的是，您需要做一些事情，例如$（modal）.find（“ button”）。fixp（）。focus（）;而不是。

User2495207向您展示了另一种方法，但是settimeout容易出现错误，并且不必要。理想情况下，我们也不想规定它应该集中在特定按钮上，只要在选项卡顺序中找到的第一个按钮。

但是，这仅解决将重点转移到模态的问题。它不会将焦点捕获到模式中，因此，当您将其选为“最后一个按钮”时，它将焦点转移到模态后面的元素上。

在模式中捕获焦点的

想法是您要检查下一个焦点元素是否在模态内，如果不是在模态之内在模态中。您还应该逆转此逻辑，如果关注第一个按钮并且有人按shift+tab将其包装到模态中的最后一个元素，但是我只是要演示第一个方案：

let clickMe = document.querySelector('#click-me'),
    modal = document.querySelector('.modal'),
    closeButton = document.querySelector('.close')

clickMe.addEventListener('click', () =>{
  modal.style.display = 'flex';
  $(modal).find("button").first().focus();

  trapFocus(modal);
});

function trapFocus(modal) {
  $(modal).find("button").last().on('blur', (e) => {
    // found something outside the modal
    if (!$(modal).find($(e.relatedTarget)).length > 0) {
      e.preventDefault();
      $(modal).find("button").first().focus();
    }
  });
}

closeButton.addEventListener('click', () =>{
  modal.style.display = 'none';
});

<代码>相关图是一个很好的工具，可让您拦截focus事件，以确定焦点的前进。因此，在上面的代码中，我们正在检查即将集中的元素（aka ressedtarget）是否在模态内，如果不是，那么我们将焦点强制焦点。

关于可访问性的最后一个说明

您还希望确保在easse> easse>的键盘上关闭模态。在此注释中，e.keycode被弃用，我们都应该使用e.key。

如果您需要支持IE，首先，我很抱歉。其次，它需要e.keycode才能正常运行，因此需要与您的e.key检查，例如e.key = ==“逃脱”＆amp;＆amp; e.KeyCode ===“ 27”。但是，我确实建议您可能只是制作一个将事件作为参数接受的函数，并将这些检查保留在该功能中，因此当IE最终支持e.key时，您可以全部清理代码在一个地方。