freeCodeCamp/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using...

2.9 KiB

id title challengeType videoUrl localeTitle
587d778f367417b2b2512aae Give Links Meaning by Using Descriptive Link Text 0 إعطاء الارتباطات المعنوية باستخدام نص الوصلة الوصفية

Description

يتوفر لدى مستخدمي قارئ الشاشة خيارات مختلفة لنوع المحتوى الذي يقرأه جهازهم. ويشمل ذلك تخطي (أو) عناصر المعالم ، أو القفز إلى المحتوى الرئيسي ، أو الحصول على ملخص للصفحة من العناوين. خيار آخر هو فقط سماع الروابط المتاحة على الصفحة. تقوم قارئات الشاشة بذلك عن طريق قراءة نص الرابط ، أو ما بين علامات الربط ( a ). إن وجود قائمة من الروابط "انقر هنا" أو "اقرأ المزيد" ليس مفيدًا. بدلا من ذلك، يجب عليك استخدام النص وجيزة ولكن وصفي داخل a العلامات إلى توفير المزيد من معنى لهؤلاء المستخدمين.

Instructions

نص الارتباط الذي يستخدمه Camper Cat ليس وصفيًا للغاية بدون السياق المحيط. قم بتحريك علامة الربط ( a ) بحيث يتم التفاف حول النص "معلومات حول البطاريات" بدلاً من "انقر هنا".

Tests

tests:
  - text: يجب أن تتحرك الشفرة مرساة <code>a</code> العلامات من حول عبارة &quot;اضغط هنا&quot; للالتفاف حول عبارة &quot;معلومات حول بطاريات&quot;.
    testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
  - text: تأكد من <code>a</code> عنصر يحتوي على علامة إغلاق.
    testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'

Challenge Seed

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
  </article>
</body>

Solution

// solution required