Angularjs NVDA使用role=“alert”忽略角度*ngIf块_Angularjs_Typescript_Wai Aria_Nvda

Angularjs NVDA使用role=“alert”忽略角度*ngIf块

angularjs typescript

Angularjs NVDA使用role=“alert”忽略角度*ngIf块,angularjs,typescript,wai-aria,nvda,Angularjs,Typescript,Wai Aria,Nvda,我的目标是向用户提供有关输入错误的信息。通过这个例子，我可以在没有角度限制的情况下做到这一点。我还使用innerHTML属性重新创建了下面的示例，但它也不适用于NVDA，简而言之，当发生错误时，它只是在正文中附加一个节点 <!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title&g

我的目标是向用户提供有关输入错误的信息。通过这个例子，我可以在没有角度限制的情况下做到这一点。我还使用innerHTML属性重新创建了下面的示例，但它也不适用于NVDA，简而言之，当发生错误时，它只是在正文中附加一个节点

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Contact form (WAI-ARIA)</title>
<script type="text/javascript">
  function removeOldAlert()
  {
    var oldAlert = document.getElementById("alert");
    if (oldAlert)
      document.getElementById("error").removeChild(oldAlert);
  }

  function addAlert(aMsg)
  {
    removeOldAlert();
    var newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    var msg = document.createTextNode(aMsg);
    newAlert.appendChild(msg);
    document.getElementById("error").appendChild(newAlert);
  }

  function checkEntryValidity(aID, aSearchTerm, aMsg)
  {
    var elem = document.getElementById(aID);
    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
    if (invalid) {
      elem.setAttribute("aria-invalid", "true");
      addAlert(aMsg);
    } else {
      elem.setAttribute("aria-invalid", "false");
      removeOldAlert();
    }
  }
</script>
</head>
<body>
<form method="post" action="post.php">
<fieldset><legend>Please enter your contact details</legend>
<label for="name">Your name (required):</label>
<input name="name" id="name" aria-required="true" onblur="checkEntryValidity('name', ' ', 'Invalid name entered!');" aria-invalid="true" value=""><br>
<label for="email">E-Mail address (required):</label>
<input name="email" id="email" aria-required="true" onblur="checkEntryValidity('email', '@', 'Invalid e-mail address');" aria-invalid="true" value=""><br>
<label for="website">Website (optional):</label>
<input name="website" id="website" value="">
</fieldset>
<label for="message">Please enter your message (required):</label><br>
<textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea><br>
<input name="submit" value="Send message" type="submit">
<input name="reset" value="Reset form" type="reset">
</form>
<div id="error"></div>

</body></html>

警告输入的名称无效

但NVDA会忽略此类警报消息

<!-- widget with model binding here -->    
<div role="alert" class="validation" *ngIf="model.hasErrors()">
        <div *ngFor="let message of model.errors">{{message}}</div>
    </div>

我不知道NVDA为什么不注册内容更改

角2

我使用的是Windows 10、Firefox 50.1.0和NVDA 2016.4。

添加aria live似乎是这样的

   <div aria-live="assertive">
    <div role="alert" class="validation" *ngIf="model.hasErrors()">
        <div *ngFor="let message of model.errors">{{message}}</div>
    </div>
   </div>

允许读卡器注册更改