Jaws doesn't read error message

Question

I am using angularjs and trying to make the website accessible. When a user doesn't enter or forget to enter into required field, jaws doesn't read out the error message. I have tried adding role="alert" to the div but it doesn't seem to like it. Any suggestions

   <div aria-type-label="{{'some:error'}}">
   <span role="alert" class="error-message">Error</span>
   </div>

Answer 1

Jaws and the browser are looking for updated content to alert so I found that I had to add and remove the data completely in order to get the alerts to work consistently. For example, I had the text removed when the error would go away, and had the text placed back in once there was an error. This can be done in a couple ways. One, using an ng-if={{error}} then the HTML will get removed from the DOM if there is no error, and put back into the DOM once there is an error.

The other way is to set an errorMessage value to either an empty string when there is no error, or an error message when there is an error. That way the text in the DOM is actually changing, resulting in an alert.

Possible example using both methods mentioned:

<input name="theTextInput" type="text" ng-model="filled" placeholder="Add something"/>
<div role="alert" ng-if="filled" aria-type-label="">
   <span class="error-message">{{message}}</span>
</div>
<span class="sr-only" style="display: none;">{{message = "Has Error"}}</span>

Plunker

NOTE: This worked in Chrome in October 2016 and November 2016, but today it looks like it's not alerting at the moment. Still works in Firefox.

Answer 2

You have to use aria-described by and role alert together. Please have a look:

<input type="textbox" id="yourField" aria-describedby="yourFieldError">
<span role="alert" data-bind="visible:yourCondition" class="error-message" id="yourFieldError">Error</span>

Hope it will help.