aria-labelledby 属性如何工作？

Question

我有一个网页在进行测试时有一个损坏的 ARIA 引用。具体来说，aria-labelledby="myModalLabel" 显示错误。我的理解是需要有一个 id 引用 myModalLabel 的地方，但我不确定如果是这样的话。

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <div class="modal-content">
      <div class="modal-body">
        [pirate_forms]
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

您需要有一个 id 设置为 myModalLabel 的元素，它包含模态标签：

The aria-labelledby property enables authors to reference other elements on the page to define an accessible name. For example, the following switch is named by the text content of a previous sibling element.

<span id="night-mode-label">Night mode</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

来源：https://www.w3.org/TR/wai-aria-practices/#naming_with_aria-labelledby

所以在你的情况下，它可能是：

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <div class="modal-content">
                              <!-- ⬇⬇⬇⬇⬇⬇⬇⬇ -->
      <div class="modal-header" id="myModalLabel">Fill in the form</div>
                              <!-- ⬆⬆⬆⬆⬆⬆⬆⬆ -->
      <div class="modal-body">
        [pirate_forms]
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>

aria-labelledby 属性如何工作？

How does the aria-labelledby attribute work?

html

wai-aria