---
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
videoUrl: https://scrimba.com/c/cJ8QGkhJ
forumTopicId: 301020
localeTitle: Сделать элементы доступными только для чтения с экрана с помощью пользовательского CSS
---
## Description
Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают:
Заметка Следующие подходы CSS НЕ будут делать то же самое:
display: none; или visibility: hidden; скрывает контент для всех, включая пользователей с экрана
Нулевые значения для размеров пикселей, такие как width: 0px; height: 0px; удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его
## Instructions
Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс sr-only , но правила CSS еще не заполнены. Дайте position абсолютное значение, left значение a -10000px, а также width и height как значения 1px.
## Tests
```yml
tests:
- text: Your code should set the position property of the sr-only class to a value of absolute.
testString: assert($('.sr-only').css('position') == 'absolute');
- text: Your code should set the left property of the sr-only class to a value of -10000px.
testString: assert($('.sr-only').css('left') == '-10000px');
- text: Your code should set the width property of the sr-only class to a value of 1 pixel.
testString: assert(code.match(/width:\s*?1px/gi));
- text: Your code should set the height property of the sr-only class to a value of 1 pixel.
testString: assert(code.match(/height:\s*?1px/gi));
```
## 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
```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?