有没有办法防止屏幕阅读器阅读由无视图按钮折叠的文本

Question

我正在使用 Angular、JavaScript 和 CSS 在论坛应用程序中开发一个用于评论的“查看更多/查看更少”按钮。当卡片折叠时，仅显示前两行文本，其余文本将被隐藏。问题是，当卡片折叠时，屏幕阅读器仍会读取隐藏的文本。我正在使用 NVDA 屏幕阅读器。

该按钮应在用户单击“查看更多”时展开卡片，并在用户单击“查看较少”时折叠卡片。我通过创建一个 viewMore 布尔变量和一个按钮来完成此操作，该按钮在单击时将值从 true 更改为 false，反之亦然。还有两个 css 类可以根据布尔值使溢出可见或不可见。所以 CSS 应该看起来像这样：

.viewLess {
    overflow: hidden;
}

.viewMore {
    overflow: visible;
    height: auto;
  }

该按钮工作正常，但问题是，每当卡片折叠时，屏幕阅读器仍会读取前两行可见行之外的隐藏溢出文本。有没有办法阻止屏幕阅读器在卡片折叠时读取隐藏的溢出文本，但在展开时仍然读取整个卡片？谢谢！

Answer 1

您需要了解有关 ARIA 属性的更多信息。在这种情况下，您可以做的最简单的事情是在元素折叠时使用

aria-hidden="true"

，并在元素打开时使用 JavaScript 将其切换到

aria-hidden="false"

。

但是，最佳属性将取决于您的实际用例。您可能想查看

<details>

和

<summary>

元素。这是原生处理可折叠内容的最佳方式。如果您还没有学过任何 JavaScript，这将特别有帮助。

需要明确的是，您需要确保您使用的元素和 ARIA 属性最适合您的场景，因此最好对此进行研究。