我想从视觉上隐藏页面上的<h1>
元素,不让普通网站访问者看到;但是,我意识到该元素对于屏幕阅读器用户很重要。因此,我需要以屏幕阅读器仍然可以访问的方式可视化地隐藏元素。
似乎有许多技术可以使用。例如,使用文本缩进将文本移出屏幕。在另一种情况下,有些使用样式设置,将高度和宽度设置为1px,然后隐藏溢出。
虽然从可访问性的角度来看这些技术是可行的,但我担心这些技术可能会被搜索引擎视为“伪装”的情况,从而导致网站受到处罚。
解决这个问题的最好办法是什么?这可能吗?
最佳答案
下面是样板文件中使用的标准代码。只需将“visuallyhidden”类分配给标题。它们在屏幕上看不到,但屏幕阅读器可以读取它们。
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
}