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

Kasper Kulikowski

Omkar More

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

مع ذلك، تم تصميم العديد من مواقعنا الإلكترونية لتكون جذابة للمستخدمين، وتتضمّن حالات معقّدة عند التمرير فوق العناصر وتخطيطات متغيّرة وحركة سلسة. ويؤدي ذلك إلى تعطّل وظائف الوكلاء.

طريقة عرض الوكلاء لموقعك الإلكتروني

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

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

لقطات الشاشة

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

HTML

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

إذا كان زر الشراء الآن داخل حاوية منتج، يفترض الوكيل أنّ هذا الزر يخص هذا المنتج تحديدًا.

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

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

الوسائط المجمّعة

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

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

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

إنشاء مواقع إلكترونية مناسبة للوكلاء

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

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

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

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

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

• تدقيق شجرة تسهيل الاستخدام (A11y Tree): يجب استخدام الأدوات الحالية لـ ضمان أنّ التسلسل الهرمي لموقعك الإلكتروني قابل للقراءة آليًا وثابت.
• قراءة المزيد عن WebMCP : وهو معيار ويب مقترَح لمساعدة المواقع الإلكترونية في التفاعل مع الوكلاء. تتوفّر واجهات برمجة التطبيقات للتجربة في مرحلة الإنتاج في Chrome، وذلك من خلال مرحلة التجربة والتقييم.