The Search text fields needs its label to be outside the search text field

[ollie-iterators]

Screengrab/videos (insert file names here) 2020 11 09, Search text field needs labels outside of search text field.mp4 2020 11 09, Search text field needs labels outside of search text field.mp4.zip

Link https://d8-stg.boston.gov/calendar/mayor-main-trolley-tour-day-3

Node # (if known) 45361

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 10.15.7 > Chrome 68

Trusted Tester Test Forms

Brief Description The Search text fields needs its label to be outside the search text field

Steps to reproduce 1) 00:00, Load the URL 2) 00:04, Click on the Search button at the top of the page 3) 00:07, enter in some text into the field a) Note: The label for the field goes away. This is a bug

Desired Result • Labels for text fields are outside the text field

Actual Result • The label for the search text field is inside the text field, which goes away once someone starts typing in the field.

[david-iterators]

Hi @subaha-cob and @mmcgowanBOS This is also a subtle issue and is open to some interpretation based on a review of other people's comments on the internet. Please see the attached information and let us know if you have feedback or suggestions, or if you would like to discuss this further. Thanks Placeholders in Form Fields, 01, Are Harmful.pdf Placeholders in Form Fields, 02, Form Instructions • Forms • WAI Web Accessibility Tutorials.pdf Placeholders in Form Fields.pdf

[subaha-cob]

@sebastianebarb and @carolinestj In order to pass accessibility our input form needs to have a label in display. For example the search field does not have a visible label. Once a user clicks instead of the input field the placeholder text disappears. We are going to need a label next to the input field. Thanks.

Placeholders in Form Fields, 01, Are Harmful.pdf Placeholders in Form Fields, 02, Form Instructions • Forms • WAI Web Accessibility Tutorials.pdf Placeholders in Form Fields.pdf

[sebastianebarb]

@subaha-cob I am a huge fan of labels and text in from feilds. We pushed Ideo to add labels to all input fields but were unsuccessful. How would you like us to provide you details on UI?

[subaha-cob]

@sebastianebarb do we have a place we typically file/drop designs? If we do, drop the updated design there and update this ticket with the link to the folder plus an image of the UI design.

[subaha-cob]

@sebastianebarb What is the status of this?

[subaha-cob]

@david-iterators and @jill-iterators Will it be an issue still if we make screen readers see the labels, while hiding them for mouse users? Thanks!

[sebastianebarb]

[subaha-cob]

Hi @david-iterators , @jill-iterators , @ollie-iterators Please take a look at the two alternative design label above and let us know if either one of the solutions solves the issue. If it does, we will then implement the solution on boston.gov. Thank you!

[david-EMS]

Hi @subaha-cob Thanks for the questions.

• We suggest the 2nd design ("Search" listed with the Search text field) because this provides a visible label on the text field itself. Therefore, as users type in information, they will still see the instruction for the search.
• Note that this is not a screen reader issue, but a general text field issue. It is a more significant when there are multiple fields, such as "first name", "last name", etc so that users have a visual indication of what information is needed in the field.

Thanks

[subaha-cob]

@david-iterators this is now on UAT for testing.

[ollie-iterators]

Verified on UAT