基于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中的内容之后，但是使用绝对位置将其视觉放置

您可以在内容后移动关闭按钮，然后使用CSS将其放置在对话框的右上方。

这是否会构成logical tab order，这是一个灰色区域，但我认为仍然可以轻松通过，这是一个不错的选择。

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

当对话框打开时，您可以以编程方式集中第一项。只要确保将焦点放在对话框中，就可以使用关闭按钮。

选项4。不执行任何操作

这是最好的选择

关闭按钮是第一个可聚焦项目没有任何问题（实际上，允许意外打开对话框的用户快速关闭它可能是首选。

屏幕阅读器用户习惯于浏览对话框，因此，如果第一个可聚焦项是关闭按钮，则不会影响对话框。甚至还可以放心，您已经提供了一个可访问的关闭按钮（许多开发人员忘记了键盘用户，使按钮无法访问以关闭对话框）。

语义，转义和焦点管理。

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

其次，应确保可以使用Escape键关闭对话框。

最后确保焦点保持在模式上（不仅仅是通过tab键，您还需要在对话框打开时将aria-hidden="true"添加到对话框之外的所有内容中，因为屏幕阅读器用户不仅可以使用[ C0]键，实际上这是第二种导航方式，屏幕阅读器用户可以按标题1-6，链接，表单，按钮等进行导航。

这可能需要对页面进行结构化以使其更容易

例如：-

tab
打开对话框时将变为以下内容（关闭对话框时将恢复为以下内容。

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