.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}
此类可以从页面中删除某项,使其不再流通,并且不会导致溢出滚动。
它比display: none;
更好display: none;
甚至visibility: hidden;
当目标是视觉上隐藏该元素,但让屏幕阅读器可以访问该元素时。
斯努克有一个演练更稳健类了结的考虑更多的情况。
.element-invisible {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
WordPress使用了一个更加健壮的类,考虑到应该重点关注的元素。
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
翻译自: https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/