Kevin Powell - Community•2y ago

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

dabrianatorOP•2y 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•2y 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•2y 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•2y ago

Which is also the suggested answer for this SO question: https://stackoverflow.com/questions/37812616/screen-reader-is-not-reading-the-price-47-49-properly

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...

Gaming

Programming

ARIA label for multiple currencies