0

I'm trying to make a complex webapp accessible. The piece I'm working on right now involves getting form field with validation to play nicely with screen readers.

The overall structure is an input tag (#input-with-validation) with javascript that controls the validation. A separate div (#validation-error) is shown or hidden depending on the validation state of the input.

I have it working mostly consistently with JAWS in Chrome, Firefox, and IE on Windows using a combination of role="alert" and aria-live="assertive".

I'm looking for the right way to get this working with Voiceover on OS X (Chrome/Firefox/Safari, or any combination of those). The behavior should be that on each keypress when #input-with-validation has focus, if there is a validation error, it reads the full validation error message to the user from #validation-error.

It should not change focus from #input-with-validation. We can use any combination of wai-aria attributes or change the structure in any way we see fit.

Alternatively, is there a way I can make a javascript call that will tell Voiceover 'read this text now'? That would solve pretty much every issue.

We want to make the internet a more accessible place for everyone, but they certainly aren't making it easy. Thanks for your help!

Note: our page is a complex web application written mainly in React.

Brandon
  • 1,956
  • 18
  • 18
  • Instead of talking about the structure, why not post an example? Or a gist? That replicates the behavior. Not only will it make the question easier to answer, it will make any answers you get better. – MobA11y Feb 10 '16 at 14:30

1 Answers1

0

When working to make pages accessible to all user groups, one thing you have to keep in mind is that it is very early days for just about every control you might choose to use. This includes browsers, widget libraries, screen readers; really the whole toolset.

If you test and find that a given ARIA feature isn't working, you may have to give up on a certain browser/AT combo. Make sure to check if others are having similar issues as support for your claim to whomever you are writing code for.

I think you have the right solution here and I probably would have done the same - place the validation message in an assertive aria-live region and fired validation messages into those regions when something was off.

I found this bit of testing but I can't say that your specific case was documented. However, I say trust your testing. There's a lot of work to be done in this space.

Josh Robinson
  • 452
  • 6
  • 21