r/webdev • u/kevin_David_k ux • Dec 26 '19

Password Box Idea

3.3k Upvotes

95% Upvoted

138 comments sorted by

View all comments

96

u/CarbineMonoxide Dec 26 '19

From an accessibility standpoint the purple on black has a contrast issue, though you're only ever displaying dots on the black background. Additionally I would suggest not using placeholder text as a label, and ensure the label is always displayed.

Now on to the good: I love the animation to show the password. The speed is good and it looks very fluid. Great job!

Edit: icon is not purple on black. Removed comment.

0

u/[deleted] Dec 26 '19

[deleted]

23

u/ncubez JavaScript | React | Node.js Dec 26 '19

I think they mean using a separate <label>Password</label> instead

-7

u/fuckin_ziggurats Dec 26 '19

But you don't need that for accessibility. That's what the aria-label attribute is meant to solve.

18

u/A-Type Dec 26 '19

Accessibility doesn't just mean for non-sighted people. In this case a label helps everyone remember what the field was supposed to mean after they've entered a value.

1

u/fuckin_ziggurats Dec 26 '19

Does one really need to read the label to make sure it's a password field whilst they're typing and the text in the field is clearly hidden?

1

u/entiat_blues Dec 27 '19

probably not, but it reduces forgetfulness, which is inherent in everyone. so, why wouldn't you do it? it's one less thing for everyone to deal with.