14

When using HTML5 attributes to mark up a form with required fields, JAWS 14 in Firefox (and possible others) announces empty fields as "invalid entry" the first time the user focuses on them (i.e. the first time the user encounters the field).

<input type="text" required value="">

Using aria-required="true" avoids the nasty message (and JAWS still informs the user that the field is required), however you lose the HTML5 form validation features (preventing form submission, browser-generated tooltips to guide the user, etc).

  1. How can you get around the "invalid entry" announcement?
  2. Why does JAWS do this?
    I would understand describing a field as "invalid" if the user skips over it (leaving it blank, and therefore invalid) and then focuses on it again. The current implementation is confusing as the user is being told they've entered something wrong into a field they didn't even know existed.

I've read about hacks that set aria-invalid with JavaScript to fool JAWS, but I would really like to avoid watching for user interaction (focus event, etc) on every single field on a page with many inputs. Currently I use <label>Label text <span style="display:none;">required field</span></label> but that is a very hacky, non-semantic solution (not to mention I lose the benefits of HTML5 required).

muglio
  • 2,048
  • 17
  • 18
craigpatik
  • 941
  • 13
  • 25
  • 3
    Have you tried using both required and aria-required? – AlastairC Dec 05 '13 at 14:42
  • 3
    Yes, and it still says "invalid entry". – craigpatik Dec 05 '13 at 16:29
  • 7
    I've been a jaws user for about 15 years. While I don't have an answer to your question I'm so used to fields being announced as invalid before I enter any data that it is no longer confusing. I assume most Jaws users have reached this point so if your application is not primarily designed for visually impairred users fixing this may not be worth your time. – Jared Dec 05 '13 at 16:56
  • As per Jared's comment, it is becoming convention anyway so don't worry. However, display: none will hide the "required field" from screen readers as well, is that what you intended? – AlastairC Dec 06 '13 at 09:11
  • @AlastairC yes, I meant to hide that text, and in fact JAWS does read it as long as it's inside the ` – craigpatik Dec 06 '13 at 13:19
  • possible duplicate of [Strange behaviour of Firefox 4.01 with x/html and javascript](http://stackoverflow.com/questions/6370773/strange-behaviour-of-firefox-4-01-with-x-html-and-javascript) – Paul Sweatte Jun 21 '14 at 01:20

3 Answers3

2

FYI...this was a known issue in JAWS 13/14, and other screen readers, as mentioned on this article: Accessible Forms 2: Required Fields and Extra Information.

When using JAWS 13/14, NVDA 2012.3 and WindowsEyes 8.1 with Firefox 20 (and maybe some other browsers) the HTML5 ‘invalid entry’ message is presented for each required form field when arrowing through the form in browse mode or tabbing from input to input in forms mode. Since this warning appears before an entry has been made it could be potentially confusing for some users.

Now, you can use both required and aria-required together, along with a placeholder.

<label for="theInput">Label Text (required):</label>
<input type="text" name="theInput" id="theInput" required="required" aria-required="true" placeholder="the Input" value="" />
cfnerd
  • 3,658
  • 12
  • 32
  • 44
  • 1
    Did this solution get rid of JAWS reading "Invalid Entry" when focusing on a required input with the "required" and "aria-required" attributes? JAWS (v16) still reads "Invalid Entry" despite using both these attributes for me. Any ideas? – ephilip Sep 01 '15 at 18:10
  • 1
    This does not work even when you add the aria-required and the placeholder attr. Screen readers still announce invalid entry. – Manish Pradhan Nov 07 '16 at 16:39
2

The "invalid-entry" is caused by the required attribute. Instead, you can use the aria-required=true. With this solution, you get rid of the "invalid-entry" with JAWS and NVDA.

To get the complete list of known issues, check this link to a blog post by the Paciello Group

Patrick Demers
  • 79
  • 3
1

I found the way to resolve this was to set aria-invalid="false" on the input field if it has not yet been submitted.

If the form is submitted then the aria-invalid should be set accordingly.

Snapey
  • 3,604
  • 1
  • 21
  • 19