...
Non-Compliant Example:
...
Acceptance Criteria
Don’t place characters, such as dashes “-----” or parenthesis ”( )” in the placeholder.
Those characters will be announced by the screen reader as follows:
“dash, dash, dash, dash, dash” and “close parent, open parent”
Provide form instructions either above or below the form controlIt’s important to provide screen reader and keyboard only users with a mechanism to initiate a change in page behavior.
For example if typing information in a form field or selecting an item within a drop down menu will trigger a sudden and unexpected change to the page.
This can be confusing and disorienting to screen reader and keyboard only users.
As a screen reader and keyboard only user I should:
be provided with a form label
be able to use the TAB key on the keyboard to access the form control
be able to access important form instructionsprovided with a mechanism to initiate the change in page behavior, such as an “Update” , “Submit” or “Apply” button
As a screen reader user I should:
...
the screen reader should announce the form label the screen reader should announce
When the form
...
button has keyboard focus:
the screen reader should NOT announce dashes or any other charactersannounce the button label
...
Markup and Code
Code Block |
---|
<form><form role="search" method="post"> <div> <label for="phonefilter-numberinput">Phone Number<>Filter</label> <input id="phonefilter-numberinput" type="text" aria-describedbyplaceholder="phoneinstructionsFilter by department name"> <p id="phoneinstructions">Enter your 10 digit phone number including area code.</p><button>Update</button> </div> </form> |