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="" />