NVDA 未看到 Aria 角色 =“警报”

Question

我有以下 div 标签：

<div id="ErrorMsg" 
      role="alert" 
      class="alert alert-error" 
      style="display:none;">
        Email or password incorrect
</div>

当我触发这个 jQuery 时，它会变得可见，但不会被宣布为警报。

$('#ErrorMsg').show();

这是在我像这样进行 isvalid 检查后添加到页面中的：

ScriptManager.RegisterClientScriptBlock(
        this, 
        GetType(), 
        "Error", 
        "$('#ErrorMsg').show();", 
        true);

我正在使用 NVDA 进行测试，该页面是一个带有更新面板的 aspx 页面。我尝试移除面板，但这似乎不是问题。一切正常，只是没有警报通知。正在检查的文本框设置了 describeby 标签并指向 div 标签 id。

Answer 1

我会说问题是两件事之一。

还有其他 DOM 事情正在发生并在读取警报之前中断警报。对此的一种解决方案是使用 aria-live="rude" 尽管这对 NDVA 没有帮助，因为这仍然是不间断的。

您可以使用 $('#ErrorMsg').focus() 将焦点放在元素上。您还需要在元素上放置一个 tabindex="0"。例如

<div id="ErrorMsg"
      role="alert"
      tabindex="0"      
      class="alert alert-error" 
      style="display:block;">
        Email or password incorrect
</div>

另一个问题可能是页面由 ScriptManager.RegisterClientScriptBlock 刷新（我不是 .NET 开发人员，所以我可能错了）。既然如此，上面的解决方案也应该可行。

但是，如果这种方法有效，那么屏幕阅读器用户可能会“迷失”他们在页面上的位置。因此，您可能需要将 ErrorMsg 元素更改为链接到电子邮件或密码输入框的链接。

希望这会有所帮助。