如何防止在屏幕阅读器中读取多余的文本？答案

【问题标题】：how to prevent redundant text being read in screen reader?如何防止在屏幕阅读器中读取多余的文本？
【发布时间】：2021-09-30 15:08:06
【问题描述】：

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

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

我尝试像这样添加 role=text，

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

但是，它仍然会单独读取里面的项目。我能想到的唯一其他方法是将 aria-hidden 添加到该 div，但不确定这是正确的方法。有人对我需要纠正什么有任何想法吗？

【问题讨论】：

删除aria-labelledby，将读出链接内的文本，并且您已正确隐藏图标。它可能也会解决这个问题。 role="text" 除了修复 iOS 文本拆分中的某些边缘情况外，还没有那么有用，它在技术上还没有推出，所以大多数屏幕阅读器都会忽略它。谨慎使用它（如果您尝试删除语义等，您通常需要role="presentation none"）
@GrahamRitchie 我删除了aria-labelledby，我仍然可以浏览各个文本元素。然后我将角色更改为演示文稿，然后更改为无，并且仍然滑动到各个文本元素。这发生在 Chrome 移动设备上。但是它在 FireFox 移动版中表现正常。
这是“平台就是这样实现它的”的烦恼之一。我知道如果有阻塞元素（例如<div>s）作为链接的子节点，iOS 会在您滑动时将链接拆分为多个部分。不幸的是，听起来安卓也在这样做。 role="text" 是一种修复 iOS 的无证方法。我不知道android会尊重它。让它保持原样感觉不对，但它确实是 android 的问题，它以这种方式工作。
刚刚再次查看了您的role="text" 选项。您可能需要将它设置在更高的容器上，因为链接在遇到文本角色之前已经有一个 <div>（阻塞元素）（即使第一个 div 是 aria-hidden）。尝试添加<div role="text"> 作为<a> 的第一个（也是唯一一个）子级，然后将其余代码放入新的<div>。或者您可以尝试将所有 div 更改为 span 以查看非阻塞元素是否解决了问题。非阻塞（跨度）适用于 iOS。
@slugolicious 我尝试使用带有角色的单个 div 并将所有内容放在那里并将 div 更改为跨度，但两者都不起作用。它在 iOS 中运行良好，在 FF - android 上运行。出于某种原因，Chrome - android 很挑剔。我可以解决它的唯一方法是将 aria-hidden 设置为文本 div，但不确定这是否正确。

标签： html accessibility screen-readers

【解决方案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> 标记内的文本。

【讨论】：

好的，现在可以了。以前有评论者建议role="presentation"，但我只在div 中有role="text" 的地方替换了它。我认为如果我在父元素中设置它，它将自动应用于所有子元素。
不，role="presentation"（或role="none"）仅适用于分配给它的标签。其他 ARIA 属性，例如 aria-hidden="true"，将影响所有后代元素。