---
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, которые это делают:
Заметка Следующие подходы 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: Ваш код должен установить для свойства 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
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?