ابزار رایگان دسترس‌پذیری

بررسی دسترس‌پذیری سایت

آدرس سایت خود را وارد کنید تا همان صفحه و حداکثر چهار صفحه کلیدی دیگر را در یک مرورگر واقعی با قواعد WCAG 2.2 در سطح A و AA تست کنیم. هر مانع همراه با عنصر، صفحه، یک اسکرین‌شات و توضیحی درباره اینکه چه کسانی را تحت تأثیر قرار می‌دهد نمایش داده می‌شود.

رایگان. حداکثر پنج صفحه کلیدی را در حدود یک دقیقه تست می‌کند.

این ابزار چه چیزهایی را بررسی می‌کند

  • پنج صفحه که نماینده سایت شما هستند

    صفحه‌ای که وارد می‌کنید، به‌علاوه حداکثر چهار صفحه که بر اساس نوع سایت از میان لینک‌های آن انتخاب می‌شوند. در یک فروشگاه یعنی یک صفحه مجموعه (collection)، یک صفحه محصول، سبد خرید و یک صفحه محتوایی؛ در سایت‌های دیگر، صفحاتی مانند قیمت‌ها، تماس، یک مقاله یا خدمات. قالب‌ها تکرار می‌شوند، بنابراین یک صفحه محصول معمولاً مشکلات همه صفحات محصول را نشان می‌دهد.

  • قواعد WCAG روی صفحه رندرشده

    هر صفحه در Chromium با ابعاد 1366 × 900 بارگذاری می‌شود و axe-core، موتور قواعد متن‌باز Deque، پس از اجرای اسکریپت‌های صفحه، قواعد WCAG 2.0، 2.1 و 2.2 در سطح A و AA را اجرا می‌کند. به این ترتیب مشکلاتی هم شناسایی می‌شوند که یک قالب یا اپلیکیشن فقط پس از ساخته شدن صفحه در مرورگر ایجاد می‌کند.

  • شدت تأثیر و معیارهای موفقیت

    برای هر قاعده‌ای که رد شده است، شدت تأثیر آن نمایش داده می‌شود: بحرانی، جدی، متوسط یا جزئی. همچنین معیارهای موفقیت WCAG مرتبط با آن قاعده و تعداد عناصر و صفحاتی که تحت تأثیر قرار می‌دهد را می‌بینید.

  • عنصر ردشده، با کادر مشخص

    کد HTML یک عنصر نمونه و اسکرین‌شاتی از صفحه که دور همان عنصر کادر کشیده شده است، تا شما یا توسعه‌دهنده‌تان بتوانید بدون حدس زدن آن را در قالب پیدا کنید.

  • مواردی که یک انسان باید درباره‌شان تصمیم بگیرد

    وقتی axe-core به موردی برمی‌خورد که نمی‌تواند درباره‌اش به نتیجه قطعی برسد، مثلاً متنی روی تصویر پس‌زمینه که کنتراستش قابل اندازه‌گیری نیست، آن مورد با وضعیت نیاز به بررسی فهرست می‌شود. چنین موردی هرگز خطا شمرده نمی‌شود.

  • آزمون صفحه‌کلید

    در صفحه اول، 40 بار کلید Tab را فشار می‌دهیم و ثبت می‌کنیم فوکوس به کجا می‌رود: آیا اصلاً جابه‌جا می‌شود، آیا در یک حلقه گیر می‌افتد (اغلب داخل بنر کوکی)، آیا اولین توقف یک لینک پرش (skip link) است، و کدام عناصرِ دارای فوکوس هیچ نشانگر فوکوس قابل‌مشاهده‌ای ندارند. این بررسی آخر یک روش تقریبی (heuristic) است، به همین دلیل با وضعیت نیاز به بررسی نمایش داده می‌شود.

آنچه نمی‌تواند بررسی کند

  • شنیدن آنچه صفحه‌خوان اعلام می‌کند. نرم‌افزار می‌تواند تأیید کند که یک دکمه نام دارد، اما نمی‌تواند تأیید کند که آن نام هنگام خوانده شدن با صدا معنادار است.
  • قضاوت درباره زیرنویس‌ها، متن‌های پیاده‌شده (transcript) یا توصیف‌های صوتی ویدیو و صدا.
  • ارزیابی معیارهای شناختی و محتوایی، مثلاً اینکه آیا دستورالعمل‌ها روشن هستند یا پیام‌های خطا به افراد کمک می‌کنند مشکل را برطرف کنند.
  • تست صفحاتی که پشت ورود به حساب، رمز عبور یا محافظت ضد ربات قرار دارند، یا طی کردن مراحل پرداخت.
  • اینکه به شما بگوید سایتتان با WCAG مطابقت دارد یا الزامات هیچ قانونی را رعایت می‌کند. قواعد خودکار بخشی از مشکلات را پیدا می‌کنند؛ بقیه به بررسی انسانی نیاز دارند.

چرا اهمیت دارد

موانع دسترس‌پذیری اغلب اشتباهات کوچکی در قالب هستند که اثر بزرگی دارند. دکمه سبد خریدی که فقط یک آیکون است و نام قابل‌دسترس (accessible name) ندارد، فقط با عنوان «دکمه» (button) اعلام می‌شود و کاربر صفحه‌خوان نمی‌فهمد چه کاری انجام می‌دهد. متن خاکستری روی زمینه سفید که به نسبت کنتراست 4.5:1 نمی‌رسد، برای بسیاری از افراد کم‌بینا دشوارخوان است، و همین‌طور برای هر کسی که زیر نور شدید آفتاب از گوشی استفاده می‌کند.

از آنجا که هدر، کارت محصول و فوتر یکسانی در همه صفحات تکرار می‌شوند، یک اصلاح در قالب می‌تواند صدها خطا را یک‌جا برطرف کند. به همین دلیل نتایج بر اساس قاعده گروه‌بندی می‌شوند و تعداد عناصر و صفحات کنار هر قاعده می‌آید، به‌جای اینکه هر مورد جداگانه به‌عنوان یک مشکل مستقل فهرست شود.

دسترس‌پذیری در بسیاری از کشورها جنبه حقوقی هم دارد. یک اسکن نمی‌تواند به شما بگوید که آیا قانونی شامل حال شما می‌شود یا آیا الزامات آن را رعایت می‌کنید. آنچه به شما می‌دهد فهرستی تاریخ‌دار از موانع واقعی در صفحات خودتان است، که در هر حال نقطه شروع عملی است.

نحوه خواندن نتایج

بحرانی
این مانع می‌تواند برخی افراد را کاملاً از استفاده از آن عنصر بازدارد، مثلاً فیلد فرمی بدون برچسب یا دکمه‌ای بدون نام. این موارد را اول برطرف کنید.
جدی
این مانع انجام یک کار را برای برخی افراد بسیار دشوارتر می‌کند، مثلاً متن اصلی صفحه که به نسبت کنتراست لازم نمی‌رسد.
متوسط
این مانع باعث دشواری یا سردرگمی می‌شود، اما افراد معمولاً می‌توانند راهی برای دور زدن آن پیدا کنند.
جزئی
یک مشکل یا مزاحمت کوچک. باز هم ارزش دارد دفعه بعد که آن قالب را ویرایش می‌کنید برطرفش کنید.
معیارهای موفقیت WCAG
شماره‌های کنار هر قاعده، مانند 1.1.1 یا 1.4.3، معیارهایی هستند که آن قاعده می‌سنجد. قاعده‌ای که معیاری برایش ذکر نشده، یک روش توصیه‌شده (best practice) است، نه الزام WCAG.
عناصر و صفحات
تعداد عناصری که در آن قاعده رد شده‌اند و تعداد صفحاتی از صفحات تست‌شده که این اتفاق در آن‌ها افتاده است. قاعده‌ای که در همه صفحات رد می‌شود معمولاً در یک بخش مشترک مانند هدر، منو یا فوتر قرار دارد.
نیاز به بررسی
axe-core به موردی برخورده که نتوانسته درباره‌اش تصمیم بگیرد. خودتان عنصر را بررسی کنید: ممکن است قبول شود یا رد. این موارد خطا شمرده نمی‌شوند.
تله فوکوس
کلید Tab مدام بین همان چند عنصر می‌چرخید. اگر این عناصر متعلق به بنر کوکی باشند، کاربران صفحه‌کلید ممکن است نتوانند به بقیه صفحه برسند.
فوکوس جابه‌جا نمی‌شود (Focus doesn’t move)
با فشردن Tab هیچ عنصری فوکوس نگرفت. ممکن است لینک‌ها و دکمه‌ها با عناصر div یا span ساخته شده باشند، یا اسکریپتی فشردن کلید را مهار کند.
لینک پرش
اینکه آیا اولین توقف Tab یک لینک «رفتن به محتوا» (Skip to content) است. بدون آن، کاربران صفحه‌کلید در هر صفحه باید با Tab از کل هدر عبور کنند. نشانه‌های ساختاری (landmarks) و سرتیترها هم می‌توانند معیار WCAG 2.4.1 Bypass Blocks را برآورده کنند.
نبود نشانگر فوکوس قابل‌مشاهده
عناصری که هنگام دریافت فوکوس، هیچ outline، سایه (box shadow) یا زیرخطی در آن‌ها ندیدیم. سبکی دیگر، مانند تغییر رنگ، ممکن است همچنان قابل‌مشاهده باشد، پس خودتان با Tab از این عناصر عبور کنید تا مطمئن شوید.

نحوه رفع رایج‌ترین مشکلات

  • متنی که به نسبت کنتراست لازم نمی‌رسد

    متن معمولی باید دست‌کم نسبت 4.5:1 با پس‌زمینه خود داشته باشد و متن بزرگ (حدود 24 px، یا حدود 18.7 px به‌صورت پررنگ) به 3:1 نیاز دارد. رنگ را در تنظیمات قالب یا توکن‌های طراحی (design tokens) تغییر دهید، نه عنصر به عنصر، و سپس متن راهنمای داخل فیلدها (placeholder)، حالت‌های hover و متن روی تصاویر را دوباره بررسی کنید.

  • تصاویر بدون متن جایگزین (alt)

    به هر تصویر معنادار یک ویژگی alt بدهید که بگوید تصویر چه چیزی را نشان می‌دهد یا چه کاری انجام می‌دهد، مثلاً نام و رنگ محصول. تصاویر تزئینی یک alt خالی (alt="") می‌گیرند تا صفحه‌خوان‌ها از آن‌ها بگذرند. در Shopify متن جایگزین را از روی تصویر در بخش Media محصول اضافه می‌کنید؛ در WordPress، در فیلد Alternative Text (متن جایگزین) در کتابخانه رسانه.

  • فیلدهای فرم بدون برچسب

    هر فیلد ورودی را با <label for> که با id فیلد مطابقت دارد به یک برچسب متصل کنید، یا وقتی متن قابل‌مشاهده‌ای وجود ندارد از aria-label استفاده کنید. به متن placeholder به‌عنوان تنها برچسب تکیه نکنید: به محض اینکه کسی شروع به تایپ کند ناپدید می‌شود. فرم‌های عضویت در خبرنامه و کادرهای جست‌وجوی هدر معمولاً مقصر اصلی‌اند.

  • دکمه‌ها و لینک‌های بدون نام قابل‌دسترس

    کنترل‌های آیکونی برای سبد خرید، جست‌وجو، منو یا پروفایل‌های شبکه‌های اجتماعی اغلب فقط یک SVG دارند. متن قابل‌مشاهده یا یک aria-label اضافه کنید که بگوید آن کنترل چه می‌کند («باز کردن سبد خرید»، نه «آیکون»)، و به خود SVG ویژگی aria-hidden="true" بدهید.

  • بنر کوکی که فوکوس را به دام می‌اندازد

    مطمئن شوید هر دکمه بنر با Tab در دسترس است و با Enter یا Space کار می‌کند، با بستن بنر فوکوس به صفحه بازمی‌گردد، و بنری که مانع استفاده از صفحه نمی‌شود اصلاً فوکوس را نگه نمی‌دارد. تنظیمات ابزار مدیریت رضایت کوکی (consent tool) خود را بررسی کنید و اگر اسکریپت آن قدیمی است به‌روزرسانی‌اش کنید.

  • حذف outline فوکوس در CSS

    در فایل‌های استایل خود دنبال outline: none یا outline: 0 روی لینک‌ها، دکمه‌ها و :focus بگردید. آن را با یک سبک قابل‌مشاهده جایگزین کنید، مانند :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

پرسش‌هایی درباره این ابزار

آیا این ابزار بررسی دسترس‌پذیری رایگان است؟

بله. نیازی به ثبت‌نام نیست؛ فقط تأیید می‌کنید که مالک یا مدیر سایت هستید. گزارش رفع مشکلات دسترس‌پذیری (نسخه پولی) حداکثر 20 صفحه دیگر از نقشه سایت شما، یک مسیر کامل فقط با صفحه‌کلید، بررسی reflow در عرض 320 px، کد قبل و بعد که بر اساس markup ردشده خود شما ساخته می‌شود، پرامپت‌های هوش مصنوعی، یک فایل PDF و 5 تست مجدد را اضافه می‌کند.

یک ابزار خودکار چه مقدار از WCAG را می‌تواند تست کند؟

فقط بخشی از آن را. یک قاعده می‌تواند بررسی کند که تصویر متن alt دارد، اما نه اینکه آن متن تصویر را توصیف می‌کند؛ و اینکه فیلد برچسب دارد، اما نه اینکه برچسب روشن است. نتایج را فهرستی از مشکلات قطعی بدانید و بقیه را با صفحه‌کلید و صفحه‌خوان تست کنید.

اگر اسکن چیزی پیدا نکند، آیا سایت من با ADA یا WCAG مطابقت دارد؟

خیر. هیچ تست خودکاری نمی‌تواند نشان دهد که سایتی با WCAG مطابقت دارد یا الزامات ADA، قانون دسترس‌پذیری اروپا (European Accessibility Act) یا هر قانون دیگری را رعایت می‌کند. نتیجه بدون خطا یعنی قواعد خودکار در صفحات تست‌شده خطایی پیدا نکرده‌اند.

آیا می‌توانم یک سایت آزمایشی (staging) یا صفحات پشت ورود به حساب را بررسی کنم؟

صفحاتی که پشت ورود به حساب، رمز عبور یا محافظت ضد ربات قرار دارند قابل تست نیستند. اگر محافظت ضد ربات شما جلوی اسکن را می‌گیرد، به user agent با نام FixReportsScanner اجازه دسترسی بدهید یا یک نسخه آزمایشی عمومی را تست کنید.

یک مشکل را برطرف کردم. چرا نتیجه هنوز همان است؟

ممکن است برای همان آدرس از نتایج اسکنی که در یک ساعت گذشته انجام شده دوباره استفاده شود. صبر کنید تا آن یک ساعت بگذرد و پیش از تست دوباره، کش صفحه یا کش CDN را پاک کنید.

منابع

ابزارهای مرتبط

گزارش رفع مشکلات دسترس‌پذیری ($174، یک‌باره) از اسکن رایگان کامل شروع می‌کند و صفحات بیشتر، تغییر لازم برای هر یافته، یک فایل PDF و تست‌های مجدد برای تأیید اصلاحات شما را اضافه می‌کند.

درباره گزارش رفع مشکلات دسترس‌پذیری