Example file Using aria-labelledby

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 group level label is associated with the ‘aria-labelledby’ technique when you run the screen reader on this form across all the platforms.

Name of the Candidate
First Name

last Name

Age of the candidate
10203040
Please Select the Gender
Male
Female
Comments:
It allows 1000 Characters only

To get more features
I agree terms and conditions

Source Code

</p> <h1> Using Aria-Labelledby </h1> <p><span id="noc"> Name of the Candidate </span><br /> <span id="fn"> First Name </span><br /> <input type="text" aria-labelledby="noc fn"/><br /> <span id="ln"> last Name </span><br /> <input type="text" aria-labelledby="noc ln"/><br /> <span id="aaa"> Age of the candidate </span><br /> <select aria-labelledby="aaa"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select><br /> <span id="ss"> Please Select the Gender </span><br /> <input type="radio" name="sex" id="m" aria-labelledby="ss m" checked> <span id="m"> Male </span><br /> <input type="radio" name="sex" id="f" aria-labelledby="ss f"> <span id="f"> Female </span><br /> <span id="cc"> Comments: </span><br /> <span id="con"> It allows 1000 Characters only </span><br /> <textarea rows="5" cols="50" aria-labelledby="cc con"></textarea><br /> <span id="ttt"> To get more features </span><br /> <input type="checkbox" name="terms" aria-labelledby="ii ttt"> <span id="ii"> I agree terms and conditions </span><br /> <input type="submit"> <input type="button" value="reset"><br />