WCAG 2.2.2: إيقاف مؤقت، إيقاف، إخفاء

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

ماذا يعني هذا المعيار

المعيار WCAG 2.2.2 (إيقاف مؤقت، إيقاف، إخفاء) هو معيار نجاح من المستوى A ضمن مبدأ إمكانية التشغيل (Operable). وهو ينظم أي محتوى يتحرك أو يومض أو يتم تمريره (scroll) أو يتحدّث تلقائيًا في الصفحة. يضع هذا المعيار مطلبين مميزين اعتمادًا على كيفية سلوك المحتوى:

بالنسبة للمحتوى المتحرك أو اللامع (blinking) أو المتمرير الذي يبدأ تلقائيًا، ويستمر لأكثر من خمس ثوانٍ، ويُعرض إلى جانب محتوى آخر، يجب توفير آلية للمستخدمين لإيقافه مؤقتًا أو إيقافه أو إخفائه. يشمل ذلك حركات CSS، وعروض الشرائح (carousels) المعتمدة على JavaScript، ونصوص marquee، والعناصر اللامعة، وأشرطة الأخبار المتحركة (scrolling tickers)، واللافتات المتحركة.

بالنسبة للمحتوى الذي يتحدّث تلقائيًا (auto-updating) — مثل لوحات النتائج المباشرة، وأشرطة أسعار الأسهم، وخلاصات وسائل التواصل الاجتماعي، أو عناوين الأخبار التي تُحدَّث على فترات — يجب أن يكون بإمكان المستخدمين إيقاف التحديثات مؤقتًا أو إيقافها أو إخفائها أو التحكم في تكرارها.

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

يحدث الإخفاق عندما يوجد أي مما يلي: عنصر <blink> أو خاصية CSS text-decoration: blink لا يمكن إيقافها؛ عنصر <marquee> بدون آلية إيقاف مؤقت؛ عرض شرائح متحرك (carousel) يعمل بلا نهاية دون زر إيقاف مؤقت؛ أداة أخبار تُحدَّث تلقائيًا لا يمكن التحكم بها؛ أو فيديو خلفية يعمل في حلقة دون أي طريقة لإيقافه.

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

لماذا يهم هذا المعيار

المحتوى المتحرك واللامع يخلق عوائق خطيرة لعدة فئات مختلفة من ذوي الإعاقة، وتتراوح العواقب من تشتيت بسيط إلى ضرر طبي حقيقي.

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

الأشخاص الذين لديهم اضطرابات دهليزية (vestibular disorders) — بما في ذلك التهاب المتاهة (labyrinthitis)، والدوار الموضعي الانتيابي الحميد (BPPV)، ومرض Ménière — يمكن أن يعانوا من الغثيان والدوار والارتباك عند تعرضهم لأنواع معينة من الحركة على الشاشة. بالنسبة لهؤلاء المستخدمين، فإن عرض شرائح متكرر أو تأثير تمرير parallax ليس مجرد إزعاج؛ بل يمكن أن يسبب مرضًا جسديًا يجبرهم على مغادرة الصفحة تمامًا. تؤثر الاضطرابات الدهليزية على ما يقدَّر بـ 35% من البالغين فوق سن 40 في الولايات المتحدة وحدها.

الأشخاص الذين لديهم صرع حساس للضوء (photosensitive epilepsy) معرضون لخطر النوبات من المحتوى الذي يومض أو يلمع بترددات معينة. بينما يتناول المعيار WCAG 2.3.1 المحتوى اللامع بشكل أكثر مباشرة، يمكن أن يكون المحتوى اللامع (blinking) الذي يغطيه 2.2.2 عاملًا محفزًا أيضًا. تقدّر منظمة الصحة العالمية أن الصرع يؤثر على حوالي 50 مليون شخص حول العالم.

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

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

إضافة إلى الوصول لذوي الإعاقة، فإن إزالة الحركة غير القابلة للتحكم تحسّن قابلية الاستخدام للجميع، وتقلل العبء المعرفي، ويمكن أن تحسّن إشارات تحسين محركات البحث مثل درجات Core Web Vitals من خلال تقليل تغيّر التخطيط وتنفيذ JavaScript غير الضروري.

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

blink: تتحقق هذه القاعدة من وجود عنصر HTML المهمل <blink> ومن خصائص CSS التي تنتج نصًا لامعًا (تاريخيًا text-decoration: blink). يتسبب عنصر <blink> في وميض النص تشغيلًا وإيقافًا بشكل مستمر دون آلية أصلية للمستخدم لإيقافه. تقوم أداة Axe بوضع علامة على أي حالة من هذا العنصر كخرق لأنه يفشل مباشرة في المعيار 2.2.2 — لا يوجد سيناريو استخدام متوافق لعنصر <blink>. كما تنبّه القاعدة إلى تأثيرات الوميض المعتمدة على CSS حيث لا يمكن إيقاف الحركة مؤقتًا. يكون الكشف الآلي موثوقًا هنا لأن العنصر والخاصية يمكن التعرف عليهما نحويًا في DOM والأنماط المحسوبة.
marquee: تتحقق هذه القاعدة من وجود عنصر HTML <marquee>، الذي يتسبب في تمرير النص أو المحتوى أفقيًا أو عموديًا عبر الشاشة في حلقة مستمرة. لا يحتوي عنصر <marquee> على آلية إيقاف مؤقت مدمجة ومتاحة، وهو عنصر مهمل في HTML5. تقوم أداة Axe بوضع علامة على أي حالة منه كخرق. وكما هو الحال مع <blink>، يكون الكشف مباشرًا لأن العنصر يمكن التعرف عليه نحويًا. ومع ذلك، لا تستطيع الأدوات الآلية التقاط جميع خروقات 2.2.2 — فحركات CSS، وعروض الشرائح المعتمدة على JavaScript، وأدوات AJAX التي تتحدّث تلقائيًا، ومقاطع الفيديو HTML5 التي تعمل في حلقة كلها تتطلب مراجعة يدوية لأن آلية الإيقاف المؤقت (أو غيابها) لا يمكن تحديدها إلا بواسطة مختبِر بشري يقيّم التجربة التفاعلية الكاملة.

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

فحص آلي باستخدام axe DevTools أو Lighthouse: افتح الصفحة في Chrome أو Firefox. افتح أدوات المطور (F12)، وانتقل إلى لوحة axe DevTools أو تدقيق إمكانية الوصول في Lighthouse، ثم نفّذ فحصًا كاملًا. ابحث تحديدًا عن الخروقات الموسومة باسم blink أو marquee في النتائج. ستتضمن كل خرق عقدة DOM، ومستوى التأثير (خطير أو حرج)، ورابطًا لإرشادات المعالجة. لاحظ أن الفحص الآلي النظيف لا يعني الامتثال الكامل — انتقل إلى الخطوات اليدوية.
فحص يدوي لحركات CSS وJavaScript: راجع الصفحة بصريًا بحثًا عن أي محتوى يتحرك أو يتم تمريره أو يومض أو يتحدّث تلقائيًا. لكل حالة، تحقق مما إذا كان هناك عنصر تحكم للإيقاف المؤقت أو الإيقاف أو الإخفاء موجودًا ومرئيًا قبل المحتوى المتحرك أو إلى جانبه. تأكد من إمكانية الوصول إلى عنصر التحكم عبر لوحة المفاتيح (الانتقال إليه باستخدام Tab) وأن الضغط على Enter أو Space يفعّله. تحقق من أن تفعيل عنصر التحكم يوقف الحركة فعليًا ولا يكتفي بتقليل سرعتها.
اختبار باستخدام لوحة المفاتيح فقط: افصل الفأرة. استخدم مفتاح Tab للتنقل في الصفحة بأكملها. تأكد من أنه يمكنك الوصول إلى عنصر التحكم في الإيقاف/الإيقاف المؤقت لكل عنصر متحرك باستخدام لوحة المفاتيح فقط، وأن لعنصر التحكم مؤشر تركيز مرئي. إذا لم تتمكن من الوصول إلى عنصر التحكم، أو إذا كان الوصول إليه يتطلب المرور عبر المحتوى المتحرك أولًا (وهو ما قد يكون مربكًا)، فهذا إخفاق.
اختبار قارئ الشاشة باستخدام NVDA وFirefox: شغّل NVDA، وافتح الصفحة في Firefox، واستمع لأي إعلانات من المناطق الحية تقاطع القراءة. انتقل إلى المحتوى الذي يتحدّث تلقائيًا وتأكد من أن استخدام عنصر التحكم في الإيقاف المؤقت يوقف إعلانات NVDA. اختبر باستخدام JAWS وChrome، وVoiceOver وSafari على macOS، باتباع الإجراء نفسه.
فحص المحتوى الذي يتحدّث تلقائيًا: بالنسبة للمحتوى الذي يتحدّث وفق مؤقّت (خلاصات الأخبار، لوحات المعلومات، لوحات النتائج)، لاحظ فترة التحديث. تأكد من وجود آلية لإيقاف التحديثات مؤقتًا أو للتحكم في تكرارها. قم بتشغيل التحديث يدويًا إن أمكن وتحقق من أن قارئات الشاشة تعلن عنه فقط عندما يختاره المستخدم، وليس بشكل غير طوعي.
اختبار تفضيل تقليل الحركة: في نظام التشغيل لديك، فعّل إعداد إمكانية الوصول "تقليل الحركة" (Reduce Motion). أعد تحميل الصفحة وتحقق من أن الحركات تحترم استعلام الوسائط CSS prefers-reduced-motion. على الرغم من أن هذا ليس مطلوبًا بشكل صارم بواسطة WCAG 2.2.2، إلا أنه تقنية مكملة قوية ومتزايدة التوقع من قبل المدققين.

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

عنصر <marquee> مهمل — غير صحيح

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

عنصر <marquee> مهمل — صحيح

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

عنصر <blink> مهمل — غير صحيح

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

عنصر <blink> مهمل — صحيح

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

عرض شرائح (carousel) يعمل تلقائيًا دون عنصر تحكم للإيقاف — غير صحيح

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

عرض شرائح يعمل تلقائيًا دون عنصر تحكم للإيقاف — صحيح

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

أداة بيانات مباشرة تتحدّث تلقائيًا — غير صحيح

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

أداة بيانات مباشرة تتحدّث تلقائيًا — صحيح

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

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

استخدام عناصر <marquee> أو <blink> في أي مكان في HTML الإنتاجي، حتى لأغراض "ريترو" أو زخرفية — كلا العنصرين مهملان، ولا يحملان أي معنى دلالي، ويخفقان دائمًا في المعيار 2.2.2 دون مسار معالجة سوى الإزالة.
إضافة زر إيقاف مؤقت لا يكون مرئيًا إلا عند تحريك الفأرة فوقه، مما يجعله غير متاح لمستخدمي لوحة المفاتيح فقط الذين يحتاجون إليه أكثر، والذين يتنقلون عادة باستخدام Tab بدلًا من التحويم.
تنفيذ زر إيقاف مؤقت لا يمكن الوصول إليه بمفتاح Tab قبل المحتوى المتحرك في DOM، مما يجبر المستخدمين على التنقل عبر الحركة المربكة قبل أن يتمكنوا من إيقافها.
استخدام animation-play-state: paused في CSS لإيقاف الحركة بصريًا، مع الفشل في تعطيل حلقة setInterval أو requestAnimationFrame في JavaScript التي تقود تحديثات المحتوى — يتوقف المظهر البصري لكن DOM يستمر في التغيّر، مما يواصل مقاطعة قارئات الشاشة.
تعيين aria-live='polite' على عرض شرائح أو شريط أخبار وتركه نشطًا حتى عندما يضغط المستخدم على زر الإيقاف المؤقت — تستمر المنطقة الحية في الإعلان عن تغييرات DOM لمستخدمي قارئات الشاشة حتى وإن كانت الحركة البصرية متوقفة.
الاعتماد على autoplay=false في عنصر <video> دون التحقق من السلوك عبر المتصفحات؛ بعض تركيبات المتصفح والإضافات تتجاوز هذه الخاصية، مما يؤدي إلى تشغيل الفيديو تلقائيًا خلافًا لنية المؤلف وتوقع المستخدم.
اعتبار استثناء الخمس ثوانٍ فترة سماح عامة، وبناء عرض شرائح يعرض كل شريحة لمدة أربع ثوانٍ على افتراض أن كل انتقال فردي أقل من خمس ثوانٍ — الحركة ككل مستمرة وتستمر لفترة أطول بكثير من خمس ثوانٍ، لذا لا ينطبق الاستثناء.
توفير عنصر تحكم للإيقاف المؤقت يوقف الحركة لكنه لا يشير بصريًا إلى حالة الإيقاف، مما يترك المستخدمين غير متأكدين مما إذا كان إجراءهم قد أثّر — يجب أن يعكس الزر حالته الحالية، ويفضل استخدام aria-pressed وتحديث تسميته بين "Pause" و"Play".
تطبيق prefers-reduced-motion فقط على انتقالات CSS وتجاهل الحركات المعتمدة على JavaScript التي تعمل بشكل مستقل عن CSS، مما يعني أن المستخدمين الذين فعّلوا إعداد تقليل الحركة على مستوى النظام ما زالوا يواجهون حركة على الصفحة.
وضع عنصر التحكم في الإيقاف المؤقت خارج ترتيب التنقل بلوحة المفاتيح عن طريق تعيين tabindex='-1' أو عن طريق وضعه داخل حاوية ذات display:none تُعرض شرطيًا فقط عبر تفاعل الفأرة — يجب أن يكون عنصر التحكم دائمًا قابلًا للوصول عبر التنقل بلوحة المفاتيح.

العلاقة مع لوائح إمكانية الوصول في تركيا

تضع المذكرة الرئاسية التركية رقم 2025/10، المنشورة في الجريدة الرسمية (Resmî Gazete) ذات الرقم 32933 بتاريخ 21 يونيو 2025، متطلبات إلزامية لإمكانية الوصول على الويب والهاتف المحمول متوافقة مع WCAG 2.2. المعيار WCAG 2.2.2 إيقاف مؤقت، إيقاف، إخفاء هو معيار من المستوى A، ما يعني أنه يقع في أدنى مستوى أساسي من الامتثال وهو إلزامي دون استثناء لجميع الكيانات التي تغطيها المذكرة.

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

تشمل الكيانات التي تغطيها المذكرة طيفًا واسعًا من الخدمات الرقمية التركية: جميع المؤسسات والهيئات الحكومية؛ منصات التجارة الإلكترونية العاملة في تركيا؛ البنوك والمؤسسات المالية؛ المستشفيات ومقدمو الرعاية الصحية الخاصون؛ مشغلو الاتصالات الذين لديهم 200,000 مشترك أو أكثر؛ وكالات السفر؛ شركات النقل الخاصة؛ والمدارس الخاصة الحاصلة على ترخيص من وزارة التربية الوطنية (Millî Eğitim Bakanlığı, MoNE).

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

إضافة إلى الالتزام القانوني، تتماشى قوانين إمكانية الوصول التركية مع الاتجاه الأوروبي الأوسع الذي تمثله توجيهات الويب الخاصة بإمكانية الوصول في الاتحاد الأوروبي (EU Web Accessibility Directive) وقانون إمكانية الوصول الأوروبي (EAA). ومع توسع الشركات التركية في الأسواق الأوروبية أو تقديمها خدمات للمستخدمين الأوروبيين، يصبح الامتثال لمستوى A من WCAG 2.2 — بما في ذلك المعيار 2.2.2 — مطلب امتثال مزدوج. لذلك، فإن التنفيذ الصحيح لمعيار إيقاف مؤقت، إيقاف، إخفاء هو في آن واحد ضرورة قانونية محلية وأصل استراتيجي للمنظمات التركية ذات الحضور الرقمي الدولي.