Reading the hyphen-minus
Today’s screenreader PSA, discovered by a colleague, concerns prices.
Generally speaking, shop prices aren’t negative, but there are some places where that display is needed, for example a discount applied in the checkout. When testing our design system Price component with this new functionality he discovered an interesting behaviour in VoiceOver.
Typographically, the hyphen and the minus are different symbols, but in practice hyphens are used to denote negative numbers so much that the symbol in Unicode is called the hyphen-minus. In VoiceOver, a hyphen-minus directly before a number (-100) is read out exactly the same as a minus sign directly before a number (−100): ‘minus one hundred’. Adding a currency symbol into the string (-€100 / −€100) also leads to the same reading: ‘minus one hundred euros’.
But prices like that look a little crushed up; adding some space between the minus and the currency sign (- €100 / − €100) looks a bit nicer, and here’s where the problems start. The minus sign is still read out as ‘minus one hundred euros’, but the hyphen-minus is now unexpectedly ‘semicolon one hundred euros’.
Luckily there are easy fixes. Obviously, the best is to use the proper minus sign. But the problem can also be mitigated by using a thin space, which has the added benefit of a more appealing visual width anyway (− €100).
So the moral of the story: the combination of a hyphen-minus and a full-width space to denote negative prices has unexpected accessibility issues; use a proper minus sign and a thin space instead.