245 lines
6.9 KiB
Markdown
245 lines
6.9 KiB
Markdown
---
|
||
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 解決方案與上面的結果不同：
|
||
|
||
<ul>
|
||
<li><code>display: none;</code> 或 <code>visibility: hidden;</code> 會把內容徹底隱藏起來，屏幕閱讀器也無法獲取這些內容。</li>
|
||
<li>如果把值設置爲 0px，如 <code>width: 0px; height: 0px;</code>，意味着讓元素脫離文檔流，這樣做同樣也會讓屏幕閱讀器忽略此元素。</li>
|
||
</ul>
|
||
|
||
# --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
|
||
<head>
|
||
<style>
|
||
.sr-only {
|
||
position: ;
|
||
left: ;
|
||
width: ;
|
||
height: ;
|
||
top: auto;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Training</h1>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||
<li><a href="#combat">Combat</a></li>
|
||
<li><a href="#weapons">Weapons</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<section>
|
||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||
<figure>
|
||
<!-- Stacked bar chart of weekly training -->
|
||
<p>[Stacked bar chart]</p>
|
||
<br />
|
||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||
</figure>
|
||
<table class="sr-only">
|
||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th scope="col">Stealth & Agility</th>
|
||
<th scope="col">Combat</th>
|
||
<th scope="col">Weapons</th>
|
||
<th scope="col">Total</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Week One</th>
|
||
<td>3</td>
|
||
<td>5</td>
|
||
<td>2</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Week Two</th>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>3</td>
|
||
<td>12</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Week Three</th>
|
||
<td>4</td>
|
||
<td>6</td>
|
||
<td>3</td>
|
||
<td>13</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
<section id="stealth">
|
||
<h2>Stealth & Agility Training</h2>
|
||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||
</section>
|
||
<section id="combat">
|
||
<h2>Combat Training</h2>
|
||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||
</section>
|
||
<section id="weapons">
|
||
<h2>Weapons Training</h2>
|
||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||
</section>
|
||
<footer>© 2018 Camper Cat</footer>
|
||
</body>
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
<head>
|
||
<style>
|
||
.sr-only {
|
||
position: absolute;
|
||
left: -10000px;
|
||
width: 1px;
|
||
height: 1px;
|
||
top: auto;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Training</h1>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||
<li><a href="#combat">Combat</a></li>
|
||
<li><a href="#weapons">Weapons</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<section>
|
||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||
<figure>
|
||
<!-- Stacked bar chart of weekly training -->
|
||
<p>[Stacked bar chart]</p>
|
||
<br />
|
||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||
</figure>
|
||
<table class="sr-only">
|
||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th scope="col">Stealth & Agility</th>
|
||
<th scope="col">Combat</th>
|
||
<th scope="col">Weapons</th>
|
||
<th scope="col">Total</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Week One</th>
|
||
<td>3</td>
|
||
<td>5</td>
|
||
<td>2</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Week Two</th>
|
||
<td>4</td>
|
||
<td>5</td>
|
||
<td>3</td>
|
||
<td>12</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Week Three</th>
|
||
<td>4</td>
|
||
<td>6</td>
|
||
<td>3</td>
|
||
<td>13</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
<section id="stealth">
|
||
<h2>Stealth & Agility Training</h2>
|
||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||
</section>
|
||
<section id="combat">
|
||
<h2>Combat Training</h2>
|
||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||
</section>
|
||
<section id="weapons">
|
||
<h2>Weapons Training</h2>
|
||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||
</section>
|
||
<footer>© 2018 Camper Cat</footer>
|
||
</body>
|
||
```
|