Puppy Cam: login text fields don't have labels

[dstorey]

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

[alrra]

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

[molant]

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.