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