i have a question regarding defining the accessibility for prices and the cart summary for an ecommerce shopping-cart.

As a visual impaired user i can navigate through the cart page with the TAB key and i am able to jump to elements like links, buttons and images. If the aria-labels are correctly by semantics defined, my screenreader will support me with information about each navigateable element.

But, what my screenreader does not detect is a crucial element - the price per product card and the cart summary. I checked now plenty of european ecommerce benchmarks and they all do not feature the price per product or the total sum in the cart summary as navigateable elements for a screenreader to verbalize. enter image description here enter image description here

It seems like it isn't common practice to support price and the summary for screenreaders, but when i think about visual impaired users, i think they have the right to be informed about the price in the cart summary and in the product cards per item. Imo this is bad UX. Since i haven't found a lot of information about this use case, maybe you stumbled upon this one?

I found this interesting article about the accessibility of prices, but it does not feature the cart summary as it focuses more of current and old price.

How do you deal with this issue to enable the screenreader to verbalize the prices and sums on an ecommerce cart? Do you have some more useful links?

As the aria-label is just allowed to be used on interactive elements how would you proceed here?

  • 1
    If I understood your question correctly then you're looking for an attribute called "tabindex", which can make any element reachable with button TAB. Currently your question is more technical than UI/UX related so please, if I haven't answered your question either change your question to be UI/UX related or try to ask this on stackoverflow :) (Tabindex - developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… )
    – fakermaker
    Nov 27, 2023 at 9:10
  • Hi, i would say that it is an UX issue. Since this stack is called "User Experience" :) Maybe other members have got an idea what to do. Imo tabindex does not solve the screen reader issue.
    – Helge
    Nov 28, 2023 at 15:08

1 Answer 1


Accessibility of websites is an ongoing issue because it is normally not built into the application and feature from the ground up. In this case, you have applied both a technical and user-centric process to audit the accessibility of the checkout cart to identify this issue.

However, the solution to these problems usually ends up being somewhere between balancing the technical constraints and the usability of the design changes. I would suggest that if you are able to, try and redesign the content on the page or the flow of the checkout process so that it is accessible using the simple solutions. If this is not possible, then you may look to a more sophisticated technical solution that will produce the result you are looking for with the screen reader.

My guess is that users of screen readers will also have different preferences when it comes to navigating content in a shopping cart and what the ideal purchase flow looks like. Once again this is where it makes more sense to design the solution from the ground-up to make it accessible so that the technical solution is as simple as possible. The alternative is always going to involve some design and implementation trade-offs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.