Add form labels to inputs for accessibility

[HaSistrunk]

Is your feature request related to a problem? Please describe.

Input fields should have a description that is explicitly associated with the field to make sure that users of assistive technologies will know what the field is for. Placeholder text (eg. "Search for service") is not a replacement for labels, since it disappears once the input is selected and has low color contrast (See this article on placeholders and accessibility).

I'm seeing this issue in:

• "Search for Service", "Search for Location", "Search for Organization" inputs
• the Suggest a Change form has labels, but they are not correctly linked to the input in the markup (use unique html "id" and "for" attributes to associate them)

Looks perfect on the /contacts and /facilities pages for search inputs!

Describe the solution you'd like

I'd suggest one of two solutions:

1. Replace placeholder text with visible <label> elements above the input
2. Add <label> elements that are hidden from sighted users, but will be read by assistive tech.

Also, link labels to their inputs in the markup. See markup examples for implementation on the A11y Style Guide.

For CSS to create a .visually-hidden class that is accessible to screen readers, see this article from The A11y Project on how to hide content.

Additional context

This accessibility guideline is specified in WCAG 2.x Level A (SC 3.3.2)