自定义 web 可访问性错误消息，当按下提交按钮上的键盘输入并且输入字段为空白时

Question

我是 WAI-ARIA 的新手。 我面临的问题是，如果聊天主题（文本区域）留空，它应该读取错误消息但 Jaws 不读取。 而且，当用户在同一主题为空白场景中使用键盘或鼠标点击输入时，它应该阅读另一条消息，说明需要主题才能发起聊天。

我试过下面的代码

function (e) {
      if ((e.keyCode==13 || e.key==13) && input[0].value =='') {


 var newAlert = document.querySelector("#MyerrorMSg");
        newAlert.setAttribute("role", "alert");
        newAlert.setAttribute("id", "alert");
    var msg="Please enter chat subject to start session";
        var content = document.createTextNode(msg);
        newAlert.appendChild(content);
        document.body.appendChild(newAlert);
}

Answer 1

你考虑过 aria-live 地区吗？

在你的 DOM 中有一个空的 aria-live 区域。 每次需要宣布某些内容时，使用 JS 更新它document.querySelector('#validation-errors').innerHTML(error)

<div role="region" id="validation-errors" aria-live="polite"></div>

资源： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions