css - 如何对屏幕阅读器 overflow hidden 内容

Question

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

即可呈现小部件(及其预览)

管理员目前需要预览该小部件并在发布之前检查它看起来是否“正常”。

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

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

但是，在采取这种方法之前，我想知道是否可以对屏幕阅读器 overflow hidden 的内容？

Answer 1

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

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

http://www.w3.org/TR/wai-aria/states_and_properties