Page Comparison

...

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:

...

Markup and Code

<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>

View markup on github