我试图在模态框打开时，焦点应该移动到模态框内的第一个可聚焦元素（比如关闭按钮）。此外，在模态框打开时，用户只能导航
我试图在模式打开时将焦点移动到模式内的第一个可聚焦元素（例如关闭按钮）。此外，当模式打开时，用户只能使用 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>
当内容默认隐藏，然后根据用户行为以弹出窗口或对话框的形式出现时，需要特定的技术来确保界面可访问。
这是我可以为您提供的一个很好的例子。
在这里我创建了 keydown 用于处理选项卡事件的事件，就像我在上面的评论中提到的那样。
$(document).on("click", ".openModal", function (e) {
$(".modal").fadeIn();
$(".modal .closeModal").focus();
});
$(document).on("click", ".closeModal", function (e) {
$(".modal").fadeOut();
});
$(".modal *:last")
.unbind()
.bind("keydown", function (e) {
var keyCode = e.keyCode || e.which;
if (event.shiftKey == false && keyCode == 9) {
setTimeout(() => {
$(".modal .closeModal").attr("tabindex", "0");
$(".modal .closeModal").focus();
}, 1);
}
});
$(".closeModal")
.unbind()
.bind("keydown", function (e) {
var keyCode = e.keyCode || e.which;
if (event.shiftKey == true && keyCode == 9) {
setTimeout(() => {
$(".modal a").attr("tabindex", "0");
$(".modal a").focus();
}, 1);
}
});.modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: auto;
z-index: 999;
background-color: aliceblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>