超过轮廓的声音占据更高的高度，在页面上看起来很难看

Question

我在网页上支持配音功能，我注意到一些奇怪的事情。由于文本的长度，元素周围可见的轮廓占据了很多高度。

<span class="outer-box">
    <span class="a11y">Last page updated.</span>
    2 mins ago
</span>

.outer-box {
    margin: 10px;
    padding: 5px;
}

.a11y {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

https://codepen.io/anon/pen/oGxWoW

如果您正在使用Mac +画外音，当您超过元素（class = a11y）时，您会看到画外音轮廓更高。

我想如果有某种方法可以调节那个高度。

提前致谢。

Answer 1

这是一个视觉隐藏文本不会改善可访问性的示例。虽然“最后一页更新”对于每个人理解“2分钟前”文本的含义非常重要，但您隐藏它并且使用屏幕阅读器将对小部分人群有所帮助。

画外音定义了视觉焦点的最小尺寸，以使其可见。

最佳解决方案是使文字可见。这将有助于每个人。