So the time has come for your company or client to add a password strength indicator. How do you do this in a useful and accessible way? Here are some ideas to get you started.
1. Show a Progress Bar
Indicators that display a progress bar are visually helpful. Since requirements for what constitutes a solid password vary widely from site to site, it is helpful to have the progress bar reflect how well folks are doing. I feel like a password ninja when I hit the end of the bar.
2. Label All The Things
So having an indicator progress bar is awesome, but for folks who are using screen readers, they’re completely useless unless you label them. Also, color coding your indicator is fun, but if your site or product is used internationally, keep in mind that colors vary widely in meaning. Give your indicator some easily understood labels. We went with Very Weak, Weak, Fair, Strong, & Very Strong, and they seem to get the job done.
3. Use Your Words
You know what is terrible? Trying to register on a website and having it tell you your password isn’t strong enough, but having absolutely no idea at all what they are looking for. Give your users a hand, and give them some examples! We call this inline UA in our products, just a little line of text to give them a boost before they fill out the form field, rather than waiting for them to hit an error or alert and get frustrated.
4. Get Rid of Cryptic Errors and Alerts
“Your password isn’t strong enough” is NOT a helpful error message. Telling that them they can’t enter sequences, or repeating numbers, or they have to have a capital letter and special character IS helpful. Fill your alerts and errors with useful applicable information!
5. Let’s Get Started!
Here’s a snazzy jQuery password strength indicator that you can play with. Enjoy! http://matoilic.github.io/jquery.pwstrength/