WCAG 1.2.4: التسميات التوضيحية (مباشر)

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

\n

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

\n

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

\n

ما الذي يُعد اجتيازًا: يجتاز البث المباشر هذا المعيار عندما تكون التسميات التوضيحية الفورية المتزامنة والدقيقة مرئية للمستخدم أثناء التشغيل. يجب أن تمثل التسميات التوضيحية كل الحوار والمعلومات الصوتية غير الكلامية ذات الصلة (مثل "[تصفيق]" أو "[صوت إنذار]"). تشمل الأساليب الشائعة CART (Communication Access Realtime Translation) التي يقدمها مُفرِّغ محترف للتسميات التوضيحية، أو التسميات التوضيحية المعتمدة على التعرف التلقائي على الكلام (ASR) من خدمة بث مباشر مؤهلة للتسميات التوضيحية، أو تكاملات من جهات خارجية مثل تلك التي توفرها منصات البث.

\n

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

\n

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

\n

ينطبق هذا المعيار على جميع الوسائط المتزامنة المنشورة على الويب — بغض النظر عما إذا كان الفيديو قد أُنتج مسبقًا أو كان مباشرًا بالفعل. إعادة بث ندوة عبر الويب مسجلة مسبقًا كما لو كانت مباشرة تظل خاضعة للبند 1.2.3 أو 1.2.5، لكن البث الفعلي في الوقت الحقيقي يندرج بشكل واضح تحت 1.2.4.

\n\n

لماذا يهم

\n

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

\n

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

\n

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

\n

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

\n\n

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

\n

يتطلب معيار WCAG 1.2.4 إجراء اختبار يدوي. لا يمكن لأي قاعدة آلية في axe-core اكتشاف وجود التسميات التوضيحية المباشرة أو جودتها بشكل موثوق، وهذا تمييز مهم يجب فهمه عند التخطيط لاستراتيجية تدقيق إمكانية الوصول لديك.

\n

\n
• يتطلب اختبارًا يدويًا — وجود التسميات التوضيحية المباشرة: يمكن للأدوات الآلية مثل axe-core فحص DOM بحثًا عن وجود عنصر <track> مع kind='captions' على عنصر <video>، لكن البثوث المباشرة نادرًا ما تُقدَّم عبر عنصر HTML <video> بسيط مع <track>. عادةً ما تستخدم تنسيقات معدل البت التكيفي (HLS, DASH) التي تُقدَّم من خلال مشغلات تعتمد على JavaScript مثل Video.js أو JW Player أو مشغلات المنصات الأصلية. تقوم هذه المشغلات بعرض التسميات التوضيحية ديناميكيًا بطرق لا يمكن لـ axe-core فحصها داخليًا. لا يمكن لأداة أن تشاهد بثًا مباشرًا في الوقت الفعلي، أو تقيم دقة التسميات التوضيحية، أو تقيس تأخير التزامن، أو تحدد ما إذا كان تراكب التسميات التوضيحية يعكس بالفعل المحتوى المنطوق أم أنه عنصر ثابت.
\n
• يتطلب اختبارًا يدويًا — جودة التسميات التوضيحية ودقتها: حتى لو تمكنت أداة آلية من اكتشاف وجود تغذية للتسميات التوضيحية، فلن يكون لديها أي وسيلة لتقييم ما إذا كانت التسميات دقيقة أو كاملة أو متزامنة بدرجة مقبولة. قد تظهر التسميات التوضيحية المنتَجة بواسطة CART والتسميات التوضيحية التلقائية منخفضة الجودة كلتاهما كـ "تسميات موجودة" بالنسبة للأداة، لكن واحدة فقط منهما تفي بمعيار WCAG 1.2.4. المراجعة البشرية أثناء الحدث المباشر هي الطريقة الوحيدة الموثوقة للتحقق من الامتثال.
\n
• يتطلب اختبارًا يدويًا — إمكانية الوصول إلى التسميات التوضيحية داخل المشغل: لا تستطيع الأدوات الآلية عمومًا تحديد ما إذا كانت عناصر التحكم في التسميات التوضيحية داخل مشغل وسائط مخصص قابلة للوصول عبر لوحة المفاتيح، أو ما إذا كان يمكن للمستخدم تغيير حجم عرض التسميات التوضيحية أو تخصيصه، أو ما إذا كان تنسيق التسميات يلبي احتياجات المستخدمين. تتطلب هذه الجوانب اختبارًا عمليًا باستخدام تنقل فعلي عبر لوحة المفاتيح واستخدام قارئ الشاشة.
\n

\n\n

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

\n

\n
1. تحديد جميع الوسائط المباشرة على الصفحة: راجع الصفحة بحثًا عن أي بثوث فيديو أو صوت مباشرة. تحقق من وجود مشغلات مضمَّنة، أو iframes، أو مكونات وسائط تُحمَّل ديناميكيًا. لاحظ ما إذا كان المحتوى مباشرًا بالفعل (بث في الوقت الحقيقي) أو مسجلاً مسبقًا. لا يندرج تحت 1.2.4 إلا المحتوى الصوتي المباشر فعليًا في وسائط متزامنة.
\n
2. تشغيل فحص آلي باستخدام axe DevTools أو Lighthouse: افتح axe DevTools في Chrome DevTools وشغّل فحصًا كاملًا للصفحة. على الرغم من أن axe لا يمكنه التحقق من التسميات التوضيحية المباشرة، فإنه يمكنه الإشارة إلى مشكلات ذات صلة مثل غياب aria-label على عناصر تحكم مشغل الوسائط، أو أزرار تشغيل/إيقاف غير قابلة للوصول، أو غياب إدارة التركيز. دوّن أي مشكلات تم الإشارة إليها كأدلة داعمة، لكن افهم أن تقرير axe الخالي من الأخطاء لا يؤكد الامتثال للبند 1.2.4.
\n
3. التحقق يدويًا من توفر التسميات التوضيحية أثناء حدث مباشر: ادخل إلى البث المباشر أثناء وجود بث نشط. تحقق مما إذا كانت التسميات التوضيحية معروضة. إذا كان لدى المشغل زر تبديل للتسميات (زر CC)، فعِّله وتأكد من أن التسميات تظهر وتتحدّث في الوقت شبه الفعلي مع حديث المتحدث. تأكد من أن تأخير التسميات مقبول — عادة لا يزيد عن بضع ثوانٍ في حالة CART، أو أكثر قليلًا في حالة ASR.
\n
4. تقييم دقة التسميات التوضيحية: استمع إلى الصوت أثناء قراءة التسميات التوضيحية. تحقق من الكلمات المفقودة، أو الأخطاء المنهجية، أو الإغفالات الكبيرة. لا تحتاج التسميات التوضيحية إلى أن تكون حرفية، لكنها يجب أن تنقل المعنى الكامل للمحتوى المنطوق. لاحظ تحديد هوية المتحدث إذا كان هناك عدة متحدثين — يجب أن تشير التسميات إلى من يتحدث عندما لا يكون ذلك واضحًا.
\n
5. الاختبار باستخدام NVDA + Firefox: انتقل إلى مشغل الوسائط باستخدام مفتاح Tab. تحقق من أن جميع عناصر تحكم المشغل بما في ذلك زر تبديل التسميات التوضيحية يمكن الوصول إليها وتشغيلها عبر لوحة المفاتيح. تأكد من أن NVDA يعلن حالة زر التسميات (مفعّل/معطّل). فعّل التسميات وتحقق من أن نص التسميات يظهر في عنصر DOM يمكن لـ NVDA قراءته إذا انتقل المستخدم إلى المشغل أو حوله.
\n
6. الاختبار باستخدام VoiceOver + Safari (على macOS أو iOS): استخدم إيماءات VoiceOver أو أوامر لوحة المفاتيح للتنقل داخل المشغل. تحقق من أن زر تبديل التسميات يُعلن عنه ويمكن تشغيله. تأكد من أن تغييرات نص التسميات تُعرَض بشكل مناسب داخل المنطقة القابلة للوصول في المشغل.
\n
7. الاختبار باستخدام JAWS + Chrome: انتقل إلى عناصر تحكم المشغل باستخدام Tab. تحقق من أن JAWS يقرأ جميع تسميات عناصر التحكم. تأكد من أن زر تبديل التسميات يُعرَّف كزر مع تسمية وحالة مناسبتين. فعّل التسميات وتحقق من أن عرض التسميات يتحدّث كما هو متوقع.
\n
8. التحقق من تخصيص عرض التسميات التوضيحية: تحقق مما إذا كان المشغل يسمح للمستخدمين بتغيير حجم نص التسميات التوضيحية، أو تغيير الألوان، أو ضبط التباين. على الرغم من أن هذا ليس مطلوبًا بشكل صارم بموجب 1.2.4، فإنه نقطة تقييم لأفضل الممارسات وذو صلة بمعايير WCAG 1.4.
\n

\n\n

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

\n

بث مباشر بدون مسار تسميات توضيحية — غير صحيح

\n

<!-- A live HLS stream embedded with no caption configuration -->\n<video id='live-player' controls autoplay>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <!-- No <track> element and no caption configuration in the player -->\n</video>

\n

بث مباشر مع مسار تسميات توضيحية CART مدمج — صحيح

\n

<!-- Live stream using Video.js with a live WebVTT caption track fed by a CART service.\n     The src for the track points to a live caption endpoint that updates in real time. -->\n<video\n  id='live-player'\n  class='video-js vjs-default-skin'\n  controls\n  autoplay\n  aria-label='Live conference stream with real-time captions'>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <track\n    kind='captions'\n    src='https://captions.example.com/live/event.vtt'\n    srclang='tr'\n    label='Turkish captions'\n    default>\n</video>\n<script>\n  var player = videojs('live-player');\n  // Enable captions by default for accessibility\n  player.ready(function() {\n    player.textTracks()[0].mode = 'showing';\n  });\n</script>

\n

بث مباشر مضمَّن من منصة مع تعطيل التسميات التوضيحية في التضمين — غير صحيح

\n

<!-- YouTube live embed with closed captions explicitly disabled via cc_load_policy=0.\n     This removes the user's ability to enable captions, causing a 1.2.4 failure. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=0'\n  title='Company all-hands live stream'\n  allowfullscreen>\n</iframe>

\n

بث مباشر مضمَّن من منصة مع تمكين التسميات التوضيحية — صحيح

\n

<!-- YouTube live embed with closed captions enabled by default (cc_load_policy=1).\n     The platform's native caption infrastructure is used, which supports live auto-captions\n     and human-reviewed CART when configured in the YouTube Studio settings.\n     The host page also provides a direct link to the captioned stream for users\n     who cannot interact with the iframe. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=1'\n  title='Company all-hands live stream with captions enabled'\n  allowfullscreen>\n</iframe>\n<p>\n  <a href='https://www.youtube.com/watch?v=LIVE_VIDEO_ID'>\n    Watch with captions directly on YouTube\n  </a>\n</p>

\n

مشغل مخصص مع زر تبديل للتسميات التوضيحية غير قابل للوصول عبر لوحة المفاتيح — غير صحيح

\n

<!-- Caption toggle implemented as a non-interactive <div>.\n     Keyboard users and screen reader users cannot activate this control. -->\n<div class='player-controls'>\n  <div class='cc-button' onclick='toggleCaptions()'>CC</div>\n</div>

\n

مشغل مخصص مع زر تبديل للتسميات التوضيحية قابل للوصول — صحيح

\n

<!-- Caption toggle implemented as a <button> with an explicit label and\n     ARIA pressed state so keyboard and screen reader users can discover\n     and operate it. The state updates dynamically when captions are toggled. -->\n<div class='player-controls'>\n  <button\n    class='cc-button'\n    id='captions-toggle'\n    aria-pressed='false'\n    aria-label='Toggle captions'\n    onclick='toggleCaptions(this)'>\n    CC\n  </button>\n</div>\n<script>\n  function toggleCaptions(btn) {\n    var isActive = btn.getAttribute('aria-pressed') === 'true';\n    btn.setAttribute('aria-pressed', String(!isActive));\n    // logic to show/hide the caption track\n  }\n</script>

\n\n

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

\n

\n
• توفير نص مكتوب بعد الحدث بدلًا من تسميات توضيحية فورية: نشر نص مكتوب لحدث مباشر بعد انتهائه لا يفي بالبند 1.2.4. يجب أن تكون التسميات التوضيحية متاحة بالتزامن مع الصوت المباشر، مما يمكّن المستخدمين الصم من متابعة المحتوى في الوقت الفعلي جنبًا إلى جنب مع المستخدمين المبصرين السامعين.
\n\n

(Content truncated due to token limit — please retry this article.)