Fixing a cart drawer ARIA relationship and an empty mega-menu link at the source

What was happening

The homepage accessibility review initially identified a broken ARIA reference in the custom cart drawer and an empty link in the desktop mega menu. The cart dialog used aria-labelledby to reference a title ID that was missing from the visible 'Your Bag' heading. Separately, a metaobject-driven menu CTA could still render when its configured button title and URL were both empty.

Why the obvious solution was not enough

Both issues were generated by reusable theme components. Hiding them with CSS or adding one-off JavaScript would leave the underlying semantics wrong and could reappear on every page where the components were reused. The correction needed to happen in the Liquid/HTML output itself.

How the solution works

1. Inspect the rendered DOM from the WAVE error rather than guessing from the visual design. Trace the broken aria-labelledby value back to the cart-drawer Liquid template.
2. Give the visible cart heading the exact ID referenced by the dialog so the accessible name relationship resolves to real on-screen text.
3. Keep the drawer's close action as a semantic button with a meaningful accessible name instead of relying only on an icon.
4. Verify that focus moves into the cart when it opens, stays inside while the modal is active, and returns to the cart trigger after Escape or the close button.
5. Review the menu data conditions that generate the CTA. Render the link only when both meaningful label content and a usable destination exist.
6. Replace repeated ID-based styling on reusable menu items with a reusable class where the element can legitimately appear more than once.
7. Re-run WAVE after the theme fix, then perform keyboard checks because a resolved automated error does not prove focus management is correct.

<div
  class="cart-drawer"
  role="dialog"
  aria-modal="true"
  aria-labelledby="cart-drawer-title"
>
  <h2 id="cart-drawer-title">Your Bag</h2>
  <button type="button" aria-label="Close cart">...</button>
</div>

{% if button_title != blank and button_link != blank %}
  <a class="mega-menu__cta" href="{{ button_link }}">
    {{ button_title }}
  </a>
{% endif %}

What should be verified before shipping

• Verify aria-labelledby points to exactly one visible element in the rendered DOM.
• Open and close the cart with keyboard only and confirm focus trap and focus restoration behavior.
• Confirm closed drawers and menus do not leave hidden links in the tab order.
• Test Enter/Space activation and Escape behavior for menu and dialog controls.
• Render the mega menu with complete CTA data, missing title, missing URL, and both missing.
• Review the cart count and icon-only controls for meaningful accessible names and dynamic announcements.

What changed

After remediation, the homepage WAVE review recorded 0 errors, 0 contrast errors, 19 reviewed alerts, and an AIM score of 9.6/10. The remaining alerts were documented for human review instead of being treated as automatic failures.

Reusable lesson

Accessibility defects are often component-contract defects. Fix the semantic HTML and data condition in the reusable component, then verify the interactive behavior manually instead of covering the symptom with presentation code.