Form Label Guardian

Alex created a user registration form with beautiful floating labels that appear inside the input fields. While it looks modern and clean, their accessibility consultant Kevin, who uses screen reader software, pointed out that his screen reader can't properly associate the labels with the input fields. When Kevin tries to fill out the form, he hears 'edit text' for each field but has no idea what information to enter. Help Alex properly connect the labels to inputs so screen reader users like Kevin understand what each field is asking for!

Associate labels with inputs

• 1.Use 'for' attribute on labels and matching 'id' on inputs
• 2.Each input should have a unique id
• 3.Labels should be descriptive and clear