19. Online Banking
with your eyes
Online Banking
with your ears
(install a screen reader and open the file
0-initial-form.html in a browser)
20. Step 1: use fieldsets
<fieldset>
<legend>Field Group Title</legend>
…
</fieldset>
See the file 1-fieldsets.html
21. Step 2: use labels
<label for="name">
Your name
</label>
<input id="name" type="text"/>
<input id="name" type="text"
aria-label="Your name"/>
See the file 2-labels.html
22. Step 3: add field hints
<input id="name" type="text"
aria-describedby="nameHint"/>
<span id="nameHint">
Please enter your first and last name.
</span>
See the file 3-hints.html
23. Step 4: add
required semantics
<input id="name" type="text"
required="true"
aria-required="true"/>
See the file 4-required-semantics.html
24. Step 5: add
field semantics
<input id="mail" type="email"/>
<input id="phone" type="text"
pattern="[0-9]+"/>
<input id="birthdate" type="date"/>
…
See the file 5-field-semantics.html