NVDA role=alert对话框未公布说明

NVDA role=alertdialog is not announcing the description

提问人:MT09 提问时间:11/8/2023 最后编辑:MT09 更新时间:11/8/2023 访问量:32

问:

当页面加载后自动出现警报对话框时,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=&quot;alertdialog&quot; can be used to notify someone they have entered invalid
        information.</p>
    <button id="trigger-alertdialog">Trigger Alertdialog</button>
</main>
</body>
</html>

谢谢!

NVDA计划应通过阅读文本“员工的出生日期晚于其雇用日期”来宣布警报文本。请核实出生日期和雇用日期“,也可以公布按钮。

HTML 可访问性 wai-aria NVDA

评论

0赞 QuentinC 11/8/2023
如果添加一个小延迟,而不是在页面加载时直接显示对话框,情况还是一样的吗?尝试不同的延迟,例如 100 毫秒、500 毫秒、1000 毫秒......
0赞 MT09 11/8/2023
@QuentinC,我试过了,但没有用。如果我在对话框显示之前输入/按任何键,它就可以工作。
0赞 MT09 11/12/2023
我仍然找不到解决方案,有人可以帮助我吗?
0赞 QuentinC 11/12/2023
如果您在其他时间这样做时效果很好,那么您的情况可能没有 100% 可靠的解决方案。但是,事实上,您真的需要在页面加载时直接弹出警报对话框吗?除非你有充分的理由,否则它不是很好的用户体验设计。这样的弹出窗口通常很烦人,对于屏幕阅读器用户来说更是如此。如果你只在有意义的用户交互后弹出它,它会更好、更可靠。
0赞 MT09 11/13/2023
我需要它向用户宣布一些事情。它应该在页面加载时直接提醒对话框。顺便说一句,感谢您的评论

答: 暂无答案