The below is the static form with html code snippet that is used for this example. The reason for providing the code snippet is that one can access the source code easily even if it is viewed in the mobile platforms. In general, it might not be very easy to access the source code of the form when this is viewed in the mobile platforms. This example makes you understand how the instructions are associated with the ‘aria-describedby’ technique when you run the screen reader on this form across all the platforms.
Please enter capital letters only
Please enter smaller letters only
select appropriate age
Please Select the Gender
It allows 1000 Characters only
To get more features
Fill the required fields and click on submit
This clears all the entered data
Source Code
<br />
<label for ="fn">first name</label></p>
<div id="aaa"> Please enter capital letters only </div>
<p><input type="text" id="fn" aria-describedby="aaa"/><br />
<label for="ln">last name</label></p>
<div id="aaaa"> Please enter smaller letters only </div>
<p><input type="text" id="ln" aria-describedby="aaaa"/><br />
<label for="age">age</label></p>
<div id="bbb"> select appropriate age </div>
<p><select id="age" aria-describedby="bbb"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select></p>
<div id="ss"> Please Select the Gender </div>
<p><input type="radio" name="sex" id="m" aria-describedby="ss" checked> <label for="m"> Male </label><br />
<input type="radio" name="sex" id="f" aria-describedby="ss"> <label for="f"> Female </label><br />
<label for="cc"> Comments: </label></p>
<div id="con"> It allows 1000 Characters only </div>
<p><textarea rows="5" cols="50" id="cc" aria-describedby="con"></textarea></p>
<div id="ttt"> To get more features </div>
<p><input type="checkbox" name="terms" id="ii" aria-describedby="ttt"> <label for="ii"> I agree terms and conditions </label></p>
<div id="submission"> Fill the required fields and click on submit </div>
<div id="descriptionClose"> This clears all the entered data</div>
<p><input type="submit" aria-describedby="submission"> <input type="button" value="reset" aria-describedby="descriptionClose"><br />