Html 由屏幕阅读器读取javascript创建的对话框中的内容

我正在使用javascript库vex输出这样的对话框

当我在屏幕阅读器（叙述者）中使用它时，该文本不会被读取，因此我尝试更改vex中操纵DOM的javascript

由此产生的DOM如下所示

登录失败！
好啊

但即使使用此标记，也不会读取消息“登录失败”

为什么不呢

（我还调用了div上的

.focus（）

，并显示了类

vex对话框消息

）

屏幕阅读器将在尝试登录时按下的按钮后继续读取文本（即运行一个ajax请求，尝试登录，以便永远不会重新加载文档）。

这就是它的用途

它将用任何立即重要的信息中断屏幕阅读器（相当于

aria live=“assertive”

）

由于这是一个对话框，您可能需要查看它来替换您的

role=“dialog”

此外，当您关注警报时，不要将“登录失败！”文本设置为

tabindex=“0”

改为使用

tabindex=“-1”

，这样您仍然可以通过编程对其进行对焦，但不会以页面的对焦顺序结束

由于“确定”（提交）按钮位于表单中，您当前使用的模式将很难（并非不可能）正确，因此这将使屏幕阅读器进入“表单模式”，其行为与正常阅读模式不同

因此，如果您能够创建自定义组件，则

此处使用的标记示例如下，请注意使用

aria descripbed by

和

aria labelledby

以最大限度地提高警报被正确读取的机会：

警告街道地址不匹配！
您输入的街道地址与邮政编码数据不匹配

这是正确的格式吗：12345大街大街

是的，格式正确
不，编辑街道地址

不要发布代码、数据、错误消息等的图像-复制或在问题中键入文本。我修改了生成的DOM部分，使其不再是图像。有点可笑的是，我没有让问题本身变得可访问。。。要指出的是一件好事。你是如何得到语法突出显示的？它看起来和我的不一样。它是自动的，但你可以强制。是的，那好多了！