To alert the screen reader users that there were errors in a form I use:
<div role="alert" class="formerrors" aria-labelledby="error-message" tabindex="-1">
<h2 id="error-message" class="errornote">
There were %form_errors^xpathe:count(//li)% errors in this form. Please correct the listed fields and submit again:
</h2>
Then there is a list of errors with a link to an appropriate field. It suits well both sighted and screen reader users.
%form_errors% doesn’t get populated with any data when the form is using Accessible Format.
As far as I can tell, the easiest way to replicate this behaviour would be to use SSJS. Unfortunately you’ll need to maintain a list of all the error keywords manually.
<script runat="server">
var errors = [
"%question_error_570_q1%",
"%question_error_570_q2%",
"%question_error_570_q3%",
"%question_error_570_q4%"
];
var actual = [];
errors.forEach(function(err,i) {
if (err.length > 0 && err[0] != '%') actual.push(err);
})
if(actual.length > 0) {
print('<div role="alert" class="formerrors" aria-labelledby="error-message" tabindex="-1"> <h2 id="error-message" class="errornote">There were ');
print(actual.length);
print('errors in this form. Please correct the listed fields and submit again: </h2><ul>');
actual.forEach(function(err) {
print('<li>',err,'</li>');
});
print('</ul></div>');
}
</script>
The test to see if an error is empty or not checks for % because it seems that at the time the SSJS runs, the empty errors still contain the keyword which later gets replaced with blank.
SSJS does need to be enabled, and it requires at least 5.4.
In this instance, I think SSJS is enabled but you’ve got some errors in that JS so it’s not working. Where you’ve added the extra error lines, you haven’t added a comma between them so the array is malformed.
Thank you John and Serge. All errors are mine.
The script is working great now both when the Accessible Format is turned on and off.
I made some changes to the script as I would like to display the links to the appropriate fields. I couldn’t work out how to replace the section_id and field_id in %question_id_<parent_id>_<question_id>% . %question_id_section_asset_assetid_question_asset_assetid% - didn’t work for me. I wanted to change this piece of the code:
Unfortunately, the result was e.g.:
So I decided to go with another solution and this work great both for the sighted users and the screen reader users.
