WCAG 2.5.7: حركات السحب

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

تنص إرشادات WCAG 2.5.7 — حركات السحب (المستوى AA، أُدخلت في WCAG 2.2) على أن جميع الوظائف التي تستخدم حركة السحب للتشغيل يجب أن يكون من الممكن تنفيذها من خلال إجراء مؤشر واحد بدون سحب، باستثناء الحالات التي تكون فيها حركة السحب جوهرية للوظيفة ولا يوجد أي آلية بديلة.

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

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

ما يُعد اجتيازًا: قائمة قابلة للسحب توفر أيضًا أزرار سهم لأعلى/لأسفل أو مربع حوار للانتقال إلى موضع معين؛ شريط نطاق يقبل النقر في أي مكان على المسار؛ لوحة قابلة لتغيير الحجم تحتوي أيضًا على حقل إدخال رقمي أو إمكانية النقر المزدوج للطي؛ خريطة يمكن تحريكها بالنقر على أسهم التنقل بالإضافة إلى السحب.

ما يُعد إخفاقًا: قائمة قابلة للفرز يكون فيها السحب هو الطريقة الوحيدة لإعادة ترتيب العناصر؛ فاصل بين لوحتين لا يوفر أي وسيلة بديلة؛ رفع ملفات لا يقبل إلا السحب والإفلات دون زر بديل؛ منتقي ألوان تكون فيه الطريقة الوحيدة لاختيار درجة اللون هي السحب عبر شريط متدرج دون بديل رقمي أو نصي.

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

لماذا يهم الأمر

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

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

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

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

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

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

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

• تدقيق يدوي — إمكانيات السحب والإفلات: يجب على المختبرين تحديد كل مكوّن في الصفحة يستجيب لتسلسلات mousedown/mousemove/mouseup أو ما يعادلها في اللمس (touchstart/touchmove/touchend) والتحقق من أن كل واحد منها يوفّر آلية بديلة يمكن تشغيلها عبر ضغطة مؤشر واحدة بدون سحب. يجب على المختبرين أيضًا التحقق من وجود الخاصية draggable في HTML5 ومستمعي الأحداث المرتبطين بها dragstart/drop كإشارات إلى وظائف تعتمد على السحب.
• تدقيق يدوي — فحص أحداث المؤشر: باستخدام فحص مستمعي الأحداث في أدوات تطوير المتصفح أو أدوات تدقيق إمكانية الوصول مثل Accessibility Insights for Web (التي تتضمن قائمة تحقق يدوية لـ 2.5.7)، يجب على المختبرين فحص المكونات بحثًا عن معالجات أحداث المؤشر والتأكد من أن نطاق القيمة الكامل للمكوّن أو قدرته على إعادة التموضع يمكن الوصول إليه دون حركة مستمرة للمؤشر.
• لماذا لا يمكن للأتمتة اكتشاف ذلك: يمكن لماسح آلي الإشارة إلى أن عنصر <div> لديه مستمع dragstart، لكنه لا يستطيع معرفة ما إذا كان النقر على زر قريب يحمل تسمية "Move up" يوفر بديلًا متوافقًا. يتطلب هذا فهم العلاقة بين عناصر واجهة المستخدم وتكافؤ وظائفها — وهي مهمة تتجاوز حاليًا قدرات أدوات تحليل DOM الثابتة أو أثناء التشغيل.

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

1. خط الأساس للفحص الآلي: شغّل axe DevTools أو Lighthouse على الصفحة لإظهار أي مشكلات متعلقة بالمؤشر أو أنماط الإدخال. رغم عدم وجود قاعدة في axe تطابق 2.5.7 مباشرة، فإن مراجعة المشكلات المُشار إليها تحت قواعد 2.5.x توفر سياقًا مفيدًا. لاحظ أي مكونات يشير axe إلى أن دعم لوحة المفاتيح فيها غير كافٍ، إذ غالبًا ما تتداخل هذه مع الأنماط المعتمدة على السحب فقط.
2. تحديد جميع المكونات القابلة للسحب: افتح Chrome DevTools، وانتقل إلى لوحة Elements، واستخدم تبويب Event Listeners للبحث عن معالجات dragstart وdrag وdrop وpointermove وmousemove وtouchmove. بدلاً من ذلك، ابحث في مصدر الصفحة عن الخاصية draggable وعن أنماط JavaScript مثل .addEventListener('dragstart'. قم بإدراج كل مكوّن يتطلب السحب.
3. اختبار كل مكوّن قابل للسحب بحثًا عن بدائل: لكل مكوّن تم تحديده، حاول تحقيق نفس النتيجة باستخدام نقرات أو لمسات بمؤشر واحد فقط — بدون سحب. بالنسبة لشريط التمرير، انقر مباشرة على المسار في الموضع المطلوب. بالنسبة لقائمة قابلة للفرز، ابحث عن أزرار تحريك أو خيارات في قائمة السياق. بالنسبة للوحة قابلة لتغيير الحجم، ابحث عن عناصر تحكم تعتمد على النقر أو النقر المزدوج. إذا لم يوجد بديل، يُعتبر المعيار غير مستوفى.
4. فحص التنقل بلوحة المفاتيح (إشارة ثانوية): اختبر جميع المكونات القابلة للسحب باستخدام لوحة المفاتيح فقط (Tab للتركيز، الأسهم، Enter/Space). رغم أن دعم لوحة المفاتيح مغطى في WCAG 2.1.1، فإن وجود دعم قوي للوحة المفاتيح غالبًا ما يرتبط بوجود بدائل غير قائمة على السحب، مما يجعل هذا خطوة تأكيدية مفيدة. استخدم NVDA + Firefox، أو VoiceOver + Safari (على macOS/iOS)، أو JAWS + Chrome وتحقق من أن الوظيفة الكاملة للمكوّن قابلة للتشغيل دون جهاز تأشير.
5. التحقق على أجهزة اللمس: على جهاز محمول أو باستخدام محاكاة الأجهزة في وضع اللمس في Chrome DevTools، حاول إكمال نفس المهام باستخدام إيماءات النقر (بدون سحب مع الاستمرار). تأكد من أن النقرات الفردية أو التفاعلات بالنقر على الهدف كافية لجميع الوظائف.
6. توثيق النتائج: لكل مكوّن تم اختباره، سجّل ما إذا كان هناك بديل متوافق يعتمد على مؤشر واحد، وما إذا كان يغطي النطاق الكامل للوظيفة، وما إذا كان يمكن اعتبار عملية السحب جوهرية. استخدم قائمة التحقق للاختبار اليدوي في Accessibility Insights for Web الخاصة بـ WCAG 2.5.7 كدليل منظم.

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

شريط نطاق بدون دعم النقر على المسار — غير صحيح

<!-- Slider that only responds to drag on the thumb;
     clicking the track does nothing -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

شريط نطاق مع دعم النقر على المسار وإدخال رقمي — صحيح

<!-- Native <input type='range'> provides drag, click-on-track,
     and keyboard support natively. A numeric input offers an
     additional single-pointer alternative. -->
<label for='priceRange'>Maximum price: <span id='priceValue'>500</span> TL</label>
<input type='range'
       id='priceRange'
       name='priceRange'
       min='0'
       max='1000'
       value='500'
       step='10'
       aria-valuemin='0'
       aria-valuemax='1000'
       aria-valuenow='500'
       oninput='document.getElementById("priceValue").textContent = this.value;
                document.getElementById("priceNumber").value = this.value;'>
<label for='priceNumber'>Or enter a value:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

قائمة قابلة للفرز بالسحب والإفلات بدون بديل — غير صحيح

<!-- Items can only be reordered by dragging.
     No move buttons or keyboard reordering exist. -->
<ul id='taskList'>
  <li draggable='true' ondragstart='handleDrag(event)' id='item1'>Task One</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item2'>Task Two</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item3'>Task Three</li>
</ul>

قائمة قابلة للفرز بالسحب والإفلات مع أزرار تحريك — صحيح

<!-- Drag-and-drop is preserved for users who can use it.
     Move Up / Move Down buttons provide a single-pointer
     (and keyboard-accessible) alternative for every item. -->
<ul id='taskList' aria-label='Sortable task list'>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item1'>
    <span>Task One</span>
    <button type='button'
            onclick='moveItem("item1", -1)'
            aria-label='Move Task One up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item1", 1)'
            aria-label='Move Task One down'>
      &darr; Move Down
    </button>
  </li>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item2'>
    <span>Task Two</span>
    <button type='button'
            onclick='moveItem("item2", -1)'
            aria-label='Move Task Two up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item2", 1)'
            aria-label='Move Task Two down'>
      &darr; Move Down
    </button>
  </li>
</ul>

لوحة منقسمة قابلة لتغيير الحجم بدون بديل — غير صحيح

<!-- The divider can only be repositioned by dragging.
     No percentage input or preset-size buttons exist. -->
<div class='split-pane'>
  <div class='pane pane-left' id='leftPane'>Content A</div>
  <div class='divider'
       onmousedown='startResize(event)'
       aria-hidden='true'></div>
  <div class='pane pane-right' id='rightPane'>Content B</div>
</div>

لوحة منقسمة قابلة لتغيير الحجم مع أزرار أحجام مسبقة — صحيح

<!-- The divider still supports dragging, but preset-layout
     buttons allow single-pointer repositioning. The divider
     is also keyboard-focusable with arrow-key support. -->
<div class='split-pane-wrapper'>
  <div class='split-controls' role='group' aria-label='Panel size presets'>
    <button type='button' onclick='setSplit(25)'>25 / 75</button>
    <button type='button' onclick='setsplit(50)'>50 / 50</button>
    <button type='button' onclick='setSplit(75)'>75 / 25</button>
  </div>
  <div class='split-pane'>
    <div class='pane pane-left' id='leftPane'>Content A</div>
    <div class='divider'
         role='separator'
         tabindex='0'
         aria-label='Resize panels'
         aria-valuenow='50'
         aria-valuemin='10'
         aria-valuemax='90'
         onmousedown='startResize(event)'
         onkeydown='resizeWithKeys(event)'>
    </div>
    <div class='pane pane-right' id='rightPane'>Content B</div>
  </div>
</div>

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

• تنفيذ أشرطة التمرير كمكوّنات مخصّصة مبنية على <div> بدون دعم النقر على المسار، والاعتماد بالكامل على سحب عنصر المقبض وعدم التعامل مع أحداث click على عنصر المسار نفسه لنقل القيمة إلى الموضع الذي تم النقر عليه.
• افتراض أن رفع الملفات بالسحب والإفلات هو آلية الرفع الوحيدة المطلوبة دون توفير زر استعراض ملفات مرئي وقابل للنقر (<input type='file'>) كخيار احتياطي إلزامي إلى جانب منطقة الإسقاط.
• تطبيق استثناء الجوهرية بشكل واسع جدًا — على سبيل المثال، اعتبار قائمة مهام قابلة للفرز أو لوحة كانبان "سحبًا جوهريًا" بينما يمكن لأزرار التحريك لأعلى/لأسفل تلبية احتياجات المستخدمين بالكامل دون أي فقدان في الوظيفة.
• توفير بدائل بلوحة المفاتيح دون بدائل بمؤشر واحد، وسوء فهم WCAG 2.5.7 على أنه مستوفى بدعم لوحة المفاتيح وحده. يتطلب المعيار تحديدًا مسارًا بمؤشر واحد؛ الحلول المعتمدة على لوحة المفاتيح فقط تعالج 2.1.1، وليس 2.5.7.
• إخفاء أزرار التحريك أو الحقول الرقمية خلف حالات تحويم أو قوائم ثانوية تتطلب هي نفسها تفاعلات سحب أو تسلسلات مؤشر معقدة للكشف عنها، مما يلغي فعليًا إمكانية الوصول إلى البديل.
• إهمال أجهزة اللمس عبر اختبار بدائل السحب باستخدام فأرة سطح المكتب فقط، ثم نشرها للمستخدمين على الشاشات اللمسية حيث قد يختلف سلوك إيماءة السحب وبدائلها بشكل كبير عن تنفيذ سطح المكتب.
• استخدام pointer-events: none على مسار شريط التمرير في CSS لمنع النقرات العرضية أثناء السحب، مما يحجب عن غير قصد بديل النقر على المسار الذي يتطلبه 2.5.7.
• عدم توفير بديل لتفاعلات تحريك/سحب الخريطة على الخرائط المضمّنة أو التصورات المخصّصة المبنية على canvas، حيث سيكون النقر على أزرار الاتجاهات أو إدخال الإحداثيات بديلًا كافيًا يعتمد على مؤشر واحد.
• تنفيذ البديل المعتمد على مؤشر واحد كهدف سحب وإفلات بحد ذاته — على سبيل المثال، إنشاء منطقة "أسقط هنا" لا تزال تتطلب سحبًا لاستخدامها — بدلاً من نموذج تفاعل مختلف فعليًا مثل زر أو حقل إدخال نصي.
• نسيان اختبار البدائل على كامل نطاق القيم لمكوّن قابل للسحب. شريط تمرير يسمح للمستخدمين بالنقر على عدد قليل فقط من المواضع المحددة مسبقًا على المسار، وليس أي موضع عشوائي، لا يوفر بديلًا كاملاً إذا كان إصدار السحب يدعم قيمًا مستمرة.

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

تضع التعميم الرئاسي 2025/10 في تركيا، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، إطارًا وطنيًا شاملًا لإمكانية الوصول للخدمات الرقمية. يفرض التعميم على الجهات المشمولة الامتثال لإرشادات محتوى الويب (WCAG) ويشير تحديدًا إلى الامتثال للمستوى AA كمعيار للحصول على شعار إمكانية الوصول (Erişilebilirlik Logosu)، علامة الشهادة الرسمية الصادرة عن وزارة الأسرة والخدمات الاجتماعية (Aile ve Sosyal Hizmetler Bakanlığı).

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

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

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

عمليًا، ينبغي للمنظمات الساعية للحصول على شعار Erişilebilirlik Logosu أن تدرج WCAG 2.5.7 في قوائم تدقيق إمكانية الوصول لديها، وأن تضمن مراجعة جميع المكونات التفاعلية المبنية بوظائف السحب للتحقق من وجود بدائل متوافقة، وأن توثّق قرارات الامتثال الخاصة بها — بما في ذلك أي ادعاءات باستثناء الجوهرية — كجزء من بيان إمكانية الوصول (Erişilebilirlik Beyanı) الذي يفرض التعميم على الجهات المشمولة نشره وتحديثه باستمرار.