NVDA игнорирует угловые блоки * ngIf с ролью = «предупреждение»

Моя цель - предоставить пользователю информацию об ошибках в входах. Я могу сделать это без углового с этим примером. Мне также удалось воссоздать следующий пример с использованием «innerHTML» атрибут, но он также не работал с NVDA, короче он просто добавляет узел к телу, когда встретилась ошибкаNVDA игнорирует угловые блоки * 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>

(уведомление о доступности Введено неверное имя !)

но 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.

источник

2017-01-11 martini449

кажется, что добавление ария-жить, как этот

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

позволяет читателю зарегистрировать изменения.

источник

2017-01-11 09:30:43 martini449

NVDA игнорирует угловые блоки * ngIf с ролью = «предупреждение»

ответ

Смежные вопросы