وبسایت شما نوع جدیدی از بازدیدکننده دارد. برخی از کاربران انسانی از ناوبری دستی به سمت واگذاری سفرهای هدفمند به عوامل هوش مصنوعی روی آوردهاند. این سیستمهای خودکار میتوانند ورودیها را تفسیر، برنامهریزی و اقدامات را از طرف کاربر اجرا کنند.
با این حال، بسیاری از وبسایتهای ما طوری طراحی شدهاند که برای انسانها زیبا باشند، با حالتهای شناور پیچیده، طرحبندیهای متغیر و حرکت روان. این از نظر عملکردی برای عاملها (عاملها) مشکل دارد.
نحوه مشاهده سایت شما توسط نمایندگان
نمایندگان وبسایت شما را از طریق مانیتور مشاهده نمیکنند. آنها بر اساس نمایشی قابل خواندن توسط ماشین از سایت شما عمل میکنند. کیفیت این نمایش، عملکرد آنها را تعیین میکند.
نمایندگان میتوانند وبسایت شما را به ۳ روش اصلی مشاهده کنند: اسکرینشات، HTML خام و درخت دسترسی .
اسکرینشاتها
عامل از صفحه رندر شده یک عکس میگیرد و از یک مدل بینایی برای شناسایی عناصر استفاده میکند. بر اساس تصویر، عامل میتواند تشخیص دهد که نوار جستجو در بالا سمت راست یک جستجوی سراسری است، در حالی که یک کادر در وسط احتمالاً یک فیلد فرم است. نشانههای بصری میتوانند مفید باشند، زیرا عاملها میتوانند از رنگ، اندازه و نزدیکی برای تعیین اهمیت استفاده کنند. یک دکمه حذف بزرگ احتمالاً با احتیاط بیشتری نسبت به یک لینک کوچک "راهنما" تفسیر میشود. با این حال، تجزیه و تحلیل تصاویر میتواند کند و پرهزینه باشد (از نظر توکنهای استفاده شده)، و این باعث میشود که در صورت گیجکننده بودن ساختار، به عنوان یک پشتیبان بهتر باشد.
اچتیامال
عامل، DOM را تجزیه و تحلیل کرده و HTML را میخواند. این عامل نحوه قرارگیری عناصر تو در تو، سلسله مراتب منطقی درخت DOM، ویژگیهایی مانند شناسهها و کلاسهایی که ساختار را تعریف میکنند و رشتههای داده خام که ستون فقرات اطلاعاتی سایت را تشکیل میدهند را درک میکند. این به عامل کمک میکند تا رابطه بین عناصر را درک کند. اگر دکمه "همین حالا بخرید" درون یک ظرف محصول باشد، عامل فرض میکند که آن دکمه متعلق به آن محصول خاص است.
درخت دسترسی
درخت دسترسی یک API بومی مرورگر است که DOM را به مهمترین موارد تقسیم میکند: نقشها، نامها و حالتهای عناصر تعاملی. این خلاصه معنایی صفحه است که توسط فناوری کمکی استفاده میشود. برای یک عامل هوش مصنوعی، به عنوان یک نقشه با کیفیت بالا عمل میکند که "نویز" بصری CSS را نادیده میگیرد تا بر کاربرد خالص تمرکز کند. با تفسیر این درخت، یک عامل میتواند هدف عملکردی هر دکمه، اسلایدر و فیلد ورودی را بیاموزد.
روشهای ترکیبی
تکیه بر یک ورودی واحد، یک شکاف معنایی ایجاد میکند. برای مثال، در DOM، یک عامل ممکن است یک <div> ببیند بدون اینکه بداند شما واقعاً آن را به عنوان یک دکمه کاربردی با CSS و جاوا اسکریپت پیکربندی کردهاید. با اسکرینشاتها، ممکن است یک عامل بتواند محل قرارگیری آن دکمه را روی صفحه تشخیص دهد، اما هنوز از مقصد یا عملی که برای فعال کردن آن دکمه طراحی شده است، بیاطلاع باشد.
بنابراین، عاملهای مدرن، چندین روش را با هم ترکیب میکنند. آنها از DOM و درخت دسترسی برای دستیابی به فهرستی تمیز و ساختاریافته از عناصر تعاملی استفاده میکنند و سپس آن را با یک رندر بصری برای درک طرحبندی، گروهبندی و نشانههای بصری، ارجاع متقابل میدهند.
وظیفه ما ارائه سیگنالهای شفاف در تمام این کانالها است.
وبسایتهای سازگار با عامل (agent-friendly) بسازید
برای کمک به نمایندگان در پیمایش وبسایت خود، موارد زیر را در نظر بگیرید:
- تمام اقدامات لازم، که توسط یک انسان یا عامل انجام میشود، باید به وضوح در رابط کاربری منعکس شود.
- از طرحبندی پایدار اطمینان حاصل کنید. اگر طرحبندی وبسایت شما دائماً در حال تغییر باشد، مثلاً وقتی دکمه « افزودن به سبد خرید» در صفحه محصول برای هر دسته محصول در مکان متفاوتی قرار دارد، نمایندگانی که از صفحه عکس میگیرند، احتمالاً گیج میشوند.
- از عناصر "شبح" یا پوششهای شفاف که ممکن است عناصر تعاملی را پنهان کنند، خودداری کنید. تجزیه و تحلیل بصری انجام شده توسط عامل ممکن است گرههایی را که پوشیده شدهاند، حتی اگر گره شفاف به نظر برسد، کنار بگذارد.
- عناصر عملی را با HTML معنایی طراحی کنید. برچسبهای
<button>و<a>را به عناصر<div>و<span>تغییر یافته ترجیح دهید. عاملها این موارد را به عنوان تعاملی تشخیص میدهند.- اگر نمیتوانید از HTML معنایی استفاده کنید، همیشه
roleوtabindexمناسب را به عنصر ارائه دهید. برای مثال،<div role="button">.
- اگر نمیتوانید از HTML معنایی استفاده کنید، همیشه
- تنظیم
cursor: pointerدر CSS، که یک سیگنال قوی برای قابلیت اجرا است. - ویژگی
forرا به تگهای<label>اضافه کنید تا آنها را به ورودیها پیوند دهید. این به عامل هوش مصنوعی کمک میکند تا با نشان دادن متن برچسبی که مستقیماً به رشته عملیات متصل است، هدف یک فیلد را درک کند. - مطمئن شوید که هر عنصر تعاملی که برای ادامه مسیر کاربر لازم است، ناحیه قابل مشاهدهای بزرگتر از ۸ پیکسل مربع داشته باشد تا از فیلتر شدن توسط تحلیل بصری جلوگیری شود.
مراحل بعدی
هر چیزی که ما برای «آمادهسازی سایت برای کاربر» پیشنهاد میکنیم، سایتها را برای انسانها نیز بهتر میکند.
سازگار کردن وبسایتها با عاملهای هوش مصنوعی، انگیزهای برای تعهد مجدد به اصول بنیادی آن در ساخت وبسایتهای ساختاریافته، قابل دسترس و معنایی است.
- درباره WebMCP، یک استاندارد وب پیشنهادی برای کمک به وبسایتها در تعامل با نمایندگان، مطالعه کنید و برای شروع آزمایش، در برنامه پیشنمایش اولیه ثبتنام کنید.
- درخت A11y خود را بررسی کنید : از ابزارهای موجود برای اطمینان از خوانا بودن و پایداری سلسله مراتب سایت خود برای ماشین استفاده کنید.