Month: September 2015

Example file using ARIA-Required

by

September 14, 2015

5:11 pm

Leave a comment on Example file using ARIA-Required

Uncategorized

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 required fields are exposed with the ‘aria-required’ technique when you run the screen reader on this form across all the platforms.




Source Code

</p> <h1> Example file for Aria-Required </h1> <p> <label for="first">First Name *</label><br /> <input type="text" id="first" aria-required="true"> </p> <p> <label for="last">Last Name *</label><br /> <input type="text" id="last" aria-required="true"> </p> <p> <label for="email">Email *</label><br /> <input type="text" id="email" aria-required="true"> </p> <p> <input type="submit"> <input type="button" value="reset"> </p> <p>

Example for readonly and disabled attributes

by

September 14, 2015

11:09 am

Leave a comment on Example for readonly and disabled attributes

Uncategorized

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 read only and disabled attributes are exposed when you run the screen reader on this form across all the platforms.






Select Gender





Source Code

<br /> <label for="fname"> First Name </label><br /> <input type="text" id="fname"/readonly><br /> <label for="lname"> last Name </label><br /> <input type="text" id="lname"/readonly><br /> <label for="age"> Age </label><br /> <select id="age" disabled><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select></p> <fieldset> <legend> Select Gender </legend> <p><input type="radio" name="sex" id="mm" checked> <label for="mm"> Male </label><br /> <input type="radio" name="sex" id="nn"> <label for="nn"> Female </label><br /> </fieldset> <p><input type="checkbox" name="vehicle1" id="pp"> <label for="pp"> I have a bike </label><br /> <input type="checkbox" name="vehicle2" id="pp1"> <label for="pp1"> I have a car </label><br /> <input type="submit"/> <input type="button" value="reset"><br />

Example file Using Title

by

September 13, 2015

8:32 am

Leave a comment on Example file Using Title

Uncategorized

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 labels are associated with the ‘title’ technique when you run the screen reader on this form across all the platforms.


First name:

Last name:

Age:

Select Gender

Male
Female

Comments:
I agree the terms and conditions

source code

<br /> <span> First name: </span><br /> <input type="text" title="first name"/><br /> <span> Last name: </span><br /> <input type="text" title="last name"/><br /> <span> Age: </span><br /> <select title="age"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select></p> <fieldset> <legend> Select Gender </legend> <p><input type="radio" name="sex" title="male" checked> <span> Male </span><br /> <input type="radio" name="sex" title="female"> <span> Female </span><br /> </fieldset> <p><span> Comments: </span> <textarea title="Comments" rows="5" cols="50"> </textarea><br /> <input type="checkbox" name="terms1" title="I agree the terms and conditions"> <span> I agree the terms and conditions </span><br /> <input type="submit"/> <input type="button" value="reset"><br />

Example file Using Implicit label

by

September 13, 2015

8:30 am

Leave a comment on Example file Using Implicit label

Uncategorized

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 labels are associated with the ‘implicit label’ technique when you run the screen reader on this form across all the platforms.




Select Gender





Source Code

</p> <h1> Using Implicit Label </h1> <p><label> First Name<br /> <input type="text"/> </label><br /> <label> last Name<br /> <input type="text"/> </label><br /> <label> Age<br /> <select><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select><br /> </label></p> <fieldset> <legend> Select Gender </legend> <p><label><br /> <input type="radio" name="sex" checked> Male<br /> </label><br /> <label><br /> <input type="radio" name="sex"> Female<br /> </label><br /> </fieldset> <p><label> Comments:<br /> <textarea rows="5" cols="50"> </textarea><br /> </label><br /> <label><br /> <input type="checkbox" name="terms"> I agree terms and conditions<br /> </label><br /> <input type="submit"/> <input type="button" value="reset"><br /> </form> <p>

Example file Using aria-label

by

September 13, 2015

8:20 am

Leave a comment on Example file Using aria-label

Uncategorized

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


First name:

Last name:

Age:

Select Gender

Male
Female

Comments:

I agree terms and conditions

Source Code

</p> <h1> Using Aria-Label </h1> <p><span> First name: </span><br /> <input type="text" aria-label="firstname"/><br /> <span> Last name: </span><br /> <input type="text" aria-label="lastname"/><br /> <span> Age: </span><br /> <select aria-label="age"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select></p> <fieldset> <legend> Select Gender </legend> <p><input type="radio" name="sex" aria-label="male" checked> <span> Male </span><br /> <input type="radio" name="sex" aria-label="female" > <span> Female </span><br /> </fieldset> <p><span> Comments: </span><br /> <textarea rows="5" cols="50" aria-label="comments"></textarea><br /> <input type="checkbox" name="terms"aria-label=" I agree terms and conditions "> <span> I agree terms and conditions </span><br /> <input type="submit"> <input type="button" aria-label="reset"><br />

Example file Using aria-labelledby

by

September 13, 2015

8:12 am

Leave a comment on Example file Using aria-labelledby

Uncategorized

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

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 />

Example file Using Aria-Describedby

by

September 13, 2015

8:06 am

Leave a comment on Example file Using Aria-Describedby

Uncategorized

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 />

Example file Using Explicit label

by

September 13, 2015

7:22 am

Leave a comment on Example file Using Explicit label

Uncategorized

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 labels are associated with the “for and ID” technique when you run the screen reader on this form across all the platforms.






Select Gender






Source Code

</p> <h1> Using Explicit Label </h1> <p><label for="fname"> First Name </label><br /> <input type="text" id="fname"/><br /> <label for="lname"> last Name </label><br /> <input type="text" id="lname"/><br /> <label for="age"> Age </label><br /> <select id="age"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select></p> <fieldset> <legend> Select Gender </legend> <p><input type="radio" name="sex" id="mm" checked> <label for="mm"> Male </label><br /> <input type="radio" name="sex" id="nn"> <label for="nn"> Female </label><br /> </fieldset> <p><label for="comn"> Comments: </label><br /> <textarea rows="5" cols="50" id="comn"></textarea><br /> <input type="checkbox" name="terms" id="pp"> <label for="pp"> I agree terms and conditions </label><br /> <input type="submit"/> <input type="button" value="reset"><br /> </form> <p>