search

FreedomScientific / standards-support

Contains documentation for Vispero software support of Web standards
https://freedomscientific.github.io/standards-support/
GNU General Public License v3.0
110 stars 12 forks source link

JAWS 2019 Renders Invalid on Input Fields with Required Attributes in Chrome and FF #320

Closed jmpreston89 closed 5 years ago

jmpreston89 commented 5 years ago

When JAWS 2019 users navigate to a required input field, even if it is the first time, in Chrome and Firefox, JAWS renders "Field label Name Edit Required invalid entry". This is also an issue with JAWS 2018 and Firefox.

Example

Example with aria-invalid If aria-invalid="false" is added to the input field, JAWS 2019 will render the field correctly in Chrome, but not in Firefox:

There are several forms on our site that have been tested, including our main contact form, which is in Drupal: http://www.csulb.edu/contact

Added required to fields on W3C forms validation page and received the same results: https://www.w3.org/WAI/tutorials/forms/validation/

JAWS Versions

  1. JAWS 2019.1907.42 ILM
  2. JAWS 2018.1811.30 ILM only in FF Firefox

OS: Windows 10 Education Version: 1709 OS Build: 16299.1331

Browser and Version

  1. Chrome: 77.0.3865.90
  2. Firefox: 68.0.2
stevefaulkner commented 5 years ago

This is not a bug in JAWS or even considered a bug in browsers. The behaviour occurs because when an input is required in HTML its in a state of invalidity until the validation constraints are met (data is inputted), so when it is initially encountered it is invalid. This is exposed in the accessibility APIs by the invalid property. JAWS and other screen readers simply announce the states exposed.

On Tuesday, 24 September 2019, Joan Preston notifications@github.com wrote:

When JAWS 2019 users navigate to a required input field, even if it is the first time, in Chrome and Firefox, JAWS renders "Field label Name Edit Required invalid entry". This is also an issue with JAWS 2018 and Firefox.

Example

  • Email Input Field: input required="required" type="email" name="submitted[email_address]"
  • JAWS Output: E-mail Address Edit Required invalid entry

Example with aria-invalid If aria-invalid="false" is added to the input field, JAWS 2019 will render the field correctly in Chrome, but not in Firefox:

  • Email Input Field: input required="required" aria-invalid="false" type="email" name="submitted[email_address]"
  • JAWS Output: E-mail Address Edit Required

There are several forms on our site that have been tested, including our main contact form, which is in Drupal: http://www.csulb.edu/contact

Added required to fields on W3C forms validation page and received the same results: https://www.w3.org/WAI/tutorials/forms/validation/

JAWS Versions

  1. JAWS 2019.1907.42 ILM
  2. JAWS 2018.1811.30 ILM only in FF Firefox

OS: Windows 10 Education Version: 1709 OS Build: 16299.1331

Browser and Version

  1. Chrome: 77.0.3865.90
  2. Firefox: 68.0.2

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/FreedomScientific/VFO-standards-support/issues/320?email_source=notifications&email_token=AAGMCE2ZFGZL5UBP2CZHDKDQLJNX3A5CNFSM4I2DNXX2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HNMX6MQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGMCE54V4L7JT7TSXTB56LQLJNX3ANCNFSM4I2DNXXQ .

--

Regards

SteveF Accessibility is political[image: ✊] Working for the web https://twitter.com/stevefaulkner/status/940835584410574850, anywhere and everywhere [image: 🖖🏽]

jmpreston89 commented 5 years ago

I do see the invalid property in the accessibility tree and the logic of what you stated above. However, this was never an issue until JAWS 2019 or JAWS 2018 for Firefox and is still not an issue with IE11. Do you recommend not having a required attribute? Or have aria-invalid added to each required field? Hearing a field is invalided the first time the field is navigated to would be a distraction. It's like tabbing into a field and right away there is a red border and an error message. Yes, I understand the second option is done programmatically and should not be used.

StommePoes commented 5 years ago

I've heard it for years in several screen readers (also Orca/FF/Linux). It sucks, but since browsers do it with a popular attribute, it's a bit out of the author's hands. That said, I stick to aria-required over required just because amazingly browsers' error messages are not always the correct language, in-depth/specific enough about the problem, or even accessible in all instances. Since you've got to craft your own error message anyway, aria-required means you don't have to dick around with the novalidate stuff.

If you're using aria-invalid anyway though, it makes sense to get whatever benefit you can by having it set to false on page load, if that quiets FF. I may add it more often if it does that.

jmpreston89 commented 5 years ago

I have several versions of JAWS, back to 16, on my computer and I mainly tested in IE11, since it is the browser used in our accessible instructional materials lab. After talking with the VFO guy at CSUN this year, I started using Chrome with JAWS 2018. I still test with IE. I did a quick check back to JAWS16 in Chrome and FF and yes JAWS stated required invalid entry. Thank you StommePoes for your explanation. In the code I have control over, I will see where your suggestion can be used. Otherwise, aria-invalided will need to be added.

stevefaulkner commented 5 years ago

@jmpreston89 this bug presence of html5 required attribute = alert low and alert high states i filed on Firefox back in 2011 has details of this issie

jmpreston89 commented 5 years ago

@stevefaulkner I looked through the bug you submitted to Mozilla and see the Bug is still open. It seems Mozilla is a lot like Google, you report a bug and then you hear crickets.

Thank you for your help on this issue and I appreciate the explanation!