I have a div with an icon and a message which is hidden unless someone mouses over it, that does an action when clicked.
For sighted users, the icon switches to a check mark when clicked, and the message is changed when the icon is hovered over. For users that use the tab button however, the message isn't displayed.
The div with the message is an aria-live region, but since it is hidden, the screen reader will not announce the new message. Is there a way to announce the message despite the region being hidden?
The short answer is no. an aria-live region must be visible if you want its content changes to be announced.
You may read this question where I give a small trick: show the element a few seconds, long enough to let the screen reader read the message, and then hide again. However you must show the message at least for 3-5 seconds because some screen readers cut of before the end if you hide the element while it is still being spoken.
IF showing the message for that long is unacceptable, you can still put it off-screen, by using a little CSS like below. Note that many frameworks already have classes like .visually-hidden, .sr-only, etc. with a similar code. If you are using one of them, use what they define.
.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}
```