--- id: 587d778a367417b2b2512aa5 title: Improve Chart Accessibility with the figure Element challengeType: 0 videoUrl: '' localeTitle: تحسين إمكانية الوصول المخطط مع عنصر الشكل --- ## Description
قدم HTML5 عنصر figure ، جنبا إلى جنب مع figcaption ذات الصلة. تستخدم هذه العناصر معًا لتمثيل عرض مرئي (مثل صورة أو مخطط أو مخطط) مع التسمية التوضيحية. ويعطي هذا دفعة من إمكانية الوصول ذات شقين عن طريق كل من المحتوى ذي الصلة من حيث تجميع المحتوى ، وتقديم بديل نصي يشرح figure . بالنسبة إلى عمليات التمثيل البصري للبيانات مثل المخططات ، يمكن استخدام التسمية التوضيحية للإحاطة علما بالاتجاهات أو الاستنتاجات للمستخدمين الذين يعانون من إعاقات بصرية. ويغطي تحد آخر كيفية نقل إصدار جدول من البيانات خارج الشاشة (باستخدام CSS) لمستخدمي قارئ الشاشة. في ما يلي مثال - لاحظ أن figcaption داخل علامات figure ويمكن دمجه مع عناصر أخرى:
<الرقم>
<img src = "roundhouseDestruction.jpeg" alt = "Photo of Camper Cat executing a roundhouse kick">
<BR>
<figcaption>
يوضح سيد كامبر القط شكل مناسب للركلة المستديرة.
</ figcaption>
</ الرقم>
## Instructions
تعمل لعبة Camper Cat بجد لإنشاء مخطط شريطي مكدّس يعرض مقدار الوقت في الأسبوع لإنفاق التدريب على التسلل والمكافحة والأسلحة. ساعده في تنظيم صفحته بشكل أفضل عن طريق تغيير علامة div التي استخدمها في علامة figure ، والعلامة p التي تحيط figcaption التوضيحية إلى علامة figcaption .
## Tests
```yml tests: - text: يجب أن يحتوي figure علامة figure واحدة. testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");' - text: يجب أن تحتوي figcaption علامة figcaption واحدة. testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");' - text: يجب ألا تحتوي شفرتك على أي علامات div . testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - text: يجب ألا تحتوي شفرتك على أي علامات p . testString: 'assert($("p").length == 0, "Your code should not have any p tags.");' - text: يجب أن يكون figcaption طفل علامة figure . testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");' - text: تأكد من أن عنصر figure الخاص بك به علامة إغلاق. testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length, "Make sure your figure element has a closing tag.");' ```
## Challenge Seed
```html

Training


Breakdown per week of time to spend training in stealth, combat, and weapons.

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 ```