WCAG 1.2.5: الوصف الصوتي (مسجّل مسبقًا)

ماذا تعني هذه القاعدة

\n

WCAG 1.2.5 — الوصف الصوتي (مُسجَّل مسبقًا) هو معيار نجاح من المستوى AA ضمن المبدأ 1: قابل للإدراك. يتطلب هذا المعيار توفير وصف صوتي لجميع الوسائط المتزامنة المسجَّلة مسبقًا التي تحتوي على فيديو. الوصف الصوتي هو مسار سردي يُضاف إلى الصوت الأساسي للفيديو يصف المعلومات البصرية المهمة — مثل الأفعال، وتغيّر المشاهد، والنص الظاهر على الشاشة، وتعبيرات الوجه، والعناصر البصرية الأخرى — التي لا يتم توصيلها من خلال الحوار أو الصوت الموجود.

\n

ينطبق هذا المعيار على الوسائط المتزامنة، والتي يعرّفها WCAG على أنها محتوى يجمع بين مسارات الصوت والفيديو المتزامنة مع بعضها أو مع مكوّنات تفاعلية تعتمد على الزمن. يشمل ذلك دروس الفيديو التعليمية، والأفلام الإرشادية، والندوات المسجَّلة عبر الويب، ومقاطع الفيديو الترويجية، وعروض المنتجات، والنشرات الإخبارية. لا ينطبق هذا المعيار على المحتوى الصوتي فقط، أو المحتوى المرئي فقط (الذي تتم معالجته بشكل منفصل في 1.2.1)، أو البث المباشر للفيديو (الذي يغطيه، إن وُجد، المعيار 1.2.6 في المستوى AAA).

\n

لتحقيق الامتثال، يجب أن يتوفر لكل فيديو مسجَّل مسبقًا يحتوي على صوت إما مسار وصف صوتي إضافي يمكن للمستخدم تفعيله، أو نسخة موسَّعة من الفيديو مع وصف صوتي حيث تم إدراج فواصل زمنية للسماح للراوي بوقت كافٍ لوصف المحتوى البصري المعقّد. بديلًا عن ذلك، إذا كان مسار الصوت الحالي ينقل بالفعل كل المعلومات البصرية الموجودة في الفيديو بالكامل — أي لا يحدث أي شيء بصري ذو معنى لا يتم وصفه في السرد أو الحوار الحالي — فلن تكون هناك حاجة إلى وصف صوتي إضافي.

\n

يحدث الإخفاق عندما تُقدَّم معلومات بصرية ضرورية لفهم محتوى الفيديو حصريًا عبر مسار الصورة دون أي وصف لفظي مقابل. على سبيل المثال، يفشل فيديو تدريبي يُظهر مقدّمًا ينقر عبر خطوات برنامج على الشاشة بينما يقول فقط "انقر هنا، ثم اختر هذا الخيار" في تلبية هذا المعيار، لأن المستخدم الكفيف الذي يستمع إلى مسار الصوت لن يكون لديه أي طريقة لمعرفة أي عنصر من واجهة المستخدم يتم النقر عليه أو ما الذي يتم اختياره.

\n

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

\n\n

لماذا يهم ذلك

\n

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

\n

فكّر في سيناريو واقعي ملموس: ينشر بنك تركي فيديو تعليميًا حول كيفية إعداد المصادقة الثنائية في تطبيقه للهاتف المحمول. يُظهر الفيديو كل شاشة من شاشات التطبيق بالتسلسل، مع راوي يقول عبارات مثل "الآن اضغط على أيقونة الإعدادات" أو "سترى رسالة تأكيد". بدون وصف صوتي، لا يستطيع العميل الكفيف الذي يستخدم قارئ شاشة تحديد مكان وجود أيقونة الإعدادات بصريًا، أو ما الذي تقوله رسالة التأكيد، أو كيف تبدو الشاشات. يتم استبعاده فعليًا من الدرس الذاتي الخدمة وقد يضطر إلى الاتصال بخدمة العملاء — مما يسبب احتكاكًا وتكلفة وتجربة مستخدم أقل جودة.

\n

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

\n

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

\n\n

قواعد Axe-core ذات الصلة

\n

يتطلب WCAG 1.2.5 إجراء اختبار يدوي. لا يمكن للأدوات الآلية مثل axe-core أن تحدد برمجيًا ما إذا كان الوصف الصوتي الموجود في فيديو ما دقيقًا أو كافيًا أو ذا معنى — فهذا الحكم يتطلب مراجعًا بشريًا يمكنه مشاهدة الفيديو وتقييم ما إذا كانت جميع المعلومات البصرية يتم توصيلها عبر الصوت. لا توجد قاعدة في axe-core يمكنها تلقائيًا الإشارة إلى غياب مسار وصف صوتي أو عدم كفايته.

\n

\n
• مراجعة يدوية مطلوبة — تدقيق المحتوى البصري: يجب على مختبِر بشري مشاهدة الفيديو كاملًا مع كتم الشاشة (أو مع تفعيل مسار الوصف الصوتي فقط) وتقييم ما إذا كانت جميع المعلومات البصرية فقط — بما في ذلك النص الظاهر على الشاشة، وأفعال المتحدث، وتغيّر المشاهد، والمخططات، والرسوم البيانية، والإشارات غير اللفظية — يتم نقلها بشكل كافٍ. لا يمكن للأدوات الآلية تحليل المعنى الدلالي لإطار فيديو أو تقييم ما إذا كان السرد يتوافق مع ما يُعرض بصريًا.
\n
• مراجعة يدوية مطلوبة — كشف المسار: بينما يمكن لـ axe-core التحقق من وجود عنصر <track> مع kind='descriptions' على عنصر <video>، لا يمكنه التحقق مما إذا كان ملف مسار الوصف يحتوي فعليًا على أوصاف ذات معنى ودقيقة. قد يحتوي الفيديو على مسار أوصاف فارغ، أو هراء مولَّد آليًا، أو غير متزامن — وكل ذلك قد يجتاز الكشف الآلي لكنه يفشل المعيار في الواقع.
\n
• مراجعة يدوية مطلوبة — التحقق من النسخة البديلة: بعض التطبيقات توفّر الوصف الصوتي من خلال تقديم عنوان URL منفصل أو نسخة أخرى من الفيديو مع دمج الوصف في مسار الصوت الرئيسي. لا تملك الأدوات الآلية أي طريقة لاكتشاف وجود نسخة بديلة من ملف الفيديو أو الانتقال إليها إذا كانت مرتبطة في مكان آخر على الصفحة.
\n

\n\n

كيفية الاختبار

\n

\n
1. تحديد جميع الوسائط المتزامنة المسجَّلة مسبقًا على الصفحة. افحص الصفحة بحثًا عن عناصر <video>، وإطارات iframes مضمَّنة (YouTube، Vimeo، مشغلات الأطراف الثالثة)، وأي تطبيقات لمشغلات فيديو مخصّصة. دوّن كل فيديو يحتوي على مسارات صوت وفيديو معًا وهو مسجَّل مسبقًا وليس مباشرًا.
\n
2. تشغيل فحص آلي باستخدام axe DevTools أو Lighthouse. افتح أدوات المطوّرين في المتصفح، وشغّل axe DevTools على الصفحة، وفلتر النتائج لأي قواعد متعلقة بعناصر الفيديو أو الوسائط. قد تكشف الفحوصات الآلية عن عناصر <track> مفقودة أو أدوار ARIA في مشغلات الفيديو المخصّصة، لكنها لن تؤكد كفاية الوصف الصوتي. تعامل مع النتائج الآلية كنقطة بداية فقط.
\n
3. مشاهدة كل فيديو مع حجب الشاشة أو إغماض العينين. استمع فقط إلى الصوت — بما في ذلك أي مسار وصف صوتي إذا كان متوفرًا. اسأل نفسك: هل يتم توصيل كل جزء من المعلومات البصرية ذات المعنى عبر الصوت؟ هل يمكنك متابعة السرد كاملًا، وفهم جميع الأفعال على الشاشة، وتحديد كل النصوص والرسومات المعروضة من الصوت وحده؟
\n
4. التحقق من وجود مسار وصف صوتي. افحص عناصر التحكم في مشغّل الفيديو بحثًا عن زر أو قائمة تتيح تفعيل الوصف الصوتي. بالنسبة لفيديو HTML5، افحص DOM بحثًا عن عنصر <track kind='descriptions'>. فعّل مسار الأوصاف وتحقق من أنه يقدّم سردًا متزامنًا ودقيقًا للمحتوى البصري.
\n
5. التحقق من وجود نسخة بديلة موصوفة. ابحث عن رابط أو زر مميز بوضوح بجوار الفيديو يحمل نصًا مثل "مشاهدة مع وصف صوتي" أو "نسخة موصوفة صوتيًا". اتبع هذا الرابط وتحقق من أن النسخة البديلة تحتوي على وصف صوتي دقيق وكامل مدمج في مسار الصوت.
\n
6. الاختبار باستخدام قارئ شاشة. باستخدام NVDA مع Firefox، أو VoiceOver مع Safari، أو JAWS مع Chrome، انتقل إلى عنصر الفيديو. تأكد من أن قارئ الشاشة يعلن عن عنصر التحكم في الفيديو وأي خيار لمسار الوصف المرتبط به. شغّل الفيديو وتحقق من أن مسار الوصف مسموع ومتزامن. تأكد من أن قارئ الشاشة لا يحجب أو يتعارض مع صوت الوصف.
\n
7. تقييم حالة الاستثناء. إذا تم تقديم الفيديو كبديل وسائطي لوثيقة نصية، فتحقق من أنه مميز على هذا النحو مباشرة بجوار الفيديو. إذا تم تمييزه بشكل صحيح ويمثّل بالكامل نفس محتوى النص، فلن يكون الوصف الصوتي مطلوبًا — لكن تأكد من أن هذا التمييز موجود وواضح لا لبس فيه.
\n

\n\n

كيفية الإصلاح

\n\n

فيديو بدون مسار وصف صوتي — غير صحيح

\n

<!-- A training video with significant visual content and no audio description -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n</video>\n<!-- Fails 1.2.5: subtitles are present but no descriptions track exists.\n     Visual-only information in the video is inaccessible to blind users. -->

\n\n

فيديو مع إضافة مسار وصف صوتي — صحيح

\n

<!-- A training video with an audio description track provided -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n  <!-- Audio description track added with kind='descriptions' -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- Passes 1.2.5: screen readers and description-aware players can\n     activate the descriptions track to narrate visual content for blind users. -->

\n\n

فيديو لطرف ثالث مضمَّن بدون بديل موصوف — غير صحيح

\n

<!-- A YouTube embed with no accessible described alternative -->\n<iframe\n  width='560'\n  height='315'\n  src='https://www.youtube.com/embed/VIDEOID'\n  title='Product Demo'\n  allowfullscreen>\n</iframe>\n<!-- Fails 1.2.5: if the YouTube video itself does not have an audio\n     description track uploaded, there is no way for blind users to\n     access visual-only content in the video. -->

\n\n

فيديو مضمَّن مع بديل موصوف مميز بوضوح — صحيح

\n

<!-- A YouTube embed accompanied by a link to an audio described version -->\n<figure>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/VIDEOID'\n    title='Product Demo'\n    allowfullscreen>\n  </iframe>\n  <figcaption>\n    Product Demo — visual walkthrough of the onboarding flow.\n    <!-- Alternative described version linked directly below the video -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Watch the audio described version of this video\n    </a>\n  </figcaption>\n</figure>\n<!-- Passes 1.2.5: a clearly labeled alternative with audio description\n     is provided, allowing blind users to access the same content. -->

\n\n

مشغّل فيديو مخصّص يفتقر إلى زر تفعيل الوصف — غير صحيح

\n

<!-- Custom video player with no mechanism to enable audio description -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n  </div>\n</div>\n<!-- Fails 1.2.5: no descriptions track, no AD toggle, no alternative. -->

\n\n

مشغّل فيديو مخصّص مع زر تفعيل الوصف الصوتي — صحيح

\n

<!-- Custom video player with accessible audio description toggle -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n    <!-- Descriptions track linked; player JS activates it on toggle -->\n    <track id='desc-track' kind='descriptions' src='tutorial-desc.vtt'\n           srclang='en' label='Audio Description'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n    <!-- Accessible toggle button for audio description -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- Passes 1.2.5: a descriptions track is present and the custom player\n     exposes an accessible toggle so users can enable it. Player JS\n     must set aria-pressed='true' when activated and enable the track. -->

\n\n

الأخطاء الشائعة

\n

\n\n

(تم اقتطاع المحتوى بسبب حد الرموز — يرجى إعادة محاولة هذه المقالة.)