提问人:MT09 提问时间:11/8/2023 最后编辑:MT09 更新时间:11/8/2023 访问量:32
NVDA role=alert对话框未公布说明
NVDA role=alertdialog is not announcing the description
问:
当页面加载后自动出现警报对话框时,NVDA辅助功能程序不会读出(声音)对话框警报文本(描述)。
如果您通过单击按钮触发警报对话框,它就会起作用。
但是,语音查看器工具适用于两者。
这是我的代码
https://codepen.io/merttanriverdi/pen/YzBNmEp
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Using aria-alertdialog to Identify Errors</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
showDialog();
$('#trigger-alertdialog').click(function () {
showDialog();
});
});
function showDialog() {
$('main').attr('aria-hidden', 'true');
var lastFocus = document.activeElement;
var modalOverlay = $('<div>').attr({id: "modalOverlay", tabindex: "0"});
$(modalOverlay).appendTo('body');
var dialog = $('<div>').attr({
role: "alertdialog",
"aria-labelledby": "alertHeading",
"aria-describedby": "alertText",
tabindex: "0"
});
$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><div id="alertText">Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</div><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
$('#firstButton').focus();
$('#lastElement').focusin(function (e) {
$('#firstButton').focus();
});
$('#firstElement').focusin(function (e) {
$('#lastButton').focus();
});
$('[role=alertdialog] button').click(function (e) {
$('main').attr('aria-hidden', 'false');
$(modalOverlay).remove();
$(dialog).remove();
lastFocus.focus();
});
return false;
}
</script>
<style type="text/css">
#modalOverlay {
width: 100%;
height: 100%;
z-index: 2;
background-color: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
[role=alertdialog] {
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: thin #000 solid;
background-color: #fff;
z-index: 3;
position: fixed;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<main>
<h1>Using aria-alertdialog to Identify Errors</h1>
<p>This example shows how role="alertdialog" can be used to notify someone they have entered invalid
information.</p>
<button id="trigger-alertdialog">Trigger Alertdialog</button>
</main>
</body>
</html>
谢谢!
NVDA计划应通过阅读文本“员工的出生日期晚于其雇用日期”来宣布警报文本。请核实出生日期和雇用日期“,也可以公布按钮。
答: 暂无答案
评论