跳到主要内容

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;)来避免这个问题。

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

学习笔记
|||
说点什么吧
 
100:0
鲤跃网
http://www.sunycode.com
讲文明、要和谐
提交学习笔记
0 学习笔记
  • 还没有学习笔记,快来抢沙发吧!