---
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
localeTitle: 使用自定义 CSS 让元素仅对屏幕阅读器可见
---
## Description
到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
举个例子：
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
注意：
下面的 CSS 代码与上面的结果不同：
display: none;或visibility: hidden;会把内容彻底隐藏起来，对于屏幕阅读器也不例外。- 如果把值设置为 0px，如
width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。
## Instructions
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个sr-only类，但是还没有添加 CSS 规则。请设置position的值为 absolute，left 的值为 -10000px，width与height的值为 1px。
## Tests
```yml
tests:
- text: 'sr-only类中的position属性的值应为 absolute。'
testString: assert($('.sr-only').css('position') == 'absolute');
- text: 'sr-only类中的left属性的值应为 -10000px。'
testString: assert($('.sr-only').css('left') == '-10000px');
- text: 'sr-only类中的width属性的值应为 1px。'
testString: assert(code.match(/width:\s*?1px/gi));
- text: 'sr-only类中的height属性的值应为 1px。'
testString: assert(code.match(/height:\s*?1px/gi));
```
## Challenge Seed
```html
Master Camper Cat's Beginner Three Week Training Program
[Stacked bar chart]
Breakdown per week of time to spend training in stealth, combat, and weapons.
Hours of Weekly Training in Stealth, Combat, and Weapons
|
Stealth & Agility |
Combat |
Weapons |
Total |
| Week One |
3 |
5 |
2 |
10 |
| Week Two |
4 |
5 |
3 |
12 |
| Week Three |
4 |
6 |
3 |
13 |
Stealth & Agility Training
Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
Dispatch multiple enemies with multithreaded tactics
Goodbye, world: 5 proven ways to knock out an opponent
Weapons Training
Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
```