JavaScript text to speech for different elements

Chrome disables SpeechSynthesis without user activation. This answer by @Kaiido himself might be useful. Also refer to this discussion on the Google groups about the deprecation.

Briefly, we will only allow speak() to succeed if the current frame, or any of its ancestors, has ever had user activation.

Activation inputs are the following:

An activation triggering input event is any event whose isTrusted attribute is true and whose type is one of:

• change
• click
• contextmenu
• dblclick
• mouseup
• pointerup
• reset
• submit
• touchend

So, I don't think mouseover event will count as a valid trigger.

If your purpose is to make the website more accessible, I'd recommend what @Kaiido mentioned above - to follow the WAI recommendations.

If you want to use SpeechSynthesis, maybe you can have a small button beside the label that the user might tab to and activate, to hear it?

I was also able to get SpeechSynthesis to work in this project here by having an initial screen that required the user to click to start - and that activation propagated through and allowed SpeechSynthesis usage for the rest of the app.

Do note that Web Speech API is an experimental API - and might not be suitable for production. The SpeechSynthesis part of it is reasonably supported across browsers. However, in my experience of using this API, I've found that the behaviour differs across devices, probably because it sometimes piggy backs on the device's native OS capabilities.