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).
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
).
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="" />
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With