Advanced Stuff...

1. Error handling and error messages

2. Form Instructions and Intervening Text

Users tend to enter forms mode then use tab navigation to move through the form. Initial and intervening instructions or questions that apply to multiple inputs are frequently missed causing the forms to be submitted with errors.

Instructions Example Form

Intervening text - instructions, help, notes, etc. for next group of controls. Aria-describedby example


must be mm/dd/yyyy

or

Intervening text - instructions, help, notes, etc. for next group of controls. Aria-labelldby example

The HTML

<h2 id="formName">Instructions Example Form </h2>
<form aria-labelledby="formName" action= "mailto:jimallan@tsbvi.edu" method="get">
<p>
<label for="name">Name </label>
<input name="Name" id="name" type="text" />
</p>
<p id="instructions">Intervening text - instructions, help, notes, etc. for next group of controls</p>
<p>
<label for="date" id="date">Date:</label>
<input name="date" id="date" type="text"
aria-labelledby="date dateHint"

aria-describedby="instructions"
/>
<span id="dateHint">must be mm/dd/yyyy</span></p>

or

<p id="instructions1">Intervening text - instructions, help, notes, etc. for next group of controls. Aria-labelldby example</p>
<p>
<label for="date" id="date1">Date:
<input name="date" type="text"
aria-labelledby="instructions1 date1"
/>
<br>
must be mm/dd/yyyy</label></p>
^^^used HYBRID form labeling

 

Resources