Replace sentence "-" to read "dash" with screen reader for accessibility

Question

I'm working on making a screen reader read a "-" as the word "dash" in a sentence since it skips over it. I've been looking up ways to do this without actually changing the sentence itself. I'd love some advice since I'm new to accessibility.

This is the jsx I need to change

return <span dangerouslySetInnerHTML={{ __html: textChunk }} />;

I was thinking of aria-labelledby, but i'm not sure how to add it here

Answer 1

The true answer is, don't do it.

Saying nothing when a dash is encountered alone isn't universal at all. It depends on the screen reader, the voice used, the context, and user settings. It may be the case, for example, that a speech engine decide to say "dash" when it's alone on a line, but ignore it or make a small pause when not alone. Some screen readers also allow to change the name of punctuation characters like dash. It can be common in some languages where these characters can have several names. For example, you can call the character \ either "backslash" or "antislash", & can be "commercial and", simply "and" or "ampersand", etc.

Forcing some label like "dash" just to avoid a potentially unpronounced "-" is bad because it goes against user settings. It's also bad for braille users, who might not well understand what do you mean by writing "dash" literally rather than just "-".

If by "-" you mean nothing, empty, the absence of any other value, you'd better keep a natural "-". You can reasonably expect a natural "-" to be understood as such by most people, including screen reader users.

If the dash is used as a separation character, some people prefer having it pronounced in all cases while some other don't want it ever, combined or not with a more or less short or long pause.

So to wrap up, the best thing to do is actually to leave it as it is. While you may improve accessibility for some users, you may also degrade it potentially for more users than you are going to help.