画外音在屏幕上显示时不会自动读取我的模态中包含的 "aria-labelledby"

Question

我正在尝试使用 accessibility 制作模态。基本上，模态得到一个 child 而这个 child 将是模态的内容：

  <div
    id="modal"
    role="dialog"
    aria-labelledby="modal-label"
    aria-describedby="modal-desc"
    tabIndex={0}
    className="modal"
  >

    {*/  {children} */}

   <div className="flexContainer">
    <div id="modal-desc">
      <div>hey</div>
      <div>
        <div>This is the description</div>
        <div>I am a button</div>
      </div>
    </div>
    <div>
      <div id="modal-label">This is the title</div>
    </div>
   </div>
  </div>

当模式打开时，voiceover 读取 gif 中的文本，但我不知道为什么它不读取 aria-labelledby。我的想法是，我可以将任何 child 传递给我的模态，画外音会读取 aria-labelledby 和 aria-describedby.

中包含的所有内容

如何让 voiceover 自动读取“aria-labelledby”？

this is my live code

const [openModal, setOpenModal] = useState(false);

const Modal = ({ children }) => {
useEffect(() => {
  document.querySelector("#modal")?.focus();
}, []);

return (
  <div
    id="modal"
    role="dialog"
    aria-labelledby="modal-label"
    aria-describedby="modal-desc"
    tabIndex={0}
    className="modal"
  >
    {children}
  </div>
);
};

const ModalContent = () => {
return (
  <div className="flexContainer">
    <div id="modal-desc">
      <div>hey</div>
      <div>
        <div>This is the description</div>
        <div>I am a button</div>
      </div>
    </div>
    <div>
      <div id="modal-label">This is the title</div>
    </div>
  </div>
);
};

return (
<>
  <button
    aria-hidden="true"
    onClick={() => {
      setOpenModal(true);
    }}
  >
    open modal
  </button>
  {openModal && (
    <Modal>
      <ModalContent />
    </Modal>
  )}
</>
);

Answer 1

您使用 aria-labelledby 的方式没有任何问题，但可能是您的模式 (#modal-desc) 的内容被添加 after[=23] =] 模态容器 (#modal)，因此当模态首次出现时，#modal-label ID 不会立即在 DOM 中可用。有时，当内容（特别是链接到 aria-labelledby 或 aria-describedby 的内容）动态添加到 DOM.

时，屏幕阅读器可能会出现问题
确保您的模态标签被宣布的更好方法是将其包含在对话框容器的 aria-label 属性中，例如：

<div id="modal" role="dialog" aria-label="This is the title" aria-describedby="modal-desc" tabIndex="0" class="modal">

顺便说一句，您的“打开模式”按钮上有 aria-hidden="true"。您应该删除它，因为它对屏幕阅读器隐藏了按钮。

画外音在屏幕上显示时不会自动读取我的模态中包含的 "aria-labelledby"

the voiceover does not automatically read the "aria-labelledby" contained in my modal when it is displayed on the screen

accessibility

reactjs