屏幕 reader 未检测到 Table 中的链接

Question

我的代码中有一个 link 按钮，如果通过 Tab 键或单击将其聚焦，则会出现 div。我可以使用选项卡聚焦子 table 元素（ td 中的 href 构建。请参阅子代码），但屏幕 reader 不提供 link.[=14 的音频反馈=]

按钮代码：

 <a
      tabindex="0"
      class="button dropdown secondary status_button"
      id="twh-dd-anchor2"
      type="button"
      data-toggle="thisweek-dropdown2"
      data-closable=""
      aria-controls="thisweek-dropdown2"
      data-is-focus="false"
      data-yeti-box="thisweek-dropdown2"
      aria-haspopup="true"
      aria-expanded="false"
      >Building Status</a
    >

点击按钮弹出的页面：

<div
  class="dropdown-pane is-open has-position-bottom has-alignment-right"
  id="thisweek-dropdown2"
  aria-labelledby="twh-dd-anchor2"
  data-dropdown=""
  data-hover="true"
  data-hover-pane="true"
  aria-hidden="true"
  data-yeti-box="thisweek-dropdown2"
  data-resize="thisweek-dropdown2"
  data-n="u4ighp-n"
  data-events="resize"
  style="top: 78.1797px; left: -226.719px"
>
  <table class="quick-link-list unstriped">
    <thead class="show-for-sr">
      <tr>
        <th>Space/Service</th>
      </tr>
      <tr>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="/about/spaces/building" role="link"> Building</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

检查 child div 上的数据属性，您设置： aria-hidden="真"

这将阻止屏幕阅读器读出其中的内容div。

我一删除它，我就使用了 NVDA，并且可以听到它读出“Building”。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

屏幕 reader 未检测到 Table 中的链接

Links in Table not detected by screen reader

html

accessibility