Now that we have labels for every form element and instructions wherever required, we need to relate them with the right form field. Great that some screen readers recognize the text that is in close proximity to the form and associate automatically. However it is not a good practice to leave them in proximity, the labels / instructions must be programmatically associated with their form elements to have the consistent experience across browsers, screen readers and operating systems.
Associating labels
Traditionally the labels are associated with the form elements using ‘for’ and ‘id’ relationship. The ‘for’ attribute placed in the label element should refer to the id value for the form element as shown in the example below.
<label for=‘cid’>Customer Id</label>
<input id=‘cid’ type=‘text’ max_length=â€12†/>
Note that the id value (cid) is same as what is provided as the value for ‘for’ attribute.
Associating Instructions
Traditionally the title attribute is used for additional instruction for the form elements but with the introduction of ARIA, the aria-describedby is doing the trick. Since both the label and the instruction need to be announced to the screen reader and has to clearly differentiate both of them. aria-describedby is the right property to use. The content marked with <label> is announced first by the screen reader, the instruction supplied through aria-describedby is read aloud after a short pause to let the screen reader user know that it is an additional information.
Place the additional instruction in a <span> or <div> element. From the <input element, refer the content using aria-describedby as shown in the example below.
<label for=”cvv”>CVV</label>
<span id=”cvvid”>CVV is a 3 digit number available at the back of your credit card</span>
<input type=”text” id=”cvv” aria-describedby=”cvvid” />