Demos-old icon indicating copy to clipboard operation
Demos-old copied to clipboard

Puppy Cam: login text fields don't have labels

Open dstorey opened this issue 9 years ago • 2 comments

Both the username and password don't have a label. It looks like there is an aria-labelledby, but I can't find an element with that ID when searching the DOM, and F12 accessibility tree shows the accName as empty.

Even if there is an element that aria-labelledby is pointing to, it is probably better to use a real visible label element, as the visual placeholder disappears after some text has been entered (which in this demo there is already prefilled text). This causes usability issues for people with cognitive disabilities.

As an aside, the email/phone input uses input type="email" which isn't correct if it should also accept a phone number. Validation will stop you adding a phone number, and it will tell the screen reader it is only for email addresses.

TL;TR: remove aria-labelledby and add real visable label elementsand for attribute. Change username field to not use type="email"

@AngeloKai

dstorey avatar Dec 15 '16 00:12 dstorey

@dstorey @sarvaje This demo is external, namely, it's from https://testdrive-fido.azurewebsites.net/.

alrra avatar Dec 16 '16 15:12 alrra

The code lives in our repo although we have to manually deploy it. Do the changes and open an issue to push into production once merged please.

molant avatar Dec 16 '16 16:12 molant