元素聚焦导致role="alert"内容未被NVDA屏幕阅读器播报问题咨询

问题根因 #

NVDA屏幕阅读器的语音播报队列存在优先级规则，元素聚焦操作触发的播报优先级高于role="alert"动态内容的播报优先级。你当前代码先执行密码输入框的聚焦操作，触发输入框属性播报的过程中再插入alert内容，后者的播报请求会被正在进行的聚焦播报打断，最终导致alert内容不被播报。

可行修复方案 #

方案1：调整执行顺序+关联错误提示（最优，符合WCAG无障碍规范） #

该方案完全规避播报冲突，同时符合输入框错误提示的交互标准：

1. 先插入alert错误内容，等内容渲染完成后再执行元素聚焦
2. 给密码输入框新增aria-describedby属性关联错误提示容器，聚焦输入框时会自动附带播报错误内容，和alert的自动播报形成双重保障

修改后的代码如下：

JavaScript代码

$(document).ready(function() {
  $('#submitButton').click(function (){
    // 先加载错误提示
    loadSRValidationMessages('#alertContainer', '.adhocError');
    // 再执行聚焦
    $('#password').focus();
  });
});


function loadSRValidationMessages(n, t) {
    $(n).empty();
    var content = "";
    $(t).each(function() {
        var currText = $(this).text();
        if (currText.length > 0) {
          content += "<p>" + currText + "<\/p>";
        }
    })
    $(n).append('<div id="alerts" role="alert" aria-atomic="true">' + content + '</div>');
    // 关联错误提示和输入框
    if(content.trim() !== '') {
      $('#password').attr('aria-describedby', 'alerts');
    } else {
      $('#password').removeAttr('aria-describedby');
    }
}

HTML代码无需额外修改，原有结构可直接复用

方案2：增加延迟兼容特殊场景 #

如果因业务逻辑限制无法调整执行顺序，可以给聚焦操作增加100-200ms的短延迟，等alert播报完成后再执行聚焦：

$(document).ready(function() {
  $('#submitButton').click(function (){
    loadSRValidationMessages('#alertContainer', '.adhocError');
    // 加短延迟避免播报冲突
    setTimeout(() => {
      $('#password').focus();
    }, 150);
  });
});

验证注意点 #

• 你代码中已经加了aria-atomic="true"，该配置是正确的，可保证alert内容更新时会完整播报全部内容，不会只播报增量部分
• 测试时建议使用NVDA+Firefox/Chrome的组合，这是无障碍验证的标准环境

内容的提问来源于stack exchange，提问作者Anthony Brian Mallgren