ARIA label for multiple currencies

Hello. I have a button with an item title + price as the aria label ex: Blue shorts $39.99 read as (Blue shorts thirty nine dollars and ninety nine cents) And the item can be sold in canada where it would be Blue shorts CA $39.99 This would be read as (Blue shorts "See Ey" thirty-nine dollars and ninety-nine cents) should I leave it to be read by screen readers in that way? Or should be something like Blue shorts $39.99 Canadian/CA/???
4 Replies
dabrianator
dabrianator2y ago
I'd also need to consider how it would be read in French since a French Canadian version of the site is also available
13eck
13eck2y ago
This blog article has pretty good suggestion: Have a SR-only textual description of the price ("39 dollars 99 cents Canadian") with the number being aria-hidden="true" so that it's not read aloud by screen readers: https://medium.com/mercadolibre-tech/lessons-learned-when-developing-accessibility-in-prices-at-mercado-libre-59fd62fe85cb
Medium
Lessons learned when developing accessibility in prices at Mercado ...
Today, May 19, it is “Global Accessibility Awareness Day” (GAAD), so we think it is a good moment to share the lessons we have learned to…
13eck
13eck2y ago
And the SR-only CSS class:
.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1;
margin: 0 -1px -1px 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1;
}
.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1;
margin: 0 -1px -1px 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1;
}
13eck
13eck2y ago
Stack Overflow
Screen reader is not reading the price ("$47.49") properly
I am trying to make the screen reader (NVDA) to read my currency value (US dollar) $47.49 as "47 Dollars 49 Cents", but the screen reader is reading my currency value as "Dollar 4749". <div cla...
Want results from more Discord servers?
Add your server