NVDA自动加载的alertdialog未播报描述内容的技术求助

问题现象 #

页面加载完成后自动弹出带role=alertdialog的对话框时，NVDA无法语音播报对话框的提示文本（aria-describedby指向的内容）；但通过点击按钮触发该对话框时播报正常。Speech Viewer在两种场景下均能正常显示内容。

核心原因 #

页面初始化阶段（$(document).ready）直接调用弹窗逻辑时，NVDA可能尚未完成对页面无障碍环境的初始化，或者页面初始焦点状态不稳定，导致NVDA仅聚焦到按钮元素，未识别并播报alertdialog的完整语义信息（包括标题和描述文本）。而用户交互（点击按钮）触发弹窗时，NVDA处于活跃状态，能正确处理对话框的无障碍语义。

修复方案 #

方案1：延迟弹窗触发 #

给页面初始化时的弹窗逻辑增加短暂延迟，确保NVDA完成初始化后再弹窗：

$(document).ready(function (e) {
    // 延迟300ms触发弹窗，给NVDA足够的初始化时间
    setTimeout(showDialog, 300);

    $('#trigger-alertdialog').click(function () {
        showDialog();
    });
});

方案2：手动触发无障碍播报 #

在页面中添加隐藏的aria-live区域，主动通知NVDA播报描述文本：

1. 在<body>内添加live区域：

<body>
    <div id="live-region" aria-live="polite" style="position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;"></div>
    <!-- 原有main内容 -->
</body>

2. 修改showDialog函数，弹窗后更新live区域内容：

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');
    
    // 更新live区域触发播报
    $('#live-region').text($('#alertText').text());
    
    $('#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;
}

方案3：优化焦点与语义同步 #

先聚焦对话框本身，再切换到按钮，帮助NVDA识别完整语义：

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"
    });
    // 先插入DOM再设置内容
    $(dialog).appendTo('body').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>');
    
    // 先聚焦对话框，再延迟聚焦按钮
    dialog.focus();
    setTimeout(() => $('#firstButton').focus(), 100);

    // 原有焦点循环逻辑
    $('#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;
}

验证说明 #

以上方案均可实现页面加载自动弹窗时，NVDA同时播报提示文本和按钮信息，与点击按钮触发的效果一致。优先推荐方案1，实现简单且对原有代码侵入性最小。

内容的提问来源于stack exchange，提问作者MT09