CSS如何隐藏网页内容，只让它们在屏幕阅读器上使用？

在CSS中，你可以使用aria-hidden属性和position: absolute;或clip: rect(1px, 1px, 1px, 1px);来隐藏网页内容，同时使这些内容在屏幕阅读器上可用。

以下是一些例子：

方法一：使用aria-hidden属性

你可以使用aria-hidden属性来告诉屏幕阅读器忽略某些元素。例如：

<div aria-hidden="true">
  这部分内容将不会在屏幕上显示，但会在屏幕阅读器上读出。
</div>

请注意，aria-hidden属性只能影响屏幕阅读器，不会影响普通用户的视觉体验。

方法二：使用position: absolute;和clip: rect(1px, 1px, 1px, 1px);

另一种方法是使用position: absolute;和clip: rect(1px, 1px, 1px, 1px);将元素移动到屏幕不可见的位置，但保留其在DOM中的位置，以便屏幕阅读器可以读取它。例如：

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

然后在HTML中使用这个类：

<div class="screen-reader-only">
  这部分内容将不会在屏幕上显示，但会在屏幕阅读器上读出。
</div>

这种方法的问题是，如果元素是内联元素（如<span>），它可能会影响到页面的布局。因此，你可能需要将元素转换为块级元素（如<div>），或者添加适当的display属性（如display: inline-block;）来避免这个问题。

总的来说，这两种方法都可以达到在屏幕上隐藏内容，但在屏幕阅读器上使其可用的效果。你可以根据自己的需要选择适合的方法。