freeCodeCamp

5.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7789367417b2b2512aa4	Improve Accessibility of Audio Content with the audio Element	0		تحسين إمكانية الوصول إلى المحتوى الصوتي باستخدام عنصر الصوت

Description

يمنح عنصر HTML5 audio معنىً دلاليًا عندما يلف محتوى دفق الصوت أو الصوت في الترميز. يحتاج المحتوى الصوتي أيضًا إلى بديل نصي ليكون متاحًا للأشخاص الصم أو ضعاف السمع. يمكن إجراء ذلك باستخدام نص مجاور على الصفحة أو رابط إلى نص. تدعم علامة audio سمة controls . يعرض هذا التشغيل الافتراضي للمتصفح والإيقاف المؤقت وعناصر التحكم الأخرى ، ويدعم وظيفة لوحة المفاتيح. هذه سمة منطقية ، بمعنى أنها لا تحتاج إلى قيمة ، حيث يؤدي وجودها على العلامة إلى تشغيل الإعداد. إليك مثال على ذلك:

<audio id = "meowClip" controls>
<source src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" type = "audio / ogg" />
</ الصوت>

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

Instructions

حان الوقت للاستراحة من Camper Cat ومقابلة زميل Zperiax (zersiax) ، وهو بطل إمكانية الوصول ومستخدم قارئ الشاشة. للاستماع إلى مقطع قارئ الشاشة الخاص به أثناء العمل ، أضف عنصرًا audio بعد p . قم بتضمين سمة controls . ثم ضع علامة source داخل علامات audio مع تعيين سمة src إلى "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type تعيين السمة على "audio / mpeg". ملحوظة
قد يبدو المقطع الصوتي سريعًا ويصعب فهمه ، ولكن هذه سرعة عادية لمستخدمي قارئ الشاشة.

Tests

tests:
  - text: يجب أن تحتوي شفرتك على علامة <code>audio</code> واحدة.
    testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
  - text: تأكد من أن عنصر <code>audio</code> الخاص بك يحتوي على علامة إغلاق.
    testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
  - text: يجب أن تحتوي علامة <code>audio</code> سمة <code>controls</code> .
    testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
  - text: يجب أن تحتوي الشفرة على علامة <code>source</code> واحدة.
    testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
  - text: يجب أن تكون علامة <code>source</code> الخاصة بك داخل علامات <code>audio</code> .
    testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
  - text: يجب أن تتطابق قيمة السمة <code>src</code> على العلامة <code>source</code> مع الارتباط الموجود في الإرشادات بالضبط.
    testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
  - text: يجب أن تحتوي شفرتك على سمة <code>type</code> على العلامة <code>source</code> بقيمة صوت / mpeg.
    testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'

Challenge Seed

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>



  </main>
</body>

Solution

// solution required

5.2 KiB Raw Blame History