如何隐藏屏幕阅读器的溢出内容答案

【问题标题】：How to hide overflow content from screenreaders如何隐藏屏幕阅读器的溢出内容
【发布时间】：2016-08-17 10:49:22
【问题描述】：

我正在开发一个内容管理网站。您可以策划的一件事是带有一些文本且没有字符限制的小部件。只需设置overflow: hidden

即可呈现小部件（及其预览）

目前希望管理员在发布前预览小部件并检查它是否“正常”。

但是，如果您使用屏幕阅读器，则屏幕阅读器甚至会读出隐藏的文本，因此视障管理员不会知道内容会溢出给有视力的用户。

一种解决方案是强制执行字符限制，我们最初避免这样做，因为字符限制不适用于非等宽字体。

但是，在诉诸于此之前，我想知道是否可以从屏幕阅读器中隐藏溢出的内容？

【问题讨论】：

【解决方案1】：

aria-hidden="true" 将使屏幕阅读器无法感知该元素及其内容，这意味着它不会被读出。

aria-label 将设置辅助技术（屏幕阅读器等）将感知的文本。

【讨论】：

aria-label 可以在div 上工作吗？它会同时读取标签和内容吗？
不，aria-label 不适用于 div，屏幕阅读器只会将其用于与表单相关的控件和媒体。
是的，您可以在 div 上使用 aria-label。 aria-label 属性用于定义标记当前元素的字符串。。它不受特定元素的限制。 此属性可与任何典型的 HTML 元素一起使用 请参阅此处：w3.org/TR/wai-aria/states_and_properties#aria-label@Alec

【解决方案2】：

一种公认的解决方法是先遵循这个问题的答案：

这将允许您将溢出的内容分开到另一个div。之后，您可以使用 JavaScript 添加 aria-hidden=true，如下所示：

elem.setAttribute("aria-hidden", "true");

在我上面给你的例子中，sn-p 使用 jQuery，所以你也可以这样做：

p2.attr( "aria-hidden", "true" );

如果溢出是水平的，我认为这不会起作用。解决这个问题会很困难，但这适用于垂直溢出。

希望有所帮助！

【讨论】：

【解决方案3】：

这可能不是您想要的答案，但我始终认为可访问性应该很简单！

这里最糟糕的情况是什么？屏幕阅读器用户必须听其他用户看不到的句子？或者它实际上可能是文本段落？如果是前者，我完全不会担心。

【讨论】：

【解决方案4】：

要从屏幕阅读器中隐藏内容，您可以使用属性aria-hidden="true"。

<span aria-hidden="true">Here be redundant or extraneous content</span>

【讨论】：