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

Kasper Kulikowski

Omkar More

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

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

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

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

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

لقطات الشاشة

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

HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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