---
id: 587d778d367417b2b2512aaa
title: 使用自定義 CSS 讓元素僅對屏幕閱讀器可見
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-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` class，但是還沒有添加 CSS 規則。 設置 `position` 的值爲 `absolute`，`left` 的值爲 `-10000px`，`width` 和 `height` 的值均爲 `1px`。
# --hints--
設置 `sr-only` class 的 `position` 屬性值爲 `absolute`。
```js
assert($('.sr-only').css('position') == 'absolute');
```
設置 `sr-only` class 的 `left` 屬性值爲`-10000px`。
```js
assert($('.sr-only').css('left') == '-10000px');
```
設置 `sr-only` class 的 `width` 屬性值爲 `1` 像素。
```js
assert(code.match(/width:\s*?1px/gi));
```
設置 `sr-only` class 的 `height` 屬性值爲 `1` 像素。
```js
assert(code.match(/height:\s*?1px/gi));
```
# --seed--
## --seed-contents--
```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?
```
# --solutions--
```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?
```