Thursday, April 4, 2013

Accessibility Compliance for input type password

Creating a placeholder text using label for a password input

Recently I have been working on some ADA compliance within my job and needed to find a solution that was simple and worked across IE7,8,9 Firefox, Chrome and Safari. So I did some research and came up with the following working solution.

Lets first create some html elements which we will use on the webpage.



Next lets add some css to position the label over the input.



Now we need to add some jquery to get the magic to happen.



Once you have all this in place fire up the site and enjoy an accessibility compliant placeholder for password input.

No comments:

Post a Comment