contact form contains no labels for screen readers

[PercySingleton]

Name:

contact form contains no labels for screen readers

Description:

Though the form uses placeholder text to show the intent for each field, there is no way for screen readers to understand what box is for what information

Steps to Reproduce:

1. open https://wave.webaim.org/
2. input sites main address
3. scroll to footer

Expected Result:

Form should be parseable for screen readers

Actual Result:

the placeholder text is not readable for screen readers

Configuration:

The bug is present on the checked configurations

IOS

• [X] Chrome
• [x] Safari
• [x] Firefox
• [x] Edge
• [x] Opera

Windows

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Opera

Android

• [x] Chrome
• [x] Firefox
• [x] Edge

Iphone

• [x] Chrome
• [x] Safari
• [x] Firefox
• [x] Edge

Type:

Bug

Assignee: Airrick

[PercySingleton]

With some research i found a good link to orange.com and used their recommendations for hiding content on the screen that is only for screen readers.

I added their css class and inserted the labels over each of the input boxes with the following format: <label for='fname' class='visually-hidden'> First Name:</label>