تصور کنید یک برنامه‌نویس هستید که از Claude Code برای ساخت سریع یک فرم پرداخت یا یک مودال (Modal) استفاده می‌کند. سرعت بالای این ابزارها تحسین‌برانگیز است، اما اغلب منجر به خروجی‌هایی می‌شود که دکمه‌هایی با کنتراست پایین دارند یا برچسب‌های فرم (Form Labels) در آن‌ها فراموش شده است. برای حل این مشکل، توسعه‌دهنده WebAbility.io یک سرور تخصصی پروتکل زمینهٔ مدل (MCP) — شبیه به یک مترجم استاندارد که به هوش مصنوعی اجازه می‌دهد با ابزارهای خارجی حرف بزند — منتشر کرده است تا انطباق با استانداردهای دسترسی‌پذیری (Accessibility Compliance) را به‌طور خودکار و مستقل مدیریت کند.
به جای اینکه انسان گزارش‌های ایستا را بخواند و کدها را دستی اصلاح کند، عامل (Agent) — مثل دستیاری که هم می‌بیند و هم کد می‌زند — اکنون صفحه زنده را اسکن می‌کند، اصلاحات را اعمال کرده و نتیجه را در یک حلقهٔ مداوم تأیید می‌کند. این ابزار در واقع یک جفت چشم اضافی به عامل‌های کدنویس می‌دهد تا موانع دسترسی را شناسایی کنند و آن‌ها را پیش از نهایی شدن کد برطرف سازند.
ابزارهای دسترسی‌پذیری سنتی همیشه گزارش‌های یک‌طرفه بودند؛ توسعه‌دهنده نمره‌ای می‌گرفت و لیستی از خطاها را دریافت می‌کرد، سپس ساعت‌ها وقت صرف پیدا کردن فایل‌های مربوطه در کل کدبیس خود می‌کرد. همان‌طور که در تحلیل قبلی ما درباره‌ی یکپارچگی عامل‌های هوش مصنوعی با ابزارهای تجاری اشاره کردیم (مشابه روشی که Camberstack تبلیغات گوگل را از طریق MCP به Claude متصل می‌کند)، این رویکرد جدید، فرآیند «گزارش‌دهی» را به یک فرآیند «اجرا» تبدیل می‌کند.
نصب و یکپارچه‌سازی
این سرور میزبانی شده در آدرس https://mcp.webability.io/mcp قرار دارد و از پروتکل Streamable HTTP استفاده می‌کند. برای شروع کار، به هیچ کلید API یا ایجاد حسابی نیاز نیست. روش اتصال بسته به کلاینت یا ابزاری که استفاده می‌کنید متفاوت است:
- Cursor: کاربران می‌توانند از یک لینک تک‌کلیکی استفاده کنند یا URL را تحت کلید سرور
webabilityبه پیکربندی MCP اضافه کنند. - Claude Code: نصب از طریق دستور
claude mcp add --transport http webability https://mcp.webability.io/mcpانجام می‌شود. این ابزار در کنار قابلیت‌های کدنویسی، پتانسیل بالایی برای بهینه‌سازی UI دارد، هرچند دستیابی به نمره ۱۰۰ در Lighthouse با استفاده از Claude Code همچنان نیازمند نظارت انسانی است. - VS Code: سرور به فایل پیکربندی
.vscode/mcp.jsonاضافه می‌گردد. - سایر ابزارها: همین URL در Windsurf، Zed، ChatGPT (به عنوان یک کانکتور) و Gemini CLI نیز فعال است.
- اجرای محلی: برای کسانی که ترجیح می‌دهند از stdio استفاده کنند، سرور از طریق دستور
npx -y @webability/mcpقابل اجراست.
سازوکار اسکن، اصلاح و تأیید
WebAbility MCP از یک حلقهٔ سه‌مرحله‌ای استفاده می‌کند تا اطمینان حاصل شود اصلاحات فقط پیشنهاد نمی‌شوند، بلکه اثبات می‌شوند. ابتدا ابزار scan_page خروجی رندر شده سایت را تحلیل می‌کند، نه کدهای خام JSX یا HTML را. این موضوع حیاتی است زیرا تضمین می‌کند عامل دقیقاً همان چیزی را می‌بیند که یک کاربر با صفحه‌خوان (Screen Reader) با آن مواجه می‌شود.
طبق گزارش منتشر شده در dev.to در تاریخ ۱۱ اکتبر ۲۰۲۶، این سرور داده‌ها را از سه موتور متمایز جمع‌آوری می‌کند تا پوشش کاملی از استانداردهای دسترسی داشته باشد:
- WebAbility detectors: بیش از ۶۰ قانون تخصصی.
- axe-core: ۱۰۴ قانون استاندارد صنعت.
- HTML_CodeSniffer: بیش از ۲۰۰ قانون ساختاری.
برای جلوگیری از ایجاد نویز و تکرار، سیستم نتایج را حذف تکرار (Deduplicate) می‌کند؛ بنابراین اگر چندین موتور یک برچسب گم‌شده را شناسایی کنند، عامل تنها یک مورد را می‌بیند. خروجی‌ها به سه سطح تقسیم می‌شوند:
- Issues: تخلفاتی با اطمینان بالا که برای عامل امن است که روی آن‌ها اقدام کند.
- Incomplete: یافته‌هایی که نیاز به قضاوت انسانی دارند؛ مثلاً بررسی کنتراست روی یک عکس یا متن جایگزین (alt text) یک تصویر تبلیغاتی. عامل این موارد را به عنوان «سوال» در نظر می‌گیرد، نه «باگ».
- Summary: شمارش خطاها بر اساس شدت (Severity) و تعداد موارد ناقص.
اعمال هوشمند اصلاحات
همه اصلاحات دسترسی‌پذیری یکسان نیستند. این ابزار یک عملیات مشخص (fix.op) را از یک مجموعه بسته اختصاص می‌دهد: add-attribute (افزودن ویژگی)، set-attribute (تنظیم ویژگی)، remove-attribute (حذف ویژگی)، add-element (افزودن المان)، remove-element (حذف المان)، add-text-content (افزودن محتوای متنی) یا suggest (پیشنهاد).
برای جلوگیری از اینکه هوش مصنوعی حدس‌های کورکورانه بزند، از برچسب‌های «قابلیت اصلاح» (Fixability) استفاده می‌شود:
- Mechanical: مقدار دقیقاً مشخص است و عامل آن را همان‌طور که داده شده اعمال می‌کند.
- Contextual: عملیات مشخص است اما مقدار نیاز به قضاوت دارد (مثلاً نوشتن متن alt)؛ در اینجا عامل HTML را می‌خواند و مقدار مناسب را می‌نویسد.
- Visual: نیاز به خروجی رندر شده دارد، مانند بررسی حلقه‌های فوکوس (Focus Rings) یا اندازه هدف (Target Size). در این حالت، عامل تغییر را برای بررسی انسان پیشنهاد می‌دهد.
برای مواردی که نیاز به کدهای سازگار با فریم‌ورک دارند، ابزار generate_ai_fix پیشنهاداتی تولید می‌کند که با استک تکنولوژی پروژه مطابقت داشته باشد. این موضوع برای جلوگیری از تکرار الگوهای CSS است که دستیارهای هوش مصنوعی معمولاً در محیط عملیاتی می‌شکنند و باعث به‌هم‌ریختگی ظاهر سایت می‌شوند. ابزار detect_framework پیش از تولید اصلاحیه، تشخیص می‌دهد که پروژه از Tailwind، MUI، Bootstrap، Next.js، WordPress یا CSS ساده استفاده می‌کند.
تأیید و توسعه محلی
حیاتی‌ترین بخش این حلقه، ابزار verify_fix است. پس از اینکه عامل یک فایل را ویرایش کرد، دوباره المان خاص را اسکن می‌کند. اگر تأییدیه مقدار false برگرداند — برای مثال، اگر نسبت کنتراست یک دکمه ۳.۱:۱ باشد در حالی که استاندارد ۴.۵:۱ را می‌طلبد — عامل مجبور است روش دیگری (مانند استفاده از یک توکن رنگ تیره‌تر) را امتحان کند تا زمانی که شرط برآورده شود.
علاوه بر این حلقه پایه، MCP ابزارهای ممیزی پیشرفته‌ای را ارائه می‌دهد:
- diff_scan: مقایسه دو اسکن برای گزارش موارد اصلاح‌شده، خطاهای جدید و موارد باقی‌مانده جهت جلوگیری از بازگشت خطاها (Regressions).
- flow_scan: پیمایش جریان‌های چندمرحله‌ای (مثلاً از صفحه ورود تا پرداخت) برای گزارش خطاهای منحصر‌به‌فرد در طول کل مسیر کاربر.
- visual_audit: یک بررسی بصری که از اسکرین‌شات‌ها برای یافتن مواردی استفاده می‌کند که موتورهای DOM نمی‌بینند، مانند عدم وضوح فوکوس.
- start_audit/get_audit: تولید گزارش‌های کامل در قالب‌های PDF یا Excel. همچنین یک فرمت «فشرده» (Compact) برای عامل‌هایی با پنجره زمینه (Context Window) کوچک در دسترس است.
برای مدیریت توسعه محلی، سیستم شامل یک ابزار تونل است. با اجرای دستور webability-tunnel --port 3000، سرور MCP میزبانی شده می‌تواند به localhost برنامه‌نویس دسترسی داشته باشد و به عامل اجازه دهد اپلیکیشن را پیش از ارسال هر کدی به محیط Production اسکن و اصلاح کند. این رویکرد مشابه تلاش‌های Roseram برای انتقال محیط کدنویسی عامل‌محور به مرورگر است تا سدهای ورود توسعه‌دهندگان را با حذف پیچیدگی‌های محیطی بشکند.
برای کسانی که از React 18 یا نسخه‌های توسعه Vue استفاده می‌کنند، این ابزار اشاره‌گرهای مستقیم به سورس کد ارائه می‌دهد. این سیستم سلکتور DOM را به فایل، خط و ستون دقیق (مثلاً src/components/SignupForm.tsx:18:9) و نام کامپوننت مپ می‌کند. در نسخه‌های Production که این داده‌ها حذف شده‌اند، ابزار محلی find_source سلکتورها را به درخت سورس مپ می‌کند.
مرزهای انسانی و دسترسی
این MCP کاملاً رایگان است و هیچ دوره آزمایشی یا سطح پولی ندارد. کاربران ناشناس محدودیت‌های «استفاده منصفانه» شامل ۳۰ اسکن مرورگر و ۱۰ اصلاح AI در هر ساعت به ازای هر IP دارند. کاربرانی که یک حساب رایگان WebAbility (از طریق OAuth یا دستور webability login) داشته باشند، این محدودیت‌ها برایشان برداشته شده و به ابزارهای visual_audit ،start_audit و get_audit دسترسی پیدا می‌کنند.
با وجود اتوماسیون، سیستم یک مرز سخت‌گیرانه برای دخالت انسان حفظ کرده است. سطح «Incomplete» دقیقاً به این دلیل وجود دارد که هیچ اسکنر خودکاری نمی‌تواند تشخیص دهد آیا یک متن جایگزین (alt text) واقعاً معنادار است، آیا ترتیب تیترها با جریان منطقی صفحه همخوانی دارد یا آیا یک صفحه‌خوان یک ویجت سفارشی را به‌طور مفید اعلام می‌کند یا خیر. هدف این MCP پاک‌سازی «لایه خودکار» مشکلات WCAG است تا تست‌های ظریف‌تر با فناوری‌های کمکی به برنامه‌نویس انسانی سپرده شود.
این تغییر، دسترسی‌پذیری را از یک «مرحله ممیزی» در پایان پروژه به یک عادت توسعه در لحظه تبدیل می‌کند. با ادغام این بررسی‌ها در عامل‌هایی مثل Claude Code، Cursor یا Windsurf، انطباق با استانداردها به جای اینکه یک کار اضافی و خسته‌کننده باشد، به محصول جانبی فرآیند کدنویسی تبدیل می‌شود.
گام بعدی شما
- اگر از Cursor یا Claude Code استفاده می‌کنید، سرور WebAbility را اضافه کنید تا خطاهای UI را در لحظه بگیرید.
- برای پروژه‌های بزرگ، از
flow_scanاستفاده کنید تا تجربه کاربر در کل مسیر خرید یا ثبت‌نام بررسی شود. - در کنار اتوماسیون، حتماً موارد سطح Incomplete را بازبینی کنید تا معنای محتوایی سایت حفظ شود.
اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.
گفتگو