我想从视觉上隐藏页面上的<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;
}

07-24 09:46
查看更多