如何避免屏幕阅读器重复朗读链接内的冗余文本？

问题根因 #

安卓端Talkback对包含块级子元素的可交互锚点（<a>标签），默认会将内部的独立文本节点也加入焦点遍历队列，就会出现锚点整体获得焦点时朗读一次、滑动切换焦点时再单独朗读内部文本的重复问题。你之前使用的role="text"兼容性不足，安卓Talkback多数版本不识别该属性，因此没有生效。

可行修正方案（符合WCAG无障碍规范） #

不要直接给被aria-labelledby引用的div加aria-hidden，会导致aria-labelledby指向的元素被辅助技术忽略，锚点失去可识别的朗读内容。推荐使用如下两类方案：

方案1：统一锚点朗读内容，屏蔽内部文本遍历 #

1. 直接给<a>标签添加aria-label属性，写入完整的待朗读内容，保证锚点获得焦点时传递完整信息
2. 给内部的文本容器.relatedFeaturedText添加aria-hidden="true"，屏蔽内部文本节点被单独聚焦朗读的逻辑
   该方案不会丢失任何需要传递给视障用户的信息，完全符合无障碍规范。

对应代码示例

<ul>
    <li class="relatedFeatured">
        <a href="https://www.weather.com/" target="_blank" aria-label="查看天气，访问并获取你所在地区的气候相关信息">
            <div class="icon featuredIcon" aria-hidden="true">&#57409</div>
            <div class="relatedFeaturedText" aria-hidden="true">
                <strong>See the weather</strong>
                <p>Visit and find information on the climate in your area.</p>
            </div>
            <span class="icon" aria-hidden="true">&#58124</span>
        </a>
    </li>
</ul>

方案2：维护友好的同步配置 #

如果你希望显示文本和朗读内容自动同步，避免手动维护两份内容，可以保留原有的aria-labelledby配置，只给内部的文本子节点添加aria-hidden="true"：

对应代码示例

<ul>
    <li class="relatedFeatured">
        <a href="https://www.weather.com/" target="_blank" aria-labelledby="relatedLinks">
            <div class="icon featuredIcon" aria-hidden="true">&#57409</div>
            <div class="relatedFeaturedText" id="relatedLinks">
                <strong aria-hidden="true">See the weather</strong>
                <p aria-hidden="true">Visit and find information on the climate in your area.</p>
            </div>
            <span class="icon" aria-hidden="true">&#58124</span>
        </a>
    </li>
</ul>

该方案下aria-labelledby仍然可以正常读取#relatedLinks的合并文本内容，同时内部的<strong>和<p>不会被单独加入焦点队列，不会出现重复朗读的问题。 #

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