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

Question

我的页面上有一个弹出窗口，它会在特定条件下打开，比如在购物车中添加超过 n 件商品。弹窗打开时，弹窗的关闭按钮为'focused'。因此，使用屏幕阅读器的用户不知道他们听到的是哪个关闭按钮。

有没有办法首先关注文本，让用户知道弹出窗口及其内容，让他们拥有与普通用户相同的体验？

我尝试更改 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>

Answer 1

基本上，您应该做的是实现模式对话框。

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

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

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

Is there a way to focus on a text element (div,h tags, span) for screen readers

html

javascript

screen-readers