New Issue

Add separate labels above the input fields #102

Open

opened by Moiety · 0 comments

Moiety commented

Collaborator

Where: Login/Registration pages

What: The input field labels (“Handle”, “Password”) are set with the placeholder attribute; this means their visual label disappears as soon as you type. This can get confusing with longer forms; because users are no longer able to identify the fields.

Recommendations: Add separate labels above the input fields with <label> and set their for attribute to the id of the <input>.

Fig. 1: default state for the login screen shows the labels as placeholders

Fig. 2: filled in fields only show their value but no labels

Where: Login/Registration pages What: The input field labels (“Handle”, “Password”) are set with the `placeholder` attribute; this means their visual label disappears as soon as you type. This can get confusing with longer forms; because users are no longer able to identify the fields. Recommendations: Add separate labels above the input fields with `<label>` and set their `for` attribute to the `id` of the `<input>`. ![fipamo login screen](/attachments/45fbf586-2a78-4436-a602-650ce139ffcc) Fig. 1: default state for the login screen shows the labels as placeholders ![fipamo login screen but with filled fields](/attachments/035ec079-2e10-4a8e-b1ff-09d054e4ebf1) Fig. 2: filled in fields only show their value but no labels

image.png

48 KiB

image.png

55 KiB

Moiety added the

Accessibility

label