javascript - "aria-describedby"没有被完全读取，除非有一个 "aria-labelledby"

Question

我试图让 voiceover 只读取 aria-describedby，但它是这样读取的(“我是一个按钮”未被读取) :

而如果有一个定义了 id aria-describedby="modal-label" 的元素。 id 为 aria-labelledby="modal-desc" 的元素被完整读取(“I am a button”被读取)。

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

{*/  {children} */}

  <div>
    {/* If no exists this div, modal-desc is not read completely */}
    <div id="modal-label">this is the title</div>

    <div id="modal-desc">
      <div>this is a descripcion</div>
      <div>
        <div>
          <button>I am a button</button>
        </div>
      </div>
    </div>
  </div>
 </div> 

当模态是打开了吗？

this is my live code

Answer 1

您生成的 HTML 应该类似于这样:

<div id="modal" class="modal" role="dialog" aria-labelledby="modal-label" aria-describedby="modal-desc" tabindex="-1">

    <!-- {children} -->

    <div role="document">
        <div id="modal-label">this is the title</div>

        <div>
            <div id="modal-desc">this is a description</div>
            <div>
                <div>
                    <button>I am a button</button>
                </div>
            </div>
        </div>
    </div>
</div>

值得注意的是，当 aria-describedby 和 aria-labelledby 都存在时，aria-labelledby 似乎在accessible name computation .

此外，您的原始示例的 ariadescribedby 元素包含一个按钮，这可能会导致问题。

Note: The aria-describedby content should only be a text string.https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

根据您的屏幕阅读器和/或浏览器，您可能会得到不同的行为，但通常会先读取 aria-labelledby，然后 aria-decribedby 可能或之后可能不会读取，具体取决于实现情况。

aria-decribedby 也可能会或可能不会集中阅读，具体取决于实现情况。

你还应该特别注意limitations voiceover has支持 aria-describedby，因为这可能会阻止您获得您正在寻找的确切行为。

归根结底，aria-describedby 可能不是正确的工具，如果它是每个人都需要理解以理解内容的重要信息。