在对话框内添加焦点以实现可访问性答案

【问题标题】：Adding focus inside dialog for accessibilty在对话框内添加焦点以实现可访问性
【发布时间】：2021-03-04 17:12:27
【问题描述】：

我的 aurelia 应用程序中有一个对话框，当我单击链接以显示对话框时，焦点会回到页面顶部。我给了它 role="dialog" aria-labelledby="aboutHeader" aria- describeby="versionNumber" 但屏幕阅读器无法识别对话框。如何将键盘焦点放在对话框上，以便当我单击“关于”时，画外音的下一个选项卡在对话框内，在关闭对话框时如何将其返回到“关于”链接的最后一个焦点?

<ux-dialog role="dialog" aria-labelledby="aboutHeader" aria-describedby="versionNumber">
      <ux-dialog-header><h2 id="aboutHeader">Header</h2></ux-dialog-header>

    <ux-dialog-body style="max-width: 750px;">
        <p id="versionNumber">Version Number</p>
        <p>Copyright Info Here</p>
    </ux-dialog-body>

    <ux-dialog-footer>
      <button click.trigger="controller.close()">Close</button>
    </ux-dialog-footer>
  </ux-dialog>

【问题讨论】：

如何管理焦点，您是否尝试使用指向模态 H2 的超链接来执行此操作？如果您是，那么是模态display: none，直到您单击该链接，如果是，则该功能是为此内置的，还是您自己编写了一些JS来打开模态？你能把小提琴放在一起吗，因为我（我相信很多其他人）不熟悉 aurelia。这很可能是一个时间问题，您试图在 DOM 中显示之前将焦点移到标题上，但这只是基于您在问题中提出的最佳猜测。
我支持这个，我也不认识aurelia。但最终你应该在某个地方有类似myux-dialog.focus() 的东西。理想情况下，焦点会在对话关闭时返回到打开对话的触发器，因此在聚焦对话之前，您还需要存储指向该触发器的指针。

标签： html accessibility wai-aria

【解决方案1】：

这是打开模式后您可以执行的操作：

对于 h2，添加一个 tabindex=0 以便它可以被聚焦。

<ux-dialog-header>
  <h2 id="aboutHeader" tabindex="0">
      Header
  </h2>
</ux-dialog-header>

现在在您使用的 javascript 或 typescript 文件中，添加以下逻辑：

const header = document.querySelector('h2#aboutHeader');

if (header) {
  let modifiedHeader: HTMLElement = header as HTMLElement;
  modifiedHeader.focus();
}

// The IF condition will make sure that if its not defined, or not present, it wont throw an console error for you

现在终于在 CSS 文件中添加：

// Set the border for the focus items
[tabindex]:focus {
  outline: 1px dashed gray;
  &[disabled] {
    outline: none;
  }
}

// For all the focusable items, this is how you can set the border so that you can see.

通过执行上述所有操作，焦点将进入 h2 标记，并且由于它在模态中，role="dialog" 将起作用并解决您的问题。

【讨论】：

【解决方案2】：

感谢所有反馈，这很有帮助。对于这个特定的实例，我能够向 h2 元素添加一个 ref="aboutButton" 属性，并在我的 ViewModel 中添加 this.aboutHeader.focus() 到 attach() 组件生命周期中，一旦组件附加到该生命周期就会被调用DOM。

【讨论】：