5.2 KiB
5.2 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7789367417b2b2512aa4 | Improve Accessibility of Audio Content with the audio Element | 0 | تحسين إمكانية الوصول إلى المحتوى الصوتي باستخدام عنصر الصوت |
Description
audio
معنىً دلاليًا عندما يلف محتوى دفق الصوت أو الصوت في الترميز. يحتاج المحتوى الصوتي أيضًا إلى بديل نصي ليكون متاحًا للأشخاص الصم أو ضعاف السمع. يمكن إجراء ذلك باستخدام نص مجاور على الصفحة أو رابط إلى نص. تدعم علامة audio
سمة controls
. يعرض هذا التشغيل الافتراضي للمتصفح والإيقاف المؤقت وعناصر التحكم الأخرى ، ويدعم وظيفة لوحة المفاتيح. هذه سمة منطقية ، بمعنى أنها لا تحتاج إلى قيمة ، حيث يؤدي وجودها على العلامة إلى تشغيل الإعداد. إليك مثال على ذلك: <audio id = "meowClip" controls>ملحوظة
<source src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" type = "audio / ogg" />
</ الصوت>
عادةً ما يحتوي محتوى الوسائط المتعددة على مكونات مرئية وسمعية. يحتاج إلى تسميات توضيحية متزامنة وملف نصي حتى يتمكن المستخدمون الذين يعانون من إعاقات بصرية و / أو سمعية من الوصول إليه. بشكل عام ، لا يتحمل مطور الويب مسؤولية إنشاء التسميات التوضيحية أو النص ، ولكن يجب أن يعرف كيفية تضمينها.
Instructions
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