Ловушка фокуса внутри модального окна — специальные возможности
Я пытаюсь сделать, когда модальное окно открывается, фокус должен переместиться на первый фокусируемый элемент внутри модального окна (например, кнопку закрытия). Кроме того, пока модальное окно открыто, пользователи должны иметь возможность перемещаться между элементами внутри модального окна только с помощью клавиши 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>
@fdomn-m Когда модальное окно открыто, оно перемещается только так, как и во многих местах, которые я нашел так же
Это уже сделано getbootstrap.com/docs/4.0/comComponents/modal нажмите на любое открытое модальное окно и попробуйте вкладку, чтобы оно перемещалось только в открытом модальном окне.
@fdomn-m Пожалуйста, просмотрите мой ответ. Я использовал те же функции на своем веб-сайте при работе с программами чтения с экрана.
Не забывайте, что любой доступ к защищенному контенту должен быть запрещен для вспомогательных технологий. Это можно сделать с помощью атрибута inert или aria-hidden.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда содержимое по умолчанию скрыто, а затем отображается в виде всплывающего окна или диалогового окна в зависимости от поведения пользователя, существуют определенные методы, необходимые для обеспечения доступности интерфейса.
Это хороший пример, который я могу вам предоставить.
Здесь я создал события 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>Вы потрясающий человек. Спасибо, это работает как Bootstrap Modal.
Рад получить от вас ответ :). Можете ли вы принять ответ?
Вы можете использовать события
keydownи перемещать вкладки по мере необходимости.