css - 如何隐藏屏幕阅读器的溢出内容

Question

我正在开发一个内容管理网站。您可以策划的一件事是带有一些文本且没有字符限制的小部件。小部件（及其预览）通过简单的设置来呈现overflow: hidden

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

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

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

这将允许您将溢出的内容分离到另一个div. 之后，您可以aria-hidden=true像这样使用 JavaScript 添加：

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

在我上面给你的例子中，代码片段使用了 jQuery，所以你也可以这样做：

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

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

希望有帮助！

score -1 · Accepted Answer

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

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

4 回答 4