These are common accessibility issues I keep encountering across real digital products. Most aren’t dramatic. They’re the kind that slip through reviews and quietly degrade the experience.
Updated regularly as new patterns emerge.
Navigation & Focus Failures
While navigating with a keyboard, links inside a megamenu received focus even though the menu was still visually closed. Focus moved, but the interface did not respond.
From a screen reader perspective, the links existed. Visually, there was no indication where focus had moved. That disconnect creates disorientation and breaks spatial understanding of the page.
This usually happens when hover controls visibility but focus does not trigger the same state change.
Fix: Bind hover and focus to the same open-state logic. If focus enters the menu, the menu opens.
While testing a featured product slider with a keyboard and VoiceOver, I encountered multiple focusable links with no accessible name. Visually, each tile shows a category label like “Women’s Accessories & Socks,” but the actual <a> element is empty. The visible text sits outside the anchor.
<span>Women's New Arrivals</span>
<a class="_link..." href="/ca/en/c/women/new-arrivals/...">
</a>In the accessibility tree, the link appears as:
Accessible name: “”
Focusable: true
URL: /ca/en/c/women/accessories-socks/cat4840018
Because the link has no name, VoiceOver falls back to reading the URL. Instead of announcing the category, it reads part of the CMS slug, including strings like “cat4840018.”
This creates a confusing and noisy experience. A screen reader user hears a sequence of “Link… cat four eight four zero zero one eight…” instead of meaningful category names.
Why this happens
The component uses an empty anchor as a clickable overlay. The visible label is rendered in a separate <span> outside the link, so it does not provide the accessible name. Some slides inconsistently include text inside the anchor, which makes the failure even more unpredictable.
Correct structural fix
Wrap the media and visible label inside a single <a> element.
Do not use empty anchors as click layers.
Ensure each link has one clear accessible name derived from visible text.
<a href="...">
<img alt="" aria-hidden="true">
<span>Women's New Arrivals</span>
</a>This is not a styling issue. It is a structural template problem that affects every instance of the component.