بازرس دسترسپذیری بررسیهای خودکار WCAG 2.1 سطح AA روی هر صفحه وب انجام میدهد و یک گزارش دستهبندیشده از مشکلات دسترسپذیری تولید میکند. نسبت کنتراست رنگ ناکافی، alt text تصویر گمشده، استفاده نادرست از نقشها و ویژگیهای ARIA، برچسبهای فرم گمشده، مشکلات ناوبری با کیبورد و مناطق landmark گمشده را شناسایی کنید — با برجستهسازی عنصر با یک کلیک برای هر مشکل یافتشده.
دسترسپذیری وب اختیاری نیست — در بسیاری از حوزههای قضایی یک الزام قانونی است و برای ۱۵٪ از جمعیت جهانی که با معلولیت زندگی میکنند ضروری است. با این حال مشکلات دسترسپذیری در طول توسعه و آزمایش عادی نامرئی هستند. یک دکمه ممکن است خوب به نظر برسد اما برای خوانندگان صفحه کاملاً غیرقابل دسترس باشد چون یک div استایلشده بدون ویژگی role است. متن ممکن است برای شما خوانا باشد اما الزامات کنتراست برای کاربران با بینایی ضعیف را نقض کند. بازرس دسترسپذیری این مشکلات نامرئی را به صورت خودکار آشکار میکند. دهها معیار WCAG 2.1 سطح AA را بررسی میکند از جمله نسبت کنتراست رنگ (حداقل ۴.۵:۱ برای متن عادی، ۳:۱ برای متن بزرگ)، alt text گمشده روی تصاویر، برچسبهای گمشده روی ورودیهای فرم، نقشها و ویژگیهای ARIA نامناسب، landmarkهای سند گمشده (nav، main، footer) و نشانگرهای focus کیبورد. هر مشکل شامل عنصر آسیبدیده، معیار WCAG خاص نقضشده و توصیهای برای نحوه اصلاح آن است. روی هر مشکل کلیک کنید تا عنصر روی صفحه برجسته شود.
بررسیهای خودکار را در برابر معیارهای موفقیت WCAG 2.1 سطح AA از جمله دستههای ادراکپذیری، قابلیت عملکرد، قابل فهم بودن و استحکام اجرا میکند. هر بررسی معیار خاص (مثلاً ۱.۴.۳ کنتراست، ۱.۱.۱ محتوای غیر متنی) و وضعیت قبول/رد را نشان میدهد.
نسبت کنتراست بین رنگهای متن و پسزمینه برای هر عنصر متنی روی صفحه را محاسبه میکند. عناصری که زیر ۴.۵:۱ برای متن عادی یا ۳:۱ برای متن بزرگ (بیشتر از ۱۸px یا بیشتر از ۱۴px bold) هستند را علامت میگذارد. نسبت واقعی و حداقل مورد نیاز را نشان میدهد.
هر عنصر img، svg و با نقش image را اسکن میکند. ویژگیهای alt گمشده، alt خالی روی تصاویر غیر تزئینی و alt text بیش از حد عمومی («تصویر»، «عکس») را علامت میگذارد. پیشنهاد میدهد آیا هر تصویر به alt توصیفی، alt خالی (تزئینی) یا role="presentation" نیاز دارد.
استفاده نادرست از نقش ARIA (نقشها روی عناصر اشتباه)، ویژگیهای ARIA مورد نیاز گمشده (مثلاً aria-label روی دکمههای آیکون)، IDهای تکراری ارجاعشده توسط aria-labelledby و مناطق landmark گمشده (بدون main، بدون nav) را بررسی میکند. جایگزینهای HTML معنایی را توصیه میکند.
اطمینان حاصل میکند هر ورودی فرم (متن، ایمیل، رمز عبور، چکباکس، select) یک برچسب مرتبط دارد — یا از طریق یک عنصر label با for/id تطبیقی، aria-label یا aria-labelledby. ورودیهای بدون برچسب برای خوانندگان صفحه غیرقابل دسترس هستند.
مشکلات به عنوان خطا (باید اصلاح شود — موانع دسترسی)، هشدار (باید اصلاح شود — موانع احتمالی) و قبولشده (دسترسپذیر تأیید شده) دستهبندی میشوند. تعداد خطا به صورت برجسته نمایش داده میشود. روی هر مشکل کلیک کنید تا عنصر آسیبدیده روی صفحه برجسته شود.
قبل از راهاندازی یک صفحه یا ویژگی جدید، بازرس دسترسپذیری را اجرا کنید تا مشکلات را زود شناسایی کنید. alt text گمشده، فیلدهای فرم بدون برچسب و نقضهای کنتراست در طول توسعه آسانتر اصلاح میشوند اما کشف در تولید گرانقیمت است.
بسیاری از حوزههای قضایی انطباق WCAG 2.1 سطح AA را الزامی میکنند (ADA در آمریکا، EAA در اتحادیه اروپا). بازرس را روی صفحات عمومی خود اجرا کنید تا شکافهای انطباق را قبل از اینکه به ریسکهای قانونی تبدیل شوند شناسایی کنید.
بررسی دسترسپذیری را به عنوان بخشی از فرایند QA خود در نظر بگیرید. پس از QA بصری و آزمون عملکردی، بازرس دسترسپذیری را اجرا کنید تا تأیید کنید پیادهسازی رگرسیونهای دسترسپذیری ایجاد نمیکند.
بازرس را روی سایت فعلی خود در طول یک جلسه تیمی اجرا کنید تا مشکلات دسترسپذیری واقعی را نشان دهید. برجستهسازی بصری و توضیحات واضح به توسعهدهندگان کمک میکند درک کنند نشانهگذاری دسترسپذیر چگونه به نظر میرسد و چرا اهمیت دارد.
صفحاتی که شامل ویجتهای شخص ثالث، محتوای تعبیهشده یا HTML تولیدشده توسط کاربر هستند را ممیزی کنید. این منابع اغلب مشکلات دسترسپذیری (alt text گمشده، نقضهای کنتراست) ایجاد میکنند که شما هنوز به عنوان صاحب صفحه مسئول آنها هستید.
داک شناور DevSuite Pro را باز کرده و روی آیکون بازرس دسترسپذیری کلیک کنید. ابزار DOM صفحه را برای مشکلات دسترسپذیری اسکن میکند.
یک گزارش دستهبندیشده با خطاها (قرمز)، هشدارها (زرد) و قبولشدهها (سبز) ظاهر میشود. هر بخش مشکلات خاص با عناصر آسیبدیده و مراجع معیار WCAG را فهرست میکند.
روی هر مشکل کلیک کنید تا عنصر آسیبدیده روی صفحه با یک حاشیه رنگی برجسته شده و به آن پیمایش کنید. ارتباط بین گزارش و عنصر DOM فوری است.
هر مشکل شامل یک توصیه خاص است: «alt text توصیف محتوای تصویر را اضافه کنید»، «کنتراست رنگ فونت را به حداقل ۴.۵:۱ افزایش دهید»، «یک عنصر label با for='email' اضافه کنید».
تغییرات را در کدتان ایجاد کنید، صفحه را مجدداً بارگذاری کنید و ممیزی را دوباره اجرا کنید. تعداد خطا باید با حل مشکلات کاهش یابد. هدف صفر خطا است.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
