Dawn Theme Accessibility Fix: Solving the Elusive Quantity Input Label Issue

Hey store owners! As someone who spends a lot of time diving into the nitty-gritty of Shopify themes and listening to what's buzzing in the community, I wanted to share a really insightful discussion that popped up recently. It's about a seemingly small detail in the popular Dawn theme that can have a big impact on your store's accessibility and, let's be honest, your Lighthouse scores: the quantity input label.

You know that little box where customers enter '1', '2', '3' for how many items they want? Turns out, the way Dawn handles its label can cause some headaches for screen readers and accessibility audits. Let's break down what the community found and how we can tackle it.

The Root of the Problem: Conflicting Code in Dawn

The core issue, as pointed out by several sharp-eyed community members like @WetandDry and @ahsandoesntcare, boils down to two conflicting pieces of code in Dawn's main-product.liquid file (and elsewhere, as we'll see!).

First, the element for the quantity input had both a standard for attribute (which correctly links it to the input field) AND an additional, redundant aria-labelledby attribute. The kicker? This aria-labelledby was pointing to an element that rendered empty. When a browser computes an input's accessible name, aria-labelledby takes precedence over the for/id pairing. So, if it points to nothing, your input essentially has no accessible name.

Second, the visible label text (like 'Quantity') was wrapped in a tag with aria-hidden="true". This means even if the label association had worked, screen readers would still ignore the actual text! Together, these issues leave the quantity input without a proper accessible name, causing Lighthouse to flag "Form elements do not have associated labels." Not ideal for an otherwise fantastic theme!

Here's what the problematic code snippet looked like in main-product.liquid:

  {{ 'products.product.quantity.label' | t }}

The Quick Fix: Restoring Basic Accessibility

The initial and most straightforward fix, confirmed by several users, addresses both issues directly:

1. Remove aria-labelledby from the : This allows the standard for/id association to work as intended.
2. Remove aria-hidden="true" from the label text : This makes the visible label text readable by screen readers.

Applying this fix resolves the Lighthouse flag and ensures the quantity input has a correct accessible name. To confirm it's working, you can use your browser's DevTools: select the quantity input, go to the Accessibility pane, and check the 'Computed Name'. It should now show 'Quantity' (or whatever your theme's translation is).

Don't Forget Other Locations!

@jowel-66 made an excellent point: this isn't just a main-product.liquid problem! The same pattern repeats in sections/featured-product.liquid. So, if you're implementing this fix, make sure to apply it in both files. @ahsandoesntcare also suggested checking other areas like cart line item quantity and quick-add sections for similar patterns.

The Refined Solution: Preserving the "In Cart" Context

While the quick fix restores basic accessibility, @jowel-66 brought up a crucial detail: Dawn originally had a feature where screen readers would announce not just "Quantity" but also how many items were already in the cart (e.g., "Quantity (2 in cart)"). The initial fix, while solving the Lighthouse issue, inadvertently caused this helpful context to be lost.

For a more robust and user-friendly solution that retains this valuable information for screen reader users, @jowel-66 proposed a cleaner approach:

Step-by-Step Instructions for the Refined Fix:

1. Navigate to your theme code: From your Shopify admin, go to Online Store > Themes. Find your Dawn theme, click Actions > Edit code.
2. Open the relevant files: You'll likely need to edit sections/main-product.liquid and sections/featured-product.liquid.
3. Locate the problematic element. It will look similar to the code snippet above.
4. Remove aria-labelledby="quantity-label-{{ section.id }}" from the tag.
5. Remove aria-hidden="true" from the tag inside the .
6. Now, find the corresponding element for the quantity. It will typically have a class like quantity__input and an id matching the for attribute of the label (e.g., id="Quantity-{{ section.id }}").
7. Move the aria-labelledby="quantity-label-{{ section.id }}" attribute from where it *was* on the and add it to the tag instead.

After these changes, your code for the label and input might look something like this (simplified):

  {{ 'products.product.quantity.label' | t }}

By making this adjustment, the input field gets its accessible name from the dynamically generated `quantity-label-{{ section.id }}` (which includes the 'X in cart' context), while the visible label text is also correctly announced. It's a win-win for both Lighthouse and actual screen reader users!

A Few Important Notes for Store Owners

• Theme Updates: This is crucial! Any manual code edits you make directly in your theme files will be overwritten if you update your Dawn theme. Always keep a record of your changes and be prepared to reapply them after an update. Consider using a development theme or a version control system if you're making extensive modifications.
• Testing is Key: Always test your changes. Beyond checking Lighthouse, try using a screen reader (like NVDA on Windows, VoiceOver on macOS/iOS, or TalkBack on Android) to experience your site as an accessibility user would. Add a product to your cart, then reload the page and listen to what the quantity input announces.
• Shopify is Aware: It's good to know that this issue (specifically GitHub #3981) is already on the Dawn GitHub repository's issue tracker. This means the Shopify team is aware and hopefully working on a permanent fix that will be rolled out in a future theme update. Until then, these community-driven solutions are your best bet.

Accessibility isn't just about avoiding Lighthouse flags; it's about making your store usable and welcoming for everyone. Taking the time to address these details, especially for a core interaction like quantity selection, really shows you care about your customers. Hats off to the community members who dug into this and shared such valuable insights!