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