---
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 التي تحقق ذلك:
display: none; أو visibility: hidden; لإخفاء المحتوى للجميع ، بما في ذلك مستخدمي قارئ الشاشة
قيم الصفر للأحجام بكسل ، مثل width: 0px; height: 0px; يزيل هذا العنصر من تدفق المستند ، مما يعني أن قارئي الشاشة سيتجاهله
## Instructions
أنشأ كامبر كات مخططًا شريطيًا رائعًا جدًا لصفحته التدريبية ، ووضع البيانات في جدول لمستخدمي المعاقين بصريا. يحتوي الجدول بالفعل على فئة sr-only ، ولكن لا يتم ملء قواعد CSS حتى الآن. امنح position قيمة مطلقة ، والقيمة left من -10000px ، widthheight لكل من قيم 1px.
## Tests
```yml
tests:
- text: يجب أن تقوم التعليمات البرمجية الخاصة بك بتعيين خاصية position للفئة sr-only إلى قيمة مطلقة.
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 بتعيين خاصية 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?