如何让NVDA仅朗读日历单元格的aria-label，屏蔽行列信息？

要让NVDA仅朗读日期单元格的aria-label内容，你需要调整表格的语义与ARIA属性，避免屏幕阅读器自动关联表头、触发网格控件的行列播报：

关键调整点 #

• 删除冗余ARIA角色：
  外层<div role="grid">会触发NVDA的网格控件行为，导致播报行列编号；<tr role="row">和<td role="gridcell">属于重复语义（原生table的tr/td已有对应角色），直接删除这些角色声明，改用原生表格语义。
• 屏蔽表头的屏幕阅读器关联：
  给所有<th>添加aria-hidden="true"，阻止屏幕阅读器将星期表头与下方单元格绑定，聚焦日期时就不会额外朗读星期几。
• 保留目标朗读内容：
  继续保留<td>上的aria-label，同时维持tabindex="0"确保单元格可聚焦，这样屏幕阅读器只会播报你指定的日期文本。

修改后的完整代码 #

<table>
  <thead>
    <tr>
      <th class="header-item" aria-hidden="true">Sunday</th>
      <th class="header-item" aria-hidden="true">Monday</th>
      <th class="header-item" aria-hidden="true">Tuesday</th>
      <th class="header-item" aria-hidden="true">Wednesday</th>
      <th class="header-item" aria-hidden="true">Thursday</th>
      <th class="header-item" aria-hidden="true">Friday</th>
      <th class="header-item" aria-hidden="true">Saturday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td tabindex="0" aria-label="1 April">
        <div>1</div>
      </td>
      <td tabindex="0" aria-label="2 April">
        <div>2</div>
      </td>
      <td tabindex="0" aria-label="3 April">
        <div>3</div>
      </td>
      <td tabindex="0" aria-label="4 April">
        <div>4</div>
      </td>
      <td tabindex="0" aria-label="5 April">
        <div>5</div>
      </td>
      <td tabindex="0" aria-label="6 April">
        <div>6</div>
      </td>
      <td tabindex="0" aria-label="7 April">
        <div>7</div>
      </td>
    </tr>
    <tr>
      <td tabindex="0" aria-label="8 April">
        <div>8</div>
      </td>
      <td tabindex="0" aria-label="9 April">
        <div>9</div>
      </td>
      <td tabindex="0" aria-label="10 April">
        <div>10</div>
      </td>
      <td tabindex="0" aria-label="11 April">
        <div>11</div>
      </td>
      <td tabindex="0" aria-label="12 April">
        <div>12</div>
      </td>
      <td tabindex="0" aria-label="13 April">
        <div>13</div>
      </td>
      <td tabindex="0" aria-label="14 April">
        <div>14</div>
      </td>
    </tr>
    <tr>
      <td tabindex="0" aria-label="15 April">
        <div>15</div>
      </td>
      <td tabindex="0" aria-label="16 April">
        <div>16</div>
      </td>
      <td tabindex="0" aria-label="17 April">
        <div>17</div>
      </td>
      <td tabindex="0" aria-label="18 April">
        <div>18</div>
      </td>
      <td tabindex="0" aria-label="19 April">
        <div>19</div>
      </td>
      <td tabindex="0" aria-label="20 April">
        <div>20</div>
      </td>
      <td tabindex="0" aria-label="21 April">
        <div>21</div>
      </td>
    </tr>
    <tr>
      <td tabindex="0" aria-label="22 April">
        <div>22</div>
      </td>
      <td tabindex="0" aria-label="23 April">
        <div>23</div>
      </td>
      <td tabindex="0" aria-label="24 April">
        <div>24</div>
      </td>
      <td tabindex="0" aria-label="25 April">
        <div>25</div>
      </td>
      <td tabindex="0" aria-label="26 April">
        <div>26</div>
      </td>
      <td tabindex="0" aria-label="27 April">
        <div>27</div>
      </td>
      <td tabindex="0" aria-label="28 April">
        <div>28</div>
      </td>
    </tr>
    <tr>
      <td tabindex="0" aria-label="29 April">
        <div>29</div>
      </td>
      <td tabindex="0" aria-label="30 April">
        <div>30</div>
      </td>
      <td tabindex="-1" aria-hidden="true"></td>
      <td tabindex="-1" aria-hidden="true"></td>
      <td tabindex="-1" aria-hidden="true"></td>
      <td tabindex="-1" aria-hidden="true"></td>
      <td tabindex="-1" aria-hidden="true"></td>
    </tr>
  </tbody>
</table>

效果验证 #

在NVDA 2024.4.2中测试上述代码，聚焦日期单元格时只会播报aria-label中的内容（如“1 April”），不会再朗读星期表头或行列编号；空单元格添加aria-hidden="true"后，也不会被屏幕阅读器识别或播报。

内容的提问来源于stack exchange，提问作者IvoAtanasov