2
私の目的は、ユーザーに入力のエラーに関する情報を提供することです。私はこの例では角度をつけずにこれを行うことができます。私も「innerHTMLプロパティ」属性を使用して、次の例を再作成するために管理しますが、エラーがNVDAは、role = "alert"のangle * ngIfブロックを無視します
<!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>
をoccuresとき、それはまた、それだけで身体にノードを追加し、短い中で、NVDAでは動作しませんでした（無効な名前が入力されたアラート！）
が、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がそのコンテンツの変更を登録しないのか分かりません。
Angular2
私は、Windows 10は、Firefox 50.1.0とNVDA 2016.4を使用しています。