Page Comparison

...

Acceptance Criteria

As a screen reader and keyboard only user I should:

• be provided with a form label

• be able to explicitly associate the text label with use the TAB key on the keyboard to access the form control

• be provided with a mechanism to initiate that the change in page behavior, such as an “Update” or “Submit” button

As a screen reader user I should:

• be able to explicitly associate the text label with the form control

When the form field has keyboard focus: 

• the screen reader should announce the form label and then the text in the placeholderif the

• text don’t place critical form instructions in the placeholder is the same as the form label the placeholder will not be announced by the screen reader(in the above example the placeholder does not include critical instructions)

...

Markup and Code

<form id="sfgov-search-form" role="search" novalidate="novalidate" method="post">
  <div>
	<label for="searchfilter-input">Search<>Filter</label>
	<input id="serchfilter-input" type="text" placeholder="Search" />Filter by department name">
	<button>Update</button>
  </div>   
</form>

View markup on github