javascript - 基于 React 的应用程序的移动屏幕阅读器问题

Question

我正在为移动屏幕阅读器开发基于 react 的应用程序。用例是，对于带有菜单项的对话框，我必须保留一个按钮来关闭该对话框，该按钮位于对话框的顶部。我必须将其 tabIndex 设置为 0 才能使其可访问，这会导致关闭按钮成为第一个可聚焦的项目。

期望屏幕阅读器将焦点放在第一个菜单项上后，应该可以访问关闭按钮。如何解决这个问题？

我尝试过以下方法:

<Dialog open={this.state.menuOpen} className="hide-default-dialog-container"
        content={<div className="actionsheet-view-bg" onClick={() => {
            this.setState({menuOpen: !this.state.menuOpen})
        }}> {this.getDismissButtonForActionSheet()}
            <div className="actionsheet-view-container"> {this.getActionSheetItems()} </div>
        </div>}
/>

Answer 1

这里有四个选项:-

选项 1. 将关闭按钮移至对话框末尾的任何保存/更新按钮旁边。

对话框右上角的“x”是预期的，但您没有理由不能在对话框底部添加关闭按钮，并将其放置在任何保存/更新按钮之后。

所以在对话框的页脚中有

<button>Save</button> <button>Cancel</button>

您仍然可以保留右上角的“x”，但使用 aria-hidden="true"没有 tabindex 就可以了.

选项 2. 将按钮更改为 DOM 中内容的后面，但使用绝对定位以直观方式放置它

您可以将关闭按钮移到内容(在 DOM 中)之后，然后使用 CSS 将其放置在对话框的右上角。

对于是否构成 logical tab order 来说，这是一个灰色地带。但我认为它仍然足够容易成为一个很好的通行证。

选项 3.以编程方式管理焦点。

当对话框打开时，您可以通过编程方式聚焦第一个项目。只需确保将焦点捕获在对话框内，以便可以到达关闭按钮。

选项 4. 不执行任何操作

这是最好的选择

将关闭按钮作为第一个可聚焦项目并没有什么问题(事实上，允许意外打开对话框的用户快速关闭它可能是优先的)。

屏幕阅读器用户习惯于浏览对话框，因此如果第一个可聚焦项目是关闭按钮，不会影响他们。知道您提供了一个可访问的关闭按钮甚至可能会令人放心(因为许多开发人员忘记了键盘用户并使得按钮无法访问以关闭对话框)。

语义、转义和焦点管理。

为了进一步提高可访问性，请更改您的关闭 div进入button这样您就不必担心添加 tabindex因为它在语义上是正确的。 (我假设关闭按钮是一个 div，正如您所说，您添加了 tabindex="0" - 如果它已经是一个按钮，则不需要 tabindex)

其次确保可以使用 Escape 关闭对话框关键是这是预期的行为。

最后确保焦点仍然局限于模式(不仅仅是通过 tab 键，您需要将 aria-hidden="true" 添加到对话框打开时对话框之外的所有内容，因为屏幕阅读器用户不仅可以使用tab 键，实际上它是一种辅助导航方式，屏幕阅读器用户通过标题 1-6、链接、表单、按钮等进行导航。

这可能需要构建您的页面以使其更容易

例如:-

<header aria-hidden="false"></header>
<main aria-hidden="false"></main>
<footer aria-hidden="false"></footer>
<dialog aria-hidden="true"></dialog>

当对话框打开时将变成以下内容(并在对话框关闭时恢复)。

<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<dialog aria-hidden="false"></dialog>