Part of the Accessibility Reading List

The password field is a lie.

Millions of people struggle with letters rendered into dots because they believe that it means “security”. The reality is that the password field is merely obfuscated plaintext. It does nothing to enhance security, except for the unlikely proposition of someone looking directly over your shoulder as you type. The password field has nothing to do with encryption, and using it is more likely to cause security and usability issues:

  • Users who struggle with entering letters as dots are more likely to choose simpler, easier to type passwords, making them easier to crack on the backend (which is a far more likely scenario than someone reading the password over their shoulder).
  • Obfuscated text conceals repeated typos, leading to user frustration and abandonment.
  • Obscured text is particularly hard to enter on mobile devices.

Despite all of this, users have been trained over two decades to associate “starred” text with “security”, and will likely feel uncomfortable when presented with a plaintext password, despite the fact that it is actually a more secure option in most situations. How do we habituate users away from this piece of security theatre?

In recent conference presentations and articles Jeremy Keith and Luke Wroblewski have been promoting alternative approaches: either do away with passwords altogether, or make the password field plaintext to start, and allow a “privacy” option for users who may feel insecure. The latter is very easy to accomplish with CSS and a little JavaScript.

Crafting The HTML

First: the password field starts off as a plain text input. (If you wanted to place users at ease even more, you could start with a password input, and create the rest of the UI in reverse). 

<label for=textpass>Password</label>
<input type="text" id="textpass" pattern="[a-zA-Z0-9]{3,12}">

In this case I’m using a very simple HTML5 regular expression pattern to guide the user in ensuring that the password is at least three alphanumeric characters, and no longer than 12.

Next, the slider, which will be a highly customized checkbox: 

<label class="switch">
	<input type="checkbox" onclick="switcher()">
	<span>Privacy
	<span>Off</span>
	<span>On</span>
	</span>
	<a></a>
</label>

Styling The Checkbox

The CSS to create the slider is derived from Ionuț Colceriu’s excellent toggle switch pattern: 

label {
	color: #fff;
	display: inline-block;
	width: 90px;
}
input#textpass { 
	font-size: 1rem;
	padding: .5rem;
	border: 0;
	border-radius: 3px;
	background: #ccc;
	color: #000;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3),
		0 1px 0px rgba(255, 255, 255, 0.2);
}
input#textpass:focus { 
	background: #eee; 
}
.switch span span {
	display: none;
}
.switch {
	display: block;
	height: 30px;
	padding: 0;
	position: relative;
	overflow: visible;
	margin-left: 100px;
	width: 100px;
	text-align: center;
	background-color: #2d3035;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #191b1e;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3),
		0 1px 0px rgba(255, 255, 255, 0.2);
}
.switch a { 
	display: block;
	transition: all 0.3s ease-out;
}
.switch label, .switch > span {
	line-height: 30px;
	vertical-align: middle; 
}
.switch > span:hover { 
	cursor: pointer;
}
.switch input:focus ~ a,
	.switch input:focus + label { 
		outline: 1px dotted #888;
}
.switch label {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
}
.switch input {
	position: absolute;
	opacity: 0;
	z-index: 5;
}
.switch input:checked ~ a { 
	right: 0%; 
}
.switch > span { 
	position: absolute;
	left: -100px; 
	width: 100%;
	margin: 0; 
	padding-right: 100px;
	text-align: left; 
	color: #333;
	text-shadow: none; 
}
.switch > span span { 
	position: absolute;
	top: 0; left: 0;
	z-index: 5;
	display: block;
	width: 50%;
	margin-left: 100px;
	text-align: center; 
}
.switch > span span:last-child {
	left: 50%;
}
.switch a { 
	position: absolute;
	right: 50%; 
	top: 0; z-index: 4;
	border-radius: 3px;
	display: block;
	width: 50%; height: 100%;
	padding: 0;
	border: 1px solid #333;
	background-color: #70c66b;
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
		rgba(0, 0, 0, 0)); 
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
			inset 0 1px 1px rgba(255, 255, 255, 0.45); 
}
.switch input:checked + label { 
	color: #333;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
}
.switch span {
	color: white;
}
.switch {
	margin-top: .5rem;
}

Adding The JavaScript

Finally, a simple function switches the input type: 

function switcher() {
	var textpass = document.getElementById("textpass");
	var type = textpass.type;
	if (type == "text") { 
		textpass.setAttribute("type", "password");
	} else { 
		textpass.setAttribute("type", "text");
	}
}

The result is the interface you see at the top of this article.

Taking Things Further

The ideal solution would be to remove passwords altogether, relying on some other form of unique identification. In the near future I could see using the HTML5 Camera API to detect the user’s face for biometric identification. Alternatively, we could quickly scan for multiple faces in visual range, defaulting back to an obscured password in public spaces.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/KhzpG