Website accessibility review
Retail product page: screen reader navigation breaks right where it matters most.
On a public retail product page, VoiceOver navigation falls apart near the fulfillment and quantity controls, exactly the part of the page where a customer is trying to buy something. The screen reader jumps away from the purchase flow instead of moving through it in order, which turns a simple buying task into something much more draining than it should be.
What this case study shows
This sample is about diagnosing a purchase-flow problem without overclaiming the root cause.
The key judgment here is that the barrier is serious because it hits the conversion path, while the technical explanation stays appropriately framed as likely cause rather than false certainty. That is usually more useful than pretending a screen reader test alone proves the exact implementation bug.
What to notice
- User impact tied directly to checkout intent
- Observed behavior separated from likely implementation cause
- Safari and Chrome differences used as evidence, not decoration
- Fix direction focused on accessibility tree cleanup and control duplication
Finding
The purchase flow is unstable for screen reader users.
Navigation jumps away from purchase controls
Navigation barrier- Issue
- When navigating through the pickup options and quantity selector with VoiceOver, the focus jumps to a completely different part of the page instead of continuing through the purchase controls in order.
- Steps
- Navigate to the product page. Move through the fulfillment options (shipping, pickup). Continue toward the quantity selector and add-to-cart button using VoiceOver swipe navigation.
- Observed
- Instead of moving from pickup options to quantity to add-to-cart, VoiceOver jumps away from the purchase area entirely. The problem is worse in Safari than Chrome, which points to duplicated or hidden interactive controls confusing the accessibility tree.
- Impact
- A screen reader user trying to buy something loses their place right at the critical moment. They have to hunt for the add-to-cart button instead of just swiping to it.
- Suggested fix
- Check the fulfillment section and sticky add-to-cart bar for duplicate controls. If there are hidden versions of the same buttons for different viewport sizes, make sure only the active set is visible to assistive technology. The hidden copies are likely what is breaking the navigation order.
Why this matters
The page is failing at the part where the user is trying to complete the transaction.
Purchase confidence drops
If focus order breaks near quantity and add-to-cart, the user cannot trust where the next swipe will land.
The barrier is easy to underestimate
The controls may all exist visually, but unstable navigation in a buying flow can still be enough to stop a purchase entirely.
The likely cause is testable
Duplicate hidden controls and sticky purchase UI can be inspected directly in the accessibility tree and resolved without vague redesign work.
Verification criteria
What a fix needs to prove.
A screen reader user should be able to move from product details through fulfillment options to add-to-cart without getting thrown off the page.
Passing criteria
- Fulfillment, quantity, and add-to-cart controls follow a stable, logical order
- VoiceOver does not jump away from the purchase area during navigation
- Hidden duplicate controls do not appear in the accessibility tree
Need this kind of review?
I test websites, apps, and digital products with VoiceOver and keyboard navigation, then write findings your team can act on.