使用 aria-hidden 或 inert 使模态可访问

Question

预先感谢您的任何建议。对于 JS 和编码来说，总体来说是完全陌生的，所以请耐心等待。我对任何框架都不熟悉，所以这完全是普通的。

我有一个模式，它是用户看到的第一个东西。它包含一系列输入和一个用于提交该数据的按钮。单击按钮时，模式的不透明度会逐渐变为 0，并且停止接受指针事件，从而允许用户查看和使用其下方的内容。

目标：我不希望屏幕阅读器在后台宣布任何内容（我们称之为backgroundContainer），直到模式被关闭。

尝试过： 在 HTML 中设置 aria-hidden = "true"，然后在 JavaScript 中触发表单提交 backgroundContainer.setAttribute('aria-hidden', 'false'); 。当用户单击“提交”按钮时，尝试与事件侦听器相同的操作。

结果： HTML 按预期工作；加载页面时，背景容器将被忽略。但是，按下按钮后，NVDA（屏幕阅读器）不会读取backgroundContainer。

尝试过： 在上面添加 backgroundContainer.inert = false; 并将整个内容包装在一个函数中，该函数可以由表单提交调用，也可以响应连接到提交按钮的单独事件侦听器。例如：

function ariaReset() {
    let backgroundContainer = document.getElementById('background-container');
    backgroundContainer.inert = false;
    backgroundContainer.setAttribute('aria-hidden', 'false');
}

结果：如上所述。

我还尝试了上述的一些变体，但我怀疑我完全错了。任何和所有的帮助表示赞赏。

更新： 根据给出的建议，我能够使用 tabindex 将焦点转移到主页上的标题。如果我再次写这篇文章，我会采取非常不同的做法，并完全避免使用模式，但这对我来说是一个学习项目（而不是供公众消费），重写会教给我更少的东西。最后，我所做的是：

利用CSS类来显示/隐藏两个不同的容器div（即.container-hide只是display：none) 当提交表单时，我已经在 J​​avaScript 中交换了它（例如，container.className =“container-show”）。这似乎与我正在使用的屏幕阅读器 NVDA 配合得很好。

显示主要内容后，其关键信息就会获得焦点 (foo.tabIndex = -1;)。在其他地方，ariaLive 用于在用户与 UI 交互时更新用户，从而触发 DOM 更改。在此过程中获得了更好的理解。谢谢您的回答。