---
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 НЕ будуть робити те саме:
display: none; чи visibility: hidden; приховують вміст від усіх, включаючи користувачів програми зчитування з екрана
Нульові значення для піксельних розмірів, зокрема width: 0px; height: 0px; вилучають цей елемент з вашого документа, тобто програма для читання з екрана буде його ігнорувати
# --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
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?
```
# --solutions--
```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?