معضلة اللمس على الهاتف: كيف تقدّم الفقاعات الذكية تفاعلات لمس سليمة على الشاشات الصغيرة

«يبلغ حجم الهدف لمُدخلات المؤشر 24 في 24 بكسل CSS على الأقل، إلا في الحالات التالية:» هو كل نص معيار النجاح 2.5.8، حجم الهدف (الحد الأدنى)، قبل أن تبدأ استثناءاته.¹ وهو يقع في المستوى AA ضمن WCAG 2.2، توصية W3C الصادرة في 12 ديسمبر 2024، ويتضمن خمسة استثناءات.¹ وأحدها، الاستثناء المضمّن في السطر (Inline)، يحدّد كيف تنطبق القاعدة على إعلان داخل جملة.² وقبل الاستثناء تأتي مشكلة أبسط: المؤشر الذي يأتي به قارئ الهاتف إلى الصفحة لا يستطيع التمرير فوق العناصر.

التمرير حدث خاص بالحاسوب المكتبي، والهاتف لا يملكه

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

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

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

تحدّد Apple وGoogle حدًا أدنى أكبر من حد W3C

بكسلات CSS الأربعة والعشرون في WCAG حدٌّ أدنى، وتنشر Apple وGoogle أرقامًا أكبر بوحداتهما الخاصة. فنصائح التصميم لدى Apple تطلب من المصممين أن «ينشئوا عناصر تحكم لا يقل قياسها عن 44 نقطة في 44 نقطة حتى يمكن لمسها بدقة بالإصبع».⁴ وتطلب إرشادات إمكانية الوصول في Android من Google ما لا يقل عن 48x48dp لكل هدف لمس.⁵ وتضيف أن «هدف اللمس بقياس 48x48dp ينتج عنه حجم مادي يبلغ نحو 9 مم، بصرف النظر عن حجم الشاشة».⁵

وقاست دراسة واحدة الإبهام مباشرةً. فقد اختبر بارهي وكارلسون وبيدرسون عشرين مشاركًا على جهاز محمول ذي شاشة لمس، في دراسة قُدّمت في مؤتمر MobileHCI 2006.⁶ ولم تُظهر معدلات الخطأ أي فرق ذي دلالة بمجرد أن بلغ هدف اللمسة الواحدة 9.6 مم.⁶ وخلص المؤلفون إلى أن 9.2 مم لمهام اللمسة الواحدة و9.6 مم لتسلسلات اللمسات «ينبغي أن تكون كبيرة بما يكفي للاستخدام بإبهام يد واحدة على الأجهزة المحمولة ذات شاشات اللمس».⁶ ورقم Google البالغ نحو 9 مم يقع ضمن مليمتر واحد من كليهما.⁵

الكلمة المسطَّرة داخل جملة هي الهدف الذي يستثنيه المعيار

ينص الاستثناء المضمّن في السطر على ما يلي: «الهدف موجود في جملة أو أن حجمه مقيّد بطريقة أخرى بارتفاع السطر لنص ليس هدفًا».¹ والكلمة المسطَّرة التي تَسِمها شيفرة التضمين نصٌّ داخل فقرة الناشر، مكتوب بخط الناشر نفسه وبارتفاع السطر الذي حدّده. ولا ينطبق عليها الحد الأدنى البالغ 24 بكسلًا.¹ أما الرابط داخل الفقاعة فمختلف: إنه عنصر تحكم في لوحة، يُعرض داخل Shadow DOM حيث لا تستطيع أنماط CSS الخاصة بالناشر التأثير فيه. وهو نوع الهدف الذي كُتب المعيار من أجله، وتدقيق إمكانية الوصول يقيسه كأي عنصر تحكم آخر.

تقول وثيقة الشرح (Understanding): «الغرض من معيار النجاح هذا هو المساعدة على ضمان إمكانية تفعيل الأهداف بسهولة دون تفعيل هدف مجاور عن غير قصد».² والقرّاء الذين تسمّيهم هم «المستخدمون ذوو القيود في البراعة اليدوية ومن يجدون صعوبة في الحركات الحركية الدقيقة».² فالتجاور، لا الحجم وحده، هو الخطر الذي يصفه W3C. ولا تضع شيفرة التضمين فقاعتين في الفقرة نفسها أبدًا، وهي تتخطى الروابط. لذلك لا تقع الكلمة الإعلانية أبدًا داخل رابط له وجهة أصلًا.

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

تتعامل Google أصلًا مع اللمسة العرضية بوصفها مشكلة تتعلق بالسياسة

تطلب سياسات مواضع الإعلانات في AdSense من Google من الناشرين: «احرص عند وضع الروابط، وأزرار التشغيل، وأزرار التنزيل، وأزرار التنقل قرب الإعلانات لأنها قد تؤدي إلى نقرات عرضية».⁷ وتحظر سياسات Google للناشرين الإعلاناتِ التي تقدّمها Google والتي «تغطي عناصر التنقل أو غيرها من عناصر الإجراءات أو تجاورها وقد تؤدي إلى تفاعلات غير مقصودة مع الإعلان».⁸ وكلتاهما تصف اللمسة المذكورة في بيان الغرض لدى W3C: لمسة مقصود بها هدف تقع على هدف آخر. وصفحة السياسة لا تستطيع إلا أن تطلب من الناشر الحرص؛ أما الشكل الإعلاني فيحدّد ما تفعله اللمسة الأولى.

وعلاج Google للمواضع التي تظل تُنتج مثل هذه النقرات هو النقرة المؤكَّدة (Confirmed Click). إذ تصفها صفحة المساعدة الخاصة بها بأنها «ميزة في منتج Google Ads تضيف تأكيدًا إلى مواضع الإعلانات التي قد تولّد نقرات عرضية».⁹ والقارئ الذي يلمس مثل هذا الإعلان «سيُطلب منه تأكيد نيته زيارة صفحة المعلن بالنقر على زر مرتبط بإجراء، مثل "Visit site"».⁹ وفي تلك المواضع لم تعد Google تعدّ اللمسة الواحدة دليلًا على النية، فتُدرج لمسة أخرى بعد وقوع الأمر.

والفقاعة تملك تلك اللمسة الثانية بحكم تصميمها لا على سبيل العلاج. فاللمسة الأولى تفتح لوحة تحمل تسمية «Ad» (إعلان)، وعنوانًا لا يتجاوز أربعين حرفًا، ونصًا لا يتجاوز تسعين حرفًا. وفي اللوحة أيضًا نطاق العرض الخاص بالمعلن، ورابط واحد، وعلامة صغيرة «Ads by AdBubbles». واللمسة الثانية، على الرابط، هي النقرة، وكل رابط في الفقاعة يحمل rel="sponsored noopener".

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

اللمسة الأولى لا تستطيع تكبير كلمة مكتوبة بخط صغير

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

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