画外音轮廓占用了更多的高度，在页面上看起来很丑陋
画外音轮廓占用了更多的高度，在页面上看起来很丑陋
提问于 2017-09-20 06:13:01
我在我的网页中支持画外音功能，我注意到一些奇怪的事情。由于文本的长度，元素周围可见的轮廓占用了很大的高度。
<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)时，你会看到画外音轮廓的高度更高。
我想如果你有什么方法可以调节那个高度。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2017-09-20 20:44:22
这是一个视觉上隐藏的文本不能提高可访问性的示例。虽然“最后更新的页面”对每个人理解文本"2分钟前“的含义很重要，但如果你隐藏它，它将会使使用屏幕阅读器的人群中的一小部分受益。
画外音定义了视觉焦点的最小大小，以使其可见。
最好的解决方案是使文本可见。这对每个人都有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46310483
复制相关文章
相似问题
腾讯云开发者
