Question

我希望在视觉上隐藏常规网站访问者页面上的<h1>元素;但是，我意识到这个元素对于有屏幕阅读器的用户很重要。因此，我需要以屏幕阅读器仍然可以访问它的方式在视觉上隐藏元素。

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

虽然这些应该从可访问性的角度来看，但我担心这些技术可以被认为是＆＃34;隐藏＆＃34;通过搜索引擎，导致该网站受到处罚。

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

Answer 1

在所有屏幕阅读器中使用的最佳机制是剪辑技术：

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

这种技术还可以最大限度地减少移动设备上引入的键盘陷阱的数量，因为垂直元素的重叠有时是“屏幕定位”技术的结果。

您可以看到此处记录的广泛的屏幕阅读器支持https://jonathantneal.github.io/rat/

Answer 2

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

设置0 font-size。
使用否定text-indent。
使用绝对position ing。

<强>段

* {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 3

以下是Boilerplate中使用的标准代码。只需将“视觉隐藏”类分配给您的标题即可。它们不会在屏幕上显示，但屏幕阅读器将能够阅读它们。

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

在保留屏幕阅读器可访问性的同时可视化删除<h1>元素，并避免搜索引擎受到惩罚

3 个答案: