有没有办法专注于屏幕阅读器的文本元素（div、h 标签、跨度）答案

【问题标题】：Is there a way to focus on a text element (div,h tags, span) for screen readers有没有办法专注于屏幕阅读器的文本元素（div、h 标签、跨度）
【发布时间】：2019-07-23 12:39:03
【问题描述】：

我的页面上有一个弹出窗口，它会在特定条件下打开，例如在购物篮中添加超过 n 个项目。当弹出窗口打开时，弹出窗口的关闭按钮是“聚焦”的。因此，使用屏幕阅读器的用户不会知道他们听到的是哪个关闭按钮。

有没有办法首先关注文本，以便用户了解弹出窗口及其内容，从而让他们获得与普通用户相同的体验？

我尝试更改 HTML 元素的顺序（例如：首先是文本元素，然后是按钮），但没有奏效。

<div class="popup__container" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
  <a href="#" class="popup__logo">
    <svg class="icon">
      <use xlink:href="#icon-logo"></use>
    </svg>
  </a>
  <button class="popup__close">
    <span>Close</span>
    <svg class="icon">
      <use xlink:href="#icon-close"></use>
    </svg>
  </button>
  <div class="popup__content">
    <div id="{9B6A4-272-46F7-9E21-4CE80C73A}" class="no-startendmargin theme-white" data-label-close="Close">
      <p>Starting from 15 products, you get a exclusive discount, find out more <a href="#groupProduct">Group product</a>.</p>
    </div>
  </div>
</div>

【问题讨论】：

tab-index
根据我的理解和试验，tab-index 不会使元素默认或通过 JS 获得焦点，它只是允许通过按 tab 选择元素（索引元素为制表符）。 - @zer00ne
那你的理解是片面的，请阅读tab-index
我花了很多时间再读一遍，所以它说的是，tabindex 使元素可以从键盘而不是 javascript 获得焦点，这意味着，如果你按 tab，焦点会跳转到那个如果这是列表中的下一个元素，我在添加 tabindex 之后尝试通过触发焦点甚至是 tabkey press（key 9）来通过 js 和 jquery 聚焦。没用。 @zer00ne

标签： javascript html screen-readers

【解决方案1】：

基本上，你应该做的是实现一个模态对话框。

如果您想为现代浏览器提供更简单的解决方案，请考虑使用 HTML5 原生 <dialog> 元素 MDN link is here。因此，您将获得关闭按钮、可聚焦性甚至类似于 Windows 的体验和光标限制（似乎是 JAWS 特有的功能），所有这些都是免费的。

如果由于某种原因原生解决方案不适合您，请考虑使用 Modaal 之类的插件或手动添加相应的 ARIA 角色，例如 dialog。

【讨论】：

这很有帮助，添加角色对话框使屏幕阅读器可以阅读弹出窗口的内容，而无需关注文本，非常感谢您的输入。我会有更多问题要问你:)
请随时询问:)。
我有一个关于可访问性的问题，请您检查一下。
是的，你要我检查什么？ :)