When filling up a form on the web page, few fields are individual such as ‘Full Name’, ‘your email address’ etc. Few fields are required to be grouped to have a meaning out of it. Date of birth with three different fields for Day, month and year. Each of these fields require individual labels. However that does not completely serve it’s accessibility. It makes the form more difficult if two such dates are required to be filled in by the user i.e. one for date of birth and second for date of joining.
Date of Birth
Day – dropdown
Month – Dropdown
Year – text box
Date of joining
Day – dropdown
Month – Dropdown
Year – text box
In the above two places, say if the ‘Date of birth’ and ‘Date of joining’ are not mentioned how do you differentiate the other 3 fields from each other? These are technically called as group labels. These group labels also need to be associated with the group to have an accessible experience.
HTML method – Using <fieldset> and <legend>
<fieldset>
<legend>Date Of Birth</legend>
<label for=‘dobd’>Day</label>
<input type=‘combo’ id=‘dobd’ />
<label for=‘dobm’>Month</label>
<input type=‘combo’ id=‘dobm’ />
<label for=‘doby’>Year</label>
<input type=‘text’ id=‘doby’ />
</fieldset>
ARIA Method – Role group and aria-describedby
<div id=’legend’>Date Of Birth</div>
<div role=’group’ aria-describedby=’legend’>
<label for=’dobd’>Day</label>
<input type=‘text’ id=’dobd’ />
<label for=‘dobm’>Month</label>
<input type=‘combo’ id=‘dobm’ />
<label for=‘doby’>Year</label>
<input type=‘text’ id=‘doby’ />
</div>