Forum Stats

  • 3,837,252 Users
  • 2,262,243 Discussions
  • 7,900,238 Comments

Discussions

OJ Component Messages Issue with Screen Readers

DaveArch
DaveArch Member Posts: 125 Red Ribbon

JET Version: 10.x

Hi Community

We are finding that screen reader users are struggling with messages raised by the JET input components because the messages are not associated with the input fields against which they are raised. Whilst the error messages are read out, the messages do not state the field against which the error relates.

So for example, when entering an invalid date in a date picker and tabbing out to another field, a screen reader first reads out the label of the next field that is in focus and then reads out the error message from the prior field. If the error message contained the aria-describedby attribute, the field name in error would also be read out by the screen reader.

This is particularly an issue when our application calls showMessages() on each form component on a page when a user submits the data. In this case, all fields show their error messages at once (which could be many) but none of the messages contain the associated field name so a screen reader user has no idea what field is in error when the errors are read out. Instead a user must tab to each individual field to find out which one is in error.

Is there a way of affecting this so that the messages contain the required markup for the associated field label?

Message HTML:

Thanks

Answers

  • Hi Dave,

    Can you share how you are coding the form elements in the HTML please? You can send the .html file to me in email ( I believe you know my email already) or DM them to me in the community Slack channel would also work.

    I want to reproduce the issue as close as possible to what you have. I do understand the issue, just want to see if there is something different in how the Cookbook is showing it with the oj-form-layout usage or something like that.

    Thanks