إنشاء مواقع إلكترونية متوافقة مع برامج الزحف

Kasper Kulikowski

Omkar More

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

ومع ذلك، تم تصميم العديد من مواقعنا الإلكترونية لتكون جذابة للمستخدمين، مع حالات معقّدة عند التمرير، وتصاميم متغيرة، وحركة سلسة. هذه الميزة لا تعمل بشكل صحيح مع الوكلاء.

الطريقة التي ترى بها البرامج الآلية موقعك الإلكتروني

لا ينظر الموظفون إلى موقعك الإلكتروني على شاشة. وهي تعمل على تمثيل لموقعك الإلكتروني يمكن للأجهزة قراءته. وتحدّد جودة هذا التمثيل مستوى أدائها.

يمكن للوكلاء عرض موقعك الإلكتروني بثلاث طرق أساسية: لقطات الشاشة ورمز HTML الأولي وشجرة تسهيل الاستخدام.

لقطات الشاشة

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

HTML

يحلّل الوكيل نموذج DOM ويقرأ HTML. فهو يفهم كيفية تضمين العناصر، والتسلسل الهرمي المنطقي لشجرة نموذج العناصر في المستند، والسمات مثل المعرّفات والفئات التي تحدّد البنية، وسلاسل البيانات الأولية التي تشكّل البنية الأساسية للمعلومات في الموقع الإلكتروني. يساعد ذلك الوكيل في فهم العلاقة بين العناصر. إذا كان زر "الشراء الآن" داخل حاوية منتج، يفترض البرنامج أنّ الزر يخص هذا المنتج المحدّد.

شجرة تسهيل الاستخدام

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

طُرق العلاج المجمّعة

الاعتماد على إدخال واحد يؤدي إلى حدوث فجوة دلالية. على سبيل المثال، في نموذج المستند، قد يرى برنامج زحف <div> بدون أن يعرف أنّك ضبطت هذا العنصر كزر وظيفي باستخدام CSS وJavaScript. باستخدام لقطات الشاشة، قد يتمكّن أحد العملاء من تحديد موضع الزر على الشاشة، ولكنّه سيظل غير مدرك للوجهة المقصودة للزر أو الإجراء الذي تم تصميمه لتشغيله.

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

مهمتنا هي تقديم إشارات واضحة على جميع هذه القنوات.

إنشاء مواقع إلكترونية متوافقة مع برامج الزحف

لمساعدة وكلاء الدعم في التنقّل في موقعك الإلكتروني، ننصحك باتّباع ما يلي:

• يجب أن تنعكس جميع الإجراءات الضرورية التي يتخذها الإنسان أو الوكيل بوضوح في الواجهة.
• ضمان ثبات التصميم من المحتمل أن يتم إرباك البرامج التي تلتقط لقطات شاشة إذا كان تخطيط موقعك الإلكتروني يتغيّر باستمرار، مثلاً عندما يكون زر إضافة إلى سلة التسوق في صفحة المنتج في مكان مختلف لكل فئة منتجات.
• تجنَّب العناصر "الوهمية" أو التراكبات الشفافة التي قد تخفي العناصر التفاعلية. قد يتجاهل التحليل المرئي الذي يجريه البرنامج المساعد العُقد التي تم تغطيتها، حتى إذا بدت العقدة شفافة.
• تصميم عناصر قابلة للتنفيذ باستخدام ترميز HTML الدلالي يجب تفضيل العلامتَين <button> و<a> على العنصرَين <div> و<span> المعدَّلين. وتتعرّف الوكلاء على هذه العناصر باعتبارها تفاعلية.
  • إذا لم تتمكّن من استخدام HTML الدلالي، احرص دائمًا على تزويد العنصر بالسمتَين role وtabindex المناسبتَين. على سبيل المثال، <div role="button">.
• اضبط cursor: pointer في CSS، وهي إشارة قوية لإمكانية اتّخاذ إجراء.
• أضِف السمة for إلى العلامات <label> لربطها بحقول الإدخال. يساعد ذلك وكيل الذكاء الاصطناعي على فهم الغرض من الحقل من خلال الإشارة إلى نص التصنيف المرتبط مباشرةً بسلسلة الإجراء.
• تأكَّد من أنّ أي عناصر تفاعلية مطلوبة لمواصلة رحلة المستخدم تتضمّن مساحة مرئية أكبر من 8 بكسل مربّع، وذلك لتجنُّب استبعادها من خلال التحليل المرئي.

الخطوات التالية

إنّ كل ما نقترحه لجعل الموقع الإلكتروني "متوافقًا مع البرامج الآلية" يساهم أيضًا في تحسينه للمستخدمين.

إنّ جعل المواقع الإلكترونية متوافقة مع وكلاء الذكاء الاصطناعي يشكّل حافزًا لإعادة الالتزام بالمبادئ الأساسية لإنشاء مواقع إلكترونية منظَّمة بشكل جيد وسهلة الوصول إليها ودلالية.

• اطّلِع على WebMCP، وهو معيار ويب مقترَح لمساعدة المواقع الإلكترونية في التفاعل مع الوكلاء، واشترِك في برنامج المعاينة المبكرة لبدء التجربة.
• تدقيق شجرة تسهيل الاستخدام: استخدِم الأدوات الحالية للتأكّد من أنّ التسلسل الهرمي لموقعك الإلكتروني قابل للقراءة آليًا وثابت.