如何对屏幕阅读器隐藏溢出内容
How to hide overflow content from screenreaders
我在内容管理网站上工作。您可以策划的其中一件事是带有一些文本且没有字符限制的小部件。小部件（及其预览）通过简单设置 overflow: hidden
呈现
管理员当前需要在发布前预览小部件并检查其外观 "alright"。
但是，如果您使用的是屏幕 reader，屏幕 reader 甚至会读出隐藏的文本，因此视障管理员不会知道内容会溢出视力正常的用户。
一种解决方案是强制执行字符限制，我们最初避免这样做是因为字符限制对于非等宽字体来说不是很好。
但是，在诉诸于此之前，我想知道是否可以从屏幕上隐藏溢出的内容reader？
要从屏幕 reader 中隐藏内容，您可以使用属性 aria-hidden="true"。
<span aria-hidden="true">Here be redundant or extraneous content</span>
解决这个问题的一个公认的 hacky 方法是首先遵循这个问题的答案：
Transfer overflow from one div to another
这将允许您将溢出的内容分离到另一个div。之后，您可以像这样添加 aria-hidden=true 和 JavaScript：
elem.setAttribute("aria-hidden", "true");
在我上面给你的例子中，代码片段使用了jQuery，所以你也可以这样做：
p2.attr( "aria-hidden", "true" );
如果溢出是水平的，我认为这不会起作用。解决这个问题会很困难，但这适用于垂直溢出。
希望对您有所帮助！
aria-hidden="true"将使屏幕阅读器无法感知该元素及其内容，这意味着它不会被读出。
aria-label 将设置辅助技术（屏幕阅读器等）将感知的文本。
这可能不是您想要的答案，但我始终认为可访问性应该简单！
这里最坏的情况是什么？屏幕 reader 用户必须多听一些其他用户看不到的句子？或者它实际上可能是文本段落？如果是前者，我根本不会担心。
我在内容管理网站上工作。您可以策划的其中一件事是带有一些文本且没有字符限制的小部件。小部件（及其预览）通过简单设置 overflow: hidden
管理员当前需要在发布前预览小部件并检查其外观 "alright"。
但是，如果您使用的是屏幕 reader，屏幕 reader 甚至会读出隐藏的文本，因此视障管理员不会知道内容会溢出视力正常的用户。
一种解决方案是强制执行字符限制，我们最初避免这样做是因为字符限制对于非等宽字体来说不是很好。
但是，在诉诸于此之前，我想知道是否可以从屏幕上隐藏溢出的内容reader？
要从屏幕 reader 中隐藏内容，您可以使用属性 aria-hidden="true"。
<span aria-hidden="true">Here be redundant or extraneous content</span>
解决这个问题的一个公认的 hacky 方法是首先遵循这个问题的答案：
Transfer overflow from one div to another
这将允许您将溢出的内容分离到另一个div。之后，您可以像这样添加 aria-hidden=true 和 JavaScript：
elem.setAttribute("aria-hidden", "true");
在我上面给你的例子中，代码片段使用了jQuery，所以你也可以这样做：
p2.attr( "aria-hidden", "true" );
如果溢出是水平的，我认为这不会起作用。解决这个问题会很困难，但这适用于垂直溢出。
希望对您有所帮助！
aria-hidden="true"将使屏幕阅读器无法感知该元素及其内容，这意味着它不会被读出。
aria-label 将设置辅助技术（屏幕阅读器等）将感知的文本。
这可能不是您想要的答案，但我始终认为可访问性应该简单！
这里最坏的情况是什么？屏幕 reader 用户必须多听一些其他用户看不到的句子？或者它实际上可能是文本段落？如果是前者，我根本不会担心。