如何防止在屏幕 reader 中读取冗余文本？

Question

这是我第一次处理可访问性问题。我在 phone 上使用对讲来测试项目的可访问性。我遇到的问题是，如果我在锚点中有内容，它会读取整个内容一次，然后当您滑动时它会读取锚点内的 individual 文本。这是我的代码：

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

我试过像这样添加角色=文本，

<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" role="text">
                <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>

但是，它仍然读取dividually 中的项目。我能想到的唯一其他方法是将 aria-hidden 添加到 div，但不确定这是正确的方法。有人知道我需要更正什么吗？

Answer 1

我在带有 TalkBack (Android 11) 的三星 Galaxy S10 上使用 Chrome 尝试了以下操作：

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

因此，通过在 <strong> 和 <p> 标签上使用 role="presentation"，TalkBack 仅读取 <a> 标签内的文本，而不是单独的文本项。我还删除了 aria-labelledby 属性，因为它是多余的，因为 <a> 标签内的文本已经被屏幕阅读器拾取了。

如何防止在屏幕 reader 中读取冗余文本？

how to prevent redundant text being read in screen reader?

html

accessibility

screen-readers