在对话框中添加焦点以实现可访问性

Question

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

<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>

Answer 1

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

对于h2，加一个tabindex=0，这样就可以聚焦了。

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

现在在您的 javascript 或打字稿文件中，无论您使用什么，添加此逻辑：

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" 将起作用，它将解决您的问题。

Answer 2

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

在对话框中添加焦点以实现可访问性

Adding focus inside dialog for accessibilty

html

accessibility

wai-aria