html - Voice over outline 占据了更高的高度，在页面上看起来很难看

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 分钟前”文本的含义很重要，但您将其隐藏，这将使一小部分使用屏幕阅读器的人受益。

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

最好的解决方案是使文本可见。这对每个人都有帮助。