WCAG 3.2.2: عند الإدخال

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

المعيار WCAG 3.2.2 On Input هو جزء من مبدأ قابلية الفهم (Understandable) ويقع تحت الإرشاد 3.2 المتعلق بقابلية التنبؤ (Predictable). ينص هذا المعيار على أن تغيير إعداد أي مكوّن من مكوّنات واجهة المستخدم يجب ألا يؤدي تلقائيًا إلى تغيير في السياق، ما لم يتم إبلاغ المستخدم مسبقًا بأن مثل هذا السلوك سيحدث.

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

ينطبق هذا المعيار تحديدًا على تغيير إعداد مكوّن واجهة المستخدم — مثل اختيار زر اختيار (radio button)، أو تحديد مربع اختيار (checkbox)، أو اختيار خيار في قائمة منسدلة <select> — على عكس تفعيل عنصر تحكم (مثل النقر على زر). إذا كانت العملية تتطلب خطوة تفعيل صريحة (الضغط على Enter، النقر على Submit)، فهي عمومًا لا تندرج تحت هذا المعيار. النمط الإشكالي هو عندما يؤدي مجرد اختيار قيمة إلى تشغيل التنقل أو إعادة تحميل كبيرة للصفحة فورًا دون أي تحذير.

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

ما الذي يُعد إخفاقًا: محدد بلد أو لغة يعيد توجيه المستخدم تلقائيًا إلى عنوان URL جديد بمجرد اختيار خيار ما يُعد إخفاقًا. نموذج يُرسل تلقائيًا وينتقل بعيدًا عندما يتم اختيار زر اختيار (radio) دون وجود زر إرسال يُعد إخفاقًا. أداة إكمال تلقائي تنقل تركيز لوحة المفاتيح إلى منطقة جديدة في الصفحة دون تحذير عند الاختيار تُعد أيضًا إخفاقًا.

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

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

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

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

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

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

المستخدمون الذين لديهم اضطرابات دهليزية (vestibular disorders) قد يعانون من انزعاج جسدي أو شعور بالدوار عندما تتغير الصفحات بشكل غير متوقع، خصوصًا إذا كان التغيير يتضمن حركة (أنيميشن) أو تغيّرًا في موضع التمرير.

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

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

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

يتطلب المعيار WCAG 3.2.2 On Input اختبارًا يدويًا. لا يمكن للأدوات الآلية مثل axe-core اكتشاف انتهاكات هذا المعيار بشكل موثوق لأن السلوك الإشكالي سياقي ويعتمد على نية التفاعل، وليس مجرد وجود أو غياب سمة HTML أو بنية معينة. يمكن للأداة أن تحدد أن عنصر <select> لديه معالج حدث onchange، لكنها لا تستطيع تحديد ما إذا كان هذا المعالج يسبب تغييرًا في السياق، أو ما إذا كان المستخدم قد تم تحذيره من ذلك، أو ما إذا كان السلوك الناتج مربكًا في الممارسة.

• يتطلب اختبارًا يدويًا — أنماط التنقل باستخدام onchange: يمكن لأدوات الفحص الآلي الإشارة إلى عناصر <select> و<input type='radio'> و<input type='checkbox'> التي لديها معالجات أحداث JavaScript (خصوصًا onchange)، لكنها لا تستطيع تحديد ما إذا كانت هذه المعالجات تسبب تغييرًا في السياق. يجب على المختبِر البشري التفاعل مع كل عنصر تحكم من هذا النوع وملاحظة ما إذا كانت الصفحة تنتقل، أو تُعاد تحميلها، أو يتحول التركيز إلى منطقة مختلفة جذريًا، أو تُفتح نافذة جديدة دون خطوة تفعيل صريحة من المستخدم.
• يتطلب اختبارًا يدويًا — وجود وكفاية التحذير المسبق: حتى لو تم اكتشاف تغيير في السياق، لا يمكن للأداة الآلية تحديد ما إذا كان المستخدم قد تم تحذيره بشكل كافٍ قبل التفاعل مع عنصر التحكم. يجب على الإنسان التحقق من أن أي إشعار مسبق مرئي قبل الوصول إلى المكوّن، وواضح في صياغته، ويصف بالفعل السلوك الذي سيحدث.
• يتطلب اختبارًا يدويًا — إدارة التركيز بعد الإدخال: بعض الانتهاكات تظهر في صورة نقل التركيز إلى موقع غير متوقع عند تغيير الإدخال بدلًا من التنقل الصريح. لا يمكن للأدوات الآلية تتبع وجهات التركيز الناتجة عن أحداث onchange بشكل موثوق والتأكد مما إذا كان موضع التركيز الناتج يشكل تغييرًا مربكًا في السياق.

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

1. خط الأساس للفحص الآلي: شغّل axe DevTools أو Lighthouse على الصفحة لتحديد أي مشكلات تم الإشارة إليها تحت WCAG 3.2. بينما يتطلب المعيار 3.2.2 نفسه اختبارًا يدويًا، قد يعرض axe مشكلات ذات صلة (مثل تسميات مفقودة أو مشكلات في إدارة التركيز) توفر نقطة بداية. دوّن جميع عناصر التحكم في النماذج — خصوصًا القوائم المنسدلة <select>، ومجموعات أزرار الاختيار، ومربعات الاختيار — للمتابعة اليدوية.
2. تحديد جميع عناصر الإدخال ذات معالجات التغيير: في أدوات تطوير المتصفح، افحص JavaScript الخاص بالصفحة أو استخدم لوحة Event Listeners لتحديد أي عناصر <select> أو <input type='radio'> أو <input type='checkbox'> أو ودجات مخصصة لديها مستمع حدث onchange أو oninput أو مستمع مكافئ.
3. اختبار التفاعل بلوحة المفاتيح يدويًا: باستخدام لوحة المفاتيح فقط (Tab للتنقل، ومفاتيح الأسهم لخيارات radio/select)، تفاعل مع كل عنصر تحكم تم تحديده. لاحظ ما إذا كان اختيار خيار ما يسبب انتقال الصفحة، أو إعادة تحميلها، أو فتح نافذة جديدة، أو نقل التركيز إلى جزء مختلف بشكل ملحوظ من الصفحة. إذا حدث ذلك، تحقق مما إذا كان هناك تحذير مرئي قد عُرض قبل الوصول إلى عنصر التحكم.
4. اختبار NVDA + Firefox: شغّل Firefox مع تفعيل NVDA. تنقّل إلى كل عنصر تحكم في النموذج باستخدام المؤشر الافتراضي لـ NVDA (مفاتيح الأسهم) ثم تفاعل باستخدام وضع النماذج (Enter أو Space). اختر خيارات في القوائم المنسدلة ومجموعات أزرار الاختيار واستمع لأي إعلانات غير متوقعة تشير إلى تحميل صفحة، أو انتقال، أو تغيير كبير في السياق. لاحظ ما إذا كان NVDA يقرأ عنوان صفحة جديدًا أو منطقة مختلفة جذريًا.
5. اختبار VoiceOver + Safari (على macOS/iOS): فعّل VoiceOver وتنقّل إلى كل عنصر تحكم باستخدام VO+السهم الأيمن. تفاعل مع القوائم المنسدلة ومربعات الاختيار. إذا حدث تغيير في السياق، سيعلن VoiceOver عادةً عن الصفحة الجديدة أو تغيير التركيز. حدّد ما إذا كان المستخدم قد تم تحذيره مسبقًا.
6. اختبار JAWS + Chrome: استخدم JAWS في وضع المؤشر الافتراضي للتنقل في الصفحة. تفاعل مع عناصر التحكم في النماذج وراقب ما إذا كان JAWS يعلن عن تغيير في السياق (تغيير عنوان الصفحة، عنوان URL جديد، موضع قراءة مختلف) فورًا عند الإدخال — دون تفعيل زر إرسال.
7. اختبار الملاحظة البصرية: بالنسبة للمستخدمين المبصرين الذين لا يستخدمون تقنيات مساعدة، اختر خيارات في كل قائمة منسدلة ومجموعة أزرار اختيار ولاحظ ما إذا كانت الصفحة تنتقل أو تُعاد تحميلها بشكل غير متوقع. إذا حدث ذلك، تحقق مما إذا كان أي نص إرشادي مرئي قبل عنصر التحكم قد حذّر من هذا السلوك.

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

قائمة منسدلة تُرسل تلقائيًا — غير صحيح

<!-- BAD: Selecting a country immediately redirects the page -->
<label for='country'>Select Country</label>
<select id='country' name='country' onchange='window.location.href="/region/" + this.value'>
  <option value='tr'>Turkey</option>
  <option value='de'>Germany</option>
  <option value='us'>United States</option>
</select>

قائمة منسدلة تُرسل تلقائيًا — صحيح

<!-- GOOD: Selection is confirmed via a submit button; no automatic navigation -->
<form action='/region/' method='get'>
  <label for='country'>Select Country</label>
  <select id='country' name='country'>
    <option value='tr'>Turkey</option>
    <option value='de'>Germany</option>
    <option value='us'>United States</option>
  </select>
  <!-- Explicit submit button gives the user control over when navigation occurs -->
  <button type='submit'>Go</button>
</form>

نمط زر اختيار (radio) يُرسل تلقائيًا — غير صحيح

<!-- BAD: Selecting a payment method immediately submits the form -->
<fieldset>
  <legend>Payment Method</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='this.form.submit()'>
    Credit Card
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='this.form.submit()'>
    Bank Transfer
  </label>
</fieldset>

نمط زر اختيار (radio) يُرسل تلقائيًا — صحيح

<!-- GOOD: onchange can update UI state without navigating; submit requires user action -->
<fieldset>
  <legend>Payment Method</legend>
  <label>
    <input type='radio' name='payment' value='card' onchange='showPaymentDetails(this.value)'>
    Credit Card
  </label>
  <label>
    <input type='radio' name='payment' value='bank' onchange='showPaymentDetails(this.value)'>
    Bank Transfer
  </label>
</fieldset>
<!-- showPaymentDetails() reveals additional fields inline — no context change -->
<div id='payment-details' aria-live='polite'></div>
<button type='submit'>Confirm Payment</button>

مبدّل لغة مع تحذير مسبق — صحيح

<!-- ACCEPTABLE: User is warned before interacting that selecting will reload the page -->
<p id='lang-notice'>Selecting a language will immediately reload the page.</p>
<label for='lang-select'>Language</label>
<select
  id='lang-select'
  name='lang'
  aria-describedby='lang-notice'
  onchange='window.location.href="/" + this.value + "/"'
>
  <option value='en'>English</option>
  <option value='tr'>Türkçe</option>
  <option value='de'>Deutsch</option>
</select>
<!-- The aria-describedby links the warning to the control for screen reader users -->

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

• إسناد قيم إلى window.location.href مباشرة في سمة onchange لعنصر <select> دون وجود زر إرسال، مما يسبب تنقلًا فوريًا للصفحة بمجرد أن يختار المستخدم خيارًا.
• استخدام this.form.submit() داخل معالج onchange لزر اختيار (radio)، مما يرسل النموذج بالكامل وينتقل بعيدًا فور اختيار خيار radio — قبل أن يتمكن المستخدم من مراجعة اختياراته.
• وضع التحذير المسبق بعد عنصر التحكم في DOM بحيث يواجه مستخدمو قارئات الشاشة ومستخدمو لوحة المفاتيح عنصر التحكم قبل سماع أو قراءة التحذير بشأن السلوك الذي يسببه.
• عرض التحذير المسبق فقط كأداة تلميح (tooltip) أو نص placeholder لا يتم كشفه بشكل موثوق لتقنيات المساعدة، مما يترك مستخدمي قارئات الشاشة دون أي إشارة إلى أن تغييرًا في السياق سيتبع إدخالهم.
• بناء ودجات قوائم منسدلة مخصصة باستخدام عناصر <div> و<ul> تقوم بتشغيل التنقل عند الاختيار عبر JavaScript لكنها تفتقر إلى البنية الدلالية التي تسمح للمختبرين أو طبقات الوصول (overlays) بتحديدها كعناصر تحكم تفاعلية تحتاج إلى تدقيق بموجب المعيار 3.2.2.
• تشغيل إرسال تلقائي للنموذج عند الحقل الأخير في النموذج (على سبيل المثال، إدخال PIN أو OTP) عند الوصول إلى عدد الأحرف المطلوب، دون إبلاغ المستخدم بأن هذا سيحدث.
• فتح مربع حوار (modal) أو نافذة متصفح جديدة استجابة لتحديد مربع اختيار، دون أي تحذير مسبق — وهذا يُعد تغييرًا في السياق لأنه يغيّر إطار العرض والتركيز بشكل كبير.
• الخلط بين تحديثات المحتوى المتوقعة داخل الصفحة وتغييرات السياق وإضافة أزرار إرسال غير ضرورية حول تفاعلات هي في الأصل مقبولة (مثل مرشح بحث حي)، مما قد يسبب ازدحامًا في واجهة المستخدم — يجب على الفرق أن تدرك أن التحديثات المضمنة وغير المربكة لا تتطلب خطوة إرسال.
• الاعتماد فقط على فحوصات الوصول الآلية واعتبار المعيار 3.2.2 مجتازًا لأن أي قاعدة آلية لم تُشر إليه، دون إجراء الاختبارات اليدوية الإلزامية بلوحة المفاتيح وقارئات الشاشة التي يتطلبها هذا المعيار.
• تطبيق معالج onchange يغيّر السياق على عنصر <select> يُستخدم للفرز أو التصفية في قائمة نتائج، مما يسبب إعادة تحميل كاملة للصفحة بدلًا من تحديث AJAX، والفشل في تحذير المستخدمين من أن هذا التحميل سيحدث عند الاختيار.

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

تُقرّر التعميم الرئاسي 2025/10 في تركيا، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات إلزامية لإتاحة الويب استنادًا إلى WCAG 2.2. المعيار WCAG 3.2.2 On Input هو معيار من المستوى A، والذي يمثل الحد الأدنى لخط الأساس للامتثال بموجب التعميم — ما يعني أن الالتزام به ليس اختياريًا بل مطلوب قانونًا لجميع الكيانات المشمولة.

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

الأنواع التالية من الكيانات مذكورة صراحة في التعميم، وبالتالي يجب أن تضمن أن خدماتها الرقمية تمتثل للمعيار WCAG 3.2.2: منصات التجارة الإلكترونية، المؤسسات العامة على جميع مستويات الحكومة، البنوك والمؤسسات المالية، المستشفيات ومقدمو الرعاية الصحية، شركات الاتصالات التي لديها 200,000 مشترك أو أكثر، وكالات السفر المرخّصة، شركات النقل الخاصة، والمدارس الخاصة المعتمدة من وزارة التربية الوطنية (MoNE).

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

يجب على المنظمات الخاضعة للتعميم أن تتعامل مع اختبار المعيار WCAG 3.2.2 كخطوة تدقيق إلزامية خلال ضمان الجودة (QA). وبما أن الأدوات الآلية لا يمكنها اكتشاف انتهاكات هذا المعيار، يجب إدراج الاختبار اليدوي من قبل مختصين مدرّبين في الوصول — يشمل ذلك تفاعل لوحة المفاتيح، وسلوك قارئات الشاشة NVDA وJAWS، والمراجعة الصريحة لجميع التفاعلات المعتمدة على onchange — ضمن عملية الامتثال. يُنصح بتوثيق نتائج الاختبار وأي استثناءات مقبولة (مع وجود تحذيرات مسبقة) لإثبات بذل العناية الواجبة أمام الهيئات التنظيمية.