--- id: 587d778d367417b2b2512aaa title: Make Elements Only Visible to a Screen Reader by Using Custom CSS challengeType: 0 videoUrl: '' localeTitle: 使用自定义CSS使元素仅对屏幕阅读器可见 --- ## Description
您是否注意到目前为止所有应用的可访问性问题都没有使用任何CSS？这是为了展示逻辑文档大纲的重要性，并在介绍视觉设计方面之前在您的内容周围使用具有语义意义的标记。但是，当您想要在视觉上隐藏仅供屏幕阅读器使用的内容时，CSS的魔力还可以改善页面的可访问性。当信息采用可视格式（如图表）时会发生这种情况，但屏幕阅读器用户需要使用替代演示（如表格）来访问数据。 CSS用于将屏幕阅读器元素定位在浏览器窗口的可视区域之外。这是完成此任务的CSS规则的示例：
.sr-only {
位置：绝对;
左：-10000px;
宽度：1px;
身高：1px;
顶部：汽车;
溢出：隐藏;
}
注意
以下CSS方法不会做同样的事情：
## Instructions
Camper Cat为他​​的培训页面创建了一个非常酷的堆积条形图，并将数据放入一个表格中，供视障用户使用。该表已经有一个sr-only类，但CSS规则尚未填写。给position一个绝对值， left是-10000px值， width和height都是1px值。
## Tests
```yml tests: - text: 您的代码应该将sr-only类的position属性设置为absolute的值。 testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the position property of the sr-only class to a value of absolute.");' - text: 您的代码应将sr-only类的left属性设置为-10000px的值。 testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the left property of the sr-only class to a value of -10000px.");' - text: 您的代码应将sr-only类的width属性设置为1像素的值。 testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the width property of the sr-only class to a value of 1 pixel.");' - text: 您的代码应将sr-only类的height属性设置为1像素的值。 testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the height property of the sr-only class to a value of 1 pixel.");' ```
## Challenge Seed
```html

Training

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?

```
## Solution
```js // solution required ```