如何用JS实现屏幕阅读器快速hover元素时即时中断播报？

我们公司开发基于WebGL的学习内容，正在为程序添加更多无障碍功能，当前遇到屏幕阅读器在快速连续hover多个交互元素时播报滞后的问题。

当鼠标hover输出区域左侧的彩色方块时，带有aria-live="assertive"属性的div会更新为对应颜色名称，点击方块时也会输出内容。但快速滑动鼠标hover方块时，尽管div即时更新，测试用的NVDA屏幕阅读器却不会中断当前播报；点击方块时则会中断。

右侧是我想要复刻的行为：hover普通p标签元素时，屏幕阅读器会即时中断当前播报。

我已尝试的方法包括：

• 在带assertive属性的div下追加新div
• 清空父div后再追加新子div
• 使用5个独立的带aria-live="assertive"属性的div，轮流更新内容

请问能否用JS复刻右侧的行为？

内容的提问来源于stack exchange，提问作者stephen_mxr