245 lines
8.5 KiB
Markdown
245 lines
8.5 KiB
Markdown
|
---
|
|||
|
|
id: 587d778d367417b2b2512aaa
|
|||
|
|
title: Зробіть елементи видимими тільки програми екранного зчитування за допомогою Custom 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, які це здійснюють:
|
|||
|
|
|
|||
|
|
```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>Нульові значення для піксельних розмірів, зокрема <code>width: 0px; height: 0px;</code> вилучають цей елемент з вашого документа, тобто програма для читання з екрана буде його ігнорувати</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Camper Cat створив просто чудову гістограму для своєї навчальної сторінки, а для користувачів із вадами зору подав інформацію у таблиці. Таблиця вже має клас `sr-only`, але правила CSS ще не заповнені. Надайте елементу `position` значення `absolute`, елементу the `left` - значення `-10000px`, а елементам `width` і `height` - значення `1px`.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш код має встановити властивість `position` класу `sr-only` на значення `absolute`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('.sr-only').css('position') == 'absolute');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код має встановити властивість `left` класу `sr-only` на значення `-10000px`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('.sr-only').css('left') == '-10000px');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код має встановити властивість `width` класу `sr-only` на значення `1` піксель.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/width:\s*?1px/gi));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код має встановити властивість `height` класу `sr-only` на значення `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>
|
|||
|
|
```
|