Bring your karma
Join the waitlist today
HUMBLECAT.ORG

Blind and Visually Impaired Community

Full History - 2021 - 01 - 29 - ID#l80hxq
5
Screen reader best practices for quantity up and down component? (self.Blind)
submitted by VladStark
Hello everyone,

I am an application developer, my company is working to make our site ADA compliant, and to try to get things working well with the NVDA screen reader. We have one component that is a quantity input field for when someone is buying an item. That input field is fairly standard and not an issue. However, to the right and left of this component are buttons to increase or decrease the quantity on click. We are unsure of the best experience for these buttons with screen reader. If they only say "increase quantity" or "decrease quantity" then you can't tell what the quantity is while clicking them (or pressing enter on them when tab selected). But if we make the button say something like "increase quantity 15" then it might not be clear if that is the current quantity, or the quantity once you click it. Can anyone offer advice here? Or better yet, a website that does this in a way that works well with screen readers? Thanks.
CloudyBeep 3 points 2y ago
The buttons should read "increase quantity" and "decrease quantity", and an ARIA alert should announce the new quantity after a button has been clicked.
VladStark [OP] 2 points 2y ago
Okay I think I see what you all are talking about. The alert is actually different than the label but I should be able to use it on the quantity getting updated and I think that will make the screen reader announce it on change.

I found this information for technical reference
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role

Thank you!
bradley22 0 points 2y ago
This is the best advice :)
HealthyChoice1363 0 points 2y ago
The buttons should read "increase quantity" and "decrease quantity", and an ARIA alert should announce the new quantity after a button has been clicked.
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc   •   HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.