在视觉上删除 <h1> 元素，同时保留屏幕 reader 可访问性并避免搜索引擎的惩罚

Question

我想在视觉上对普通站点访问者隐藏页面上的 <h1> 元素；但是，我意识到该元素对于使用屏幕阅读器的用户来说很重要。所以我需要以一种屏幕阅读器仍然可以访问它的方式在视觉上隐藏该元素。

好像有很多技巧可以用。例如，使用文本缩进将文本移出屏幕。在其他情况下，有些使用样式，将的高度和宽度设置为 1px，然后隐藏溢出。

虽然从可访问性的角度来看这些应该有效，但我担心这些技术可能会被搜索引擎视为 "cloaking" 的情况，从而导致网站受到惩罚。

解决这个问题的最佳方法是什么？这甚至可能吗？

Answer 1

是的，您可以使用多种适合您的方式。三种最佳方式是：

设置 0 font-size.
使用否定 text-indent.
使用绝对 positioning.

片段

* {margin: 0; padding: 0; list-style: none;}
.type-1 {font-size: 0;}
.type-2 {overflow: hidden; text-indent: -9999px; line-height: 0;}
.type-3 {position: absolute; left: -9999px;}

<p>There are three headings below:</p>
<h1 class="type-1">Heading 1</h1>
<h1 class="type-2">Heading 2</h1>
<h1 class="type-3">Heading 3</h1>
<p>There are three headings above:</p>

Answer 2

执行此操作的最佳机制，适用于所有屏幕 readers 是 clip-rect 技术：

.screen-reader-text {
 position: absolute !important;
 height: 1px; width: 1px; 
 overflow: hidden;
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}

此技术还将最大限度地减少由于重叠垂直元素而在移动设备上引入的键盘陷阱的数量，这些重叠有时是 "positioning off screen" 技术的结果。

您可以在此处查看广泛使用的屏幕 reader 支持 https://jonathantneal.github.io/rat/

Answer 3

以下是样板中使用的标准代码。只需将 "visuallyhidden" class 分配给您的标题即可。它们在屏幕上不可见，但屏幕阅读器可以阅读。

.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;
}

Answer 4

最好的方法是在标签上使用 aria-label 属性：

 <h1 aria-label="My text for screen readers"></h1>

在SEO这件事上，你不会受到惩罚，但是，你也不会得到任何好处。

在可访问性方面，我从未见过为 99% 的访问者隐藏文本会有帮助的情况。

说实话，我认为你真的应该重新考虑你的问题。如果您不需要 <h1>，至少您可以将您的网站徽标包裹在里面。但是如果你的页面有一个特定的标题，我不明白为什么其他人应该看不到它...

在视觉上删除 <h1> 元素，同时保留屏幕 reader 可访问性并避免搜索引擎的惩罚

Visually remove <h1> element whilst preserving screen reader accessibility and avoiding penalties by search engines

html

css

seo

accessibility

wcag