I have a link button in my code where if it's focused by tabbing or clicking, a div will come down. I'm able to focus child table elements (the a href building inside td . See child code) using tab but screen reader is not providing audio feedback of the link.

Button code:

 <a
      tabindex="0"
      
      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
    >

Page that pops up on button click:

<div
  
  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 >
    <thead >
      <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>

CodePudding user response：

Check your data attributes on your child div, you set: aria-hidden="true"

That is going to prevent screen readers from reading out what's inside this div.

As soon as I removed that I used NVDA and could hear it read out "Building".

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