Bug: A11y - Empty or missing form label relying on placeholder

[colabottles]

Describe the bug

Accessibility Bug Found: A form control does not have a corresponding label but has a placeholder.

Why It Matters: If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls. Placeholders are read duplicately in screen reader technologies depending upon the screen reader program used.

How to Fix It: If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls. Do away with the placeholder and provide either a visible form label or an accessibly hidden form label.

<label for="email">Email</label>
<input id="email" type="text" autocomplete="email" class="pr-4 bg-[#211E1C] w-[180px] largeTablet:w-[290px]">

Success Criteria Affected:

• 1.1.1 Non-text Content (Level A)
• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level AA)
• 3.3.2 Labels or Instructions (Level A)

Screenshot(s):

PR Available: see: https://github.com/colabottles/landing-page/tree/main/components/sections/home-page

Steps to reproduce

1. Turn on screen reader (VoiceOver for MacOS, NVDA/JAWS for PC, Orca for Linux) and navigate to newsletter form.
2. Let the screen reader (or other assistive technology) announce the form elements.

Browsers

Chrome, Firefox, Safari, Edge, Opera

Additional context (Is this in dev or production?)

Production

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[nickytonline]

Thanks for opening this Todd!

I’m still fairly new to the app repository, but I’m in the process of going through the whole app.

There’s actually some other spots I noticed we’re missing labels as well, like adding a highlight. I think I might open an overarching issue for the places they’re missing.

[colabottles]

There are a lot of things I have noticed when I went through and did a quick audit of the landing page.

I'll get a hold of you in the morning about it. There are a few accessibility concerns I have.

Thanks, @nickytonline

[CBID2]

.take

[github-actions]

Thanks for taking this on! If you have not already, join the conversation in our Discord