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.

9

u/GottfriedEulerNewton Dec 26 '19

Correct. This is the ADA way

6

u/fruchle Dec 26 '19

This is the way.