Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Provide form instructions either above or below the form control.

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 instructions

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

  • the screen reader should announce the form instructions

  • the screen reader should not NOT announce dashes or any other characters .

...

Markup and Code

 

Code Block
<form id="sfgov-search-form" role="search" novalidate="novalidate" method="post"><form>
  <div>
	<label for="searchphone-inputnumber">Search<>Phone Number</label>
	<input id="serchphone-inputnumber" type="text" aria-describedby=" placeholderphoneinstructions">
	<p id="Searchphoneinstructions">Enter your 10 />digit phone number including area code.</p>
  </div>   
</form>

View markup on github