如何让带点击事件的TD不被屏幕阅读器识别为交互元素但保留内容可读

核心思路是将点击事件从<td>元素本身剥离，转移到单元格内的透明覆盖层上，既保留鼠标点击的便捷性，又让<td>回归普通表格单元格的语义，避免被屏幕阅读器判定为交互元素。

具体实现步骤 #

• 移除<td>上的tabindex="-1"和aria-hidden="true"属性，确保单元格内容能被屏幕阅读器正常读取，同时保留表格的语义结构。
• 在每个需要支持点击的<td>内部添加一个绝对定位的透明容器（如<div>），将点击事件绑定到这个容器上。该容器会覆盖整个单元格区域，保证鼠标点击单元格任意位置都能触发事件。
• 给透明容器设置tabindex="-1"，阻止键盘用户聚焦到该元素，确保键盘交互仅通过每行的专用按钮完成。

修改后的代码示例 #

<style>
  .cell-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* 透明样式，不影响内容显示 */
    background-color: transparent;
  }
  .clickable-cell {
    /* 单元格需要设置相对定位，让内部的绝对定位容器基于它定位 */
    position: relative;
  }
</style>

<table>
    <thead>
        <tr>
            <th scope="col">Rooms</th>
            <th scope="col">Area</th>
            <th scope="col">Rent</th>
            <th scope="col">Deposit</th>
            <th scope="col">Info</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="result-rooms" rowspan="2">
                <span><span>1</span></span>
            </td>
            <td class="result-sqm clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>39</span> m<sup>2</sup></span>
            </td>
            <td class="result-rent clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>2218</span> DKK/month</span>
            </td>
            <td class="result-deposit clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>8208</span> DKK</span>
            </td>
            <td class="result-info" rowspan="2">
                <button type="button" ng-click="$ctrl.viewTenancy(ten)" title="Info">
                    <span class="fa fa-info-circle" aria-hidden="true"></span>
                </button>
            </td>
            <td class="result-add ng-scope" rowspan="2">
                <div class="add-to-basket ng-isolate-scope">
                    <button type="button" class="btn btn-icon btn-heart ng-scope btn-primary btn-icon-light" ng-click="$ctrl.toggleWish(tenG.tenancies[$index], ten.Rooms, $index)" aria-label="Add 2 to basket">
                        <span>Add 2</span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td class="result-sqm clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>40</span> m<sup>2</sup></span>
            </td>
            <td class="result-rent clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>2251</span> DKK/month</span>
            </td>
            <td class="result-deposit clickable-cell">
                <div class="cell-click-overlay" ng-click="$ctrl.viewTenancy(ten)" tabindex="-1"></div>
                <span><span>8640</span> DKK</span>
            </td>
            <td class="result-info" rowspan="2">
                <button type="button" ng-click="$ctrl.viewTenancy(ten)" title="Info">
                    <span class="fa fa-info-circle" aria-hidden="true"></span>
                </button>
            </td>
        </tr>
    </tbody>
</table>

效果说明 #

• 鼠标用户：点击单元格任意位置时，透明覆盖层会触发绑定的点击事件，体验和直接点击<td>一致。
• 键盘用户：只能通过每行的Info按钮触发对应操作，透明覆盖层因tabindex="-1"无法被键盘聚焦，减少了冗余的交互选项。
• 屏幕阅读器：<td>保持普通表格单元格的语义，不会被识别为交互元素，同时单元格内的文本内容能被正常读取，完全符合需求。

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