The silent sales killer on your site
By Anne-Mieke Bovelett on June 17, 2025
Status: updated on June 28, 2025
The button looks perfect, until you realize it’s silently been blocking users from buying!
In short:
You notice a crazy high, unexplainable bounce and cart abandonment rate. Users are adding products to their carts, but dropping off before checkout. Everything looks fine on the surface.
But behind the scenes, an overzealous developer has overridden visible button text with “improved” aria-labels. For voice control users, that means the all-important “buy now” button is suddenly unusable, unless they happen to guess a long-winded label they can’t see or have to take extra steps to be able to click that button.
The same happens with icon-only buttons and inconsistent labels. It’s a silent sales killer. The solution? Stop guessing. Use clear, consistent labels and test with real assistive tech. Accessibility isn’t a nice-to-have, it’s your conversion rate talking.
Let’s say you run a webshop selling high-end technical gadgets
You’ve spent months and a lot of money fine-tuning your product pages, running ad campaigns, and tweaking your checkout process to perfection. But you just know something is off because your conversion rate simply isn’t where it should be.
Users are browsing, adding products to their carts, but many never complete their purchase. Frustrated, you run usability tests, hire a consultant, and dig into your analytics. And then, you discover a tiny, overlooked accessibility issue that’s been silently killing your sales.
Why aria-label mistakes cost you sales
Your web developer, with the best intentions, may have thought it’s a good idea to improve accessibility by adding aria-labels to buttons and links throughout the site. One of these buttons, the all-important ‘buy now’ button, looks fine to sighted users. It reads ‘buy now’, is prominently placed, and styled to stand out. But under the hood, the developer decided that ‘buy now’ wasn’t clear enough for screen reader users and added an aria-label: “proceed to secure checkout and confirm your order.” Sounds helpful, right? Wrong.
How it affects voice control users
For users navigating with voice control or screen readers, the visible text ‘buy now’ has instantly become irrelevant. The aria-label overrides it completely. So instead of saying “buy now,” a screen reader announces, “proceed to secure checkout and confirm your order.” A user browsing by voice, expecting to activate the button by saying ‘buy now,’ gets no response at all. They try again, frustrated. Nothing happens. They don’t know they have to say the long-winded aria-label phrase to make it work. And they won’t be able to because they can’t see the text of that aria-label that sits there in the code, under the hood. Annoyed and confused, they leave. Sale lost.
So, do users using voice control have no other ways?
Sure, they do. They can ask to divide the page in a grid with numbered sectors, and then call the number of that sector. But that is a lousy user experience. It’s like having to go in the stuffed storage room of a physical clothes store to fish out what you wanted, asking someone else to point where it’s at. If that happened to you, wouldn’t you walk out? I would, and most folks with me.
When an icon button causes accessibility issues
Another common mistake is when a button contains only an icon, like a shopping cart or a magnifying glass for search, without any visible text. A developer may assume that adding an aria-label like “search” or “add to cart” is not enough. But if the label is overly descriptive or inconsistent with what users expect, it can lead to the same issue. For example, a button with a cart icon labeled “proceed to checkout” might not work for voice users who expect to say “add to cart.” If they try saying “cart” and nothing happens, they might assume the site is broken and abandon their purchase.
Why consistency matters in accessibility
This is the reality of applying aria-labels the wrong way. When the aria-label text is significantly different from what’s visually displayed, it creates a disconnect for users who rely on assistive technology. They see one thing but hear another, leading to confusion, frustration, and, in many cases, abandonment.
A simple mistake, but one with real financial consequences. Because the number of users depending on assistive technology is much higher than most assume. No need to take my word for that, I’ve linked to a report that should give you pause, in this article: The e-commerce industry’s billion-pound mistake.
How to fix it
So how do you avoid this? First, think twice before using aria-label. It should clarify the visible text, not contradict it. If your button says ‘buy now,’ and you still feel the need to add an extra description, the aria-label should reinforce that, not replace it with something completely different. Ideally, a well-written visible button label makes aria-label unnecessary. You really don’t need to insult the user’s intelligence.
And if you must use it, test with real screen reader users. Run it through VoiceOver, NVDA, or JAWS and ensure the experience is intuitive.
Accessibility and conversions go hand in hand
Web accessibility isn’t just about compliance. If compliance is all you care for, you may end up being like a four-star restaurant with plastic forks and knifes.
It’s about user experience and, ultimately, conversions. An inaccessible site isn’t just frustrating; it’s costing you money. If your developer isn’t considering these nuances, you might be losing customers before they even get a chance to buy. Don’t let a simple aria-label mistake stand between your business and its success.