search

open-sauced / landing-page

This is the new landing page for open sauced
https://opensauced.pizza
30 stars 28 forks source link

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

Open colabottles opened 10 months ago

colabottles commented 10 months ago

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:

Screenshot(s): Screenshot of newsletter sign up form

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

Contributing Docs

nickytonline commented 10 months ago

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 commented 10 months ago

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 commented 7 months ago

.take

github-actions[bot] commented 7 months ago

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