有没有一种方法可以专注于屏幕阅读器的文本元素（div，h标签，跨度）

Question

I have a popup on my page and it opens on certain condition, like adding more than n number of items in the basket. When the popup opens, the close button of the popup is 'focused'. So a user using a screenreader would have no idea which close button they are hearing about.

Is there a way to focus on the text first so that the user is aware of the popup and what it says, allowing them to have the same experience as a normal user?

I tried changing the order of the HTML elements(ex: text element first and button after) but that didn't work.

<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

Basically, what you should do is implement a modal dialog.

If you want a simpler solution for modern browsers, consider using the HTML5 native <dialog> element, MDN link is here . Thus you'll get the Close button, focusability and even Windows-like experience and cursor restriction (seems to be a JAWS-specific feature), all of that free of charge.

If for some reason the native solution is not suitable for you, consider using plugins like Modaal or manually adding corresponding ARIA roles like dialog , for instance.