আপনার ওয়েবসাইটে এক নতুন ধরনের ভিজিটর এসেছে। কিছু ব্যবহারকারী এখন হাতে নেভিগেট করার পরিবর্তে লক্ষ্য-ভিত্তিক যাত্রার দায়িত্ব এআই এজেন্টদের ওপর অর্পণ করছেন। এই স্বায়ত্তশাসিত সিস্টেমগুলো ব্যবহারকারীর পক্ষ থেকে ইনপুট বুঝতে, পরিকল্পনা করতে এবং কাজ সম্পাদন করতে পারে।
তবে, আমাদের অনেক ওয়েবসাইটই মানুষের জন্য সুন্দরভাবে ডিজাইন করা হয়, যেখানে জটিল হোভার-স্টেট, পরিবর্তনশীল লেআউট এবং সাবলীল গতি থাকে। এজেন্টদের জন্য এই ব্যবস্থাটি কার্যত অকার্যকর।
এজেন্টরা আপনার সাইটটি কীভাবে দেখে
এজেন্টরা মনিটরে আপনার ওয়েবসাইট দেখেন না। তারা আপনার সাইটের একটি মেশিন-পঠনযোগ্য উপস্থাপনার উপর ভিত্তি করে কাজ করেন। এই উপস্থাপনার গুণমানই তাদের কর্মক্ষমতা নির্ধারণ করে।
এজেন্টরা আপনার ওয়েবসাইটটি প্রধানত ৩টি উপায়ে দেখতে পারেন: স্ক্রিনশট, র এইচটিএমএল (raw HTML), এবং অ্যাক্সেসিবিলিটি ট্রি ।
স্ক্রিনশট
এজেন্ট রেন্ডার করা পেজটির একটি স্ন্যাপশট নেয় এবং এলিমেন্টগুলো শনাক্ত করতে একটি ভিশন মডেল ব্যবহার করে। স্ক্রিনশটের উপর ভিত্তি করে, এজেন্ট বুঝতে পারে যে উপরের ডানদিকের সার্চ বারটি একটি গ্লোবাল সার্চ, আর মাঝখানের বক্সটি সম্ভবত একটি ফর্ম ফিল্ড। ভিজ্যুয়াল সংকেত সহায়ক হতে পারে, কারণ এজেন্টরা গুরুত্ব নির্ধারণ করতে রঙ, আকার এবং নৈকট্য ব্যবহার করতে পারে। একটি ছোট "হেল্প" লিঙ্কের চেয়ে একটি বড় ডিলিট বাটনকে সম্ভবত বেশি সতর্কতার সাথে বিবেচনা করা হবে। তবে স্ক্রিনশট বিশ্লেষণ করা ধীর এবং ব্যয়বহুল (ব্যবহৃত টোকেনের দিক থেকে) হতে পারে, তাই যখন কাঠামোর গঠন বিভ্রান্তিকর হয়, তখন এটিকে ব্যাকআপ হিসেবে ব্যবহার করাই শ্রেয়।
এইচটিএমএল
এজেন্ট DOM বিশ্লেষণ করে এবং HTML পড়ে। এটি বুঝতে পারে এলিমেন্টগুলো কীভাবে একটির ভেতরে আরেকটি সাজানো থাকে, DOM ট্রি-এর যৌক্তিক স্তরবিন্যাস, কাঠামো নির্ধারণকারী ID ও ক্লাসের মতো অ্যাট্রিবিউট এবং সাইটের তথ্যগত মেরুদণ্ড গঠনকারী মূল ডেটা স্ট্রিংগুলো। এটি এজেন্টকে এলিমেন্টগুলোর মধ্যকার সম্পর্ক বুঝতে সাহায্য করে। যদি একটি "এখনই কিনুন" বাটন কোনো প্রোডাক্ট কন্টেইনারের ভেতরে থাকে, তবে এজেন্ট ধরে নেয় যে বাটনটি সেই নির্দিষ্ট প্রোডাক্টটিরই অন্তর্গত।
অ্যাক্সেসিবিলিটি ট্রি
অ্যাক্সেসিবিলিটি ট্রি হলো একটি ব্রাউজার-নেটিভ এপিআই যা DOM-কে সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলোতে বিভক্ত করে: যেমন ইন্টারেক্টিভ এলিমেন্টগুলোর ভূমিকা, নাম এবং অবস্থা। এটি হলো পেজটির অর্থগত সারাংশ, যা সহায়ক প্রযুক্তি দ্বারা ব্যবহৃত হয়। একটি এআই এজেন্টের জন্য, এটি একটি উচ্চ-মানের মানচিত্র হিসেবে কাজ করে যা CSS-এর দৃশ্যমান "কোলাহল" উপেক্ষা করে শুধুমাত্র উপযোগিতার উপর মনোযোগ দেয়। এই ট্রি-কে ব্যাখ্যা করার মাধ্যমে, একটি এজেন্ট প্রতিটি টগল, স্লাইডার এবং ইনপুট ফিল্ডের কার্যকরী উদ্দেশ্য শিখতে পারে।
সম্মিলিত পদ্ধতি
শুধুমাত্র একটি ইনপুটের উপর নির্ভর করলে একটি অর্থগত শূন্যতা তৈরি হয়। উদাহরণস্বরূপ, DOM-এ একজন এজেন্ট একটি <div> দেখতে পারে, কিন্তু সে হয়তো জানবে না যে আপনি CSS এবং JavaScript ব্যবহার করে এটিকে একটি কার্যকরী বাটন হিসেবে কনফিগার করেছেন। স্ক্রিনশটের ক্ষেত্রে, একজন এজেন্ট হয়তো স্ক্রিনে বাটনটির অবস্থান শনাক্ত করতে পারলেও, বাটনটির উদ্দিষ্ট গন্তব্য বা এটি যে কাজটি করার জন্য ডিজাইন করা হয়েছে, সে সম্পর্কে সে অবগত থাকে না।
তাই, আধুনিক এজেন্টরা একাধিক পদ্ধতিকে একত্রিত করে। তারা ইন্টারেক্টিভ উপাদানগুলোর একটি পরিচ্ছন্ন ও সুসংগঠিত তালিকা পেতে DOM এবং অ্যাক্সেসিবিলিটি ট্রি ব্যবহার করে, এবং তারপর লেআউট, গ্রুপিং ও ভিজ্যুয়াল সংকেতগুলো বোঝার জন্য সেটিকে একটি ভিজ্যুয়াল রেন্ডারিংয়ের সাথে মিলিয়ে দেখে।
আমাদের কাজ হলো এই সব চ্যানেল জুড়ে পরিষ্কার সংকেত সরবরাহ করা।
এজেন্ট-বান্ধব ওয়েবসাইট তৈরি করুন
এজেন্টদের আপনার ওয়েবসাইট নেভিগেট করতে সাহায্য করার জন্য, নিম্নলিখিত বিষয়গুলো বিবেচনা করুন:
- মানুষ বা কোনো এজেন্টের দ্বারা গৃহীত সকল প্রয়োজনীয় পদক্ষেপ ইন্টারফেসে স্পষ্টভাবে প্রতিফলিত হওয়া উচিত।
- স্থিতিশীল লেআউট নিশ্চিত করুন। আপনার ওয়েবসাইটের লেআউট যদি ক্রমাগত পরিবর্তিত হতে থাকে, যেমন প্রোডাক্ট পেজের ' অ্যাড টু কার্ট' বাটনটি প্রতিটি প্রোডাক্ট ক্যাটাগরির জন্য ভিন্ন ভিন্ন স্থানে থাকলে, স্ক্রিনশট গ্রহণকারী এজেন্টরা বিভ্রান্ত হতে পারেন।
- এমন "ঘোস্ট" এলিমেন্ট বা স্বচ্ছ ওভারলে পরিহার করুন যা ইন্টারেক্টিভ এলিমেন্টগুলোকে ঢেকে ফেলতে পারে। এজেন্টের করা ভিজ্যুয়াল বিশ্লেষণে ঢাকা থাকা নোডগুলো বাদ পড়ে যেতে পারে, এমনকি যদি নোডটিকে স্বচ্ছ বলে মনে হয়।
- সিমান্টিক এইচটিএমএল ব্যবহার করে কার্যকরী এলিমেন্ট ডিজাইন করুন। পরিবর্তিত
<div>এবং<span>এলিমেন্টের চেয়ে<button>এবং<a>ট্যাগ ব্যবহার করা শ্রেয়। এজেন্টরা এগুলোকে ইন্টারেক্টিভ হিসেবে শনাক্ত করে।- আপনি যদি সিমান্টিক এইচটিএমএল ব্যবহার করতে না পারেন, তাহলে এলিমেন্টটিকে সর্বদা উপযুক্ত
roleএবংtabindexপ্রদান করুন। উদাহরণস্বরূপ,<div role="button">।
- আপনি যদি সিমান্টিক এইচটিএমএল ব্যবহার করতে না পারেন, তাহলে এলিমেন্টটিকে সর্বদা উপযুক্ত
- CSS-এ
cursor: pointerসেট করা, যা কার্যকারিতার একটি জোরালো সংকেত। -
<label>ট্যাগগুলোকে ইনপুটের সাথে লিঙ্ক করতে সেগুলোতেforঅ্যাট্রিবিউট যোগ করুন। এটি অ্যাকশন স্ট্রিংয়ের সাথে সরাসরি সংযুক্ত লেবেল টেক্সট নির্দেশ করার মাধ্যমে এআই এজেন্টকে একটি ফিল্ডের উদ্দেশ্য বুঝতে সাহায্য করে। - ব্যবহারকারীর যাত্রা অব্যাহত রাখার জন্য প্রয়োজনীয় যেকোনো ইন্টারেক্টিভ উপাদানের দৃশ্যমান ক্ষেত্রফল ৮ বর্গ পিক্সেলের চেয়ে বড় রাখুন, যাতে ভিজ্যুয়াল অ্যানালাইসিসের কারণে সেগুলো বাদ না পড়ে।
পরবর্তী পদক্ষেপ
একটি সাইটকে 'এজেন্ট-রেডি' করার জন্য আমরা যা কিছু পরামর্শ দিই, তা সাইটটিকে মানুষের জন্যও আরও উন্নত করে তোলে।
ওয়েবসাইটগুলোকে এআই এজেন্ট-বান্ধব করে তোলা হলো সুগঠিত, প্রবেশযোগ্য এবং অর্থপূর্ণ ওয়েবসাইট তৈরির মৌলিক নীতিগুলোর প্রতি পুনরায় অঙ্গীকারবদ্ধ হওয়ার একটি প্রণোদনা।
- ওয়েবসাইটকে এজেন্টের সাথে যোগাযোগে সাহায্য করার জন্য প্রস্তাবিত একটি ওয়েব স্ট্যান্ডার্ড WebMCP সম্পর্কে পড়ুন এবং পরীক্ষা-নিরীক্ষা শুরু করতে আর্লি প্রিভিউ প্রোগ্রামে সাইন আপ করুন।
- আপনার অ্যাক্সেসিবিলিটি ট্রি (A11y Tree) নিরীক্ষা করুন : আপনার সাইটের হায়ারার্কি মেশিন-পঠনযোগ্য এবং স্থিতিশীল কিনা তা নিশ্চিত করতে বিদ্যমান টুল ব্যবহার করুন।