我正在为移动屏幕阅读器开发基于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>}
/>
最佳答案
您在这里有四个选择：
选项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>