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;
)来避免这个问题。
总的来说,这两种方法都可以达到在屏幕上隐藏内容,但在屏幕阅读器上使其可用的效果。你可以根据自己的需要选择适合的方法。
学习笔记
0 学习笔记