نحوه بررسی دسترسیپذیری وب با افزونه WAVE
WAVE یک ابزار ارزیابی دسترسی رایگان و قدرتمند است که با قرار دادن آیکونها و ارائه توضیحات در متن صفحه، مشکلات دسترسی را مستقیماً در یک صفحه وب برجسته میکند.
شما میتوانید از WAVE به سه روش اصلی استفاده کنید:
آنلاین: آدرس اینترنتی صفحه را در wave.webaim.org وارد کنید.
افزونههای مرورگر: برای کروم و فایرفاکس، برای آزمایش صفحات محلی قبل از ادغام در محیط عملیاتی مفید است.
API: برای ادغام بررسیهای دسترسیپذیری در گردشهای کاری خودکار.
در این مقاله، دستورالعملهای گام به گام در مورد نحوهی ممیزی دسترسیپذیری با افزونهی Wave ارائه خواهیم داد.
گام به گام: اجرای ممیزی دسترسی با افزونه WAVE
مرحله ۱: نصب WAVE
به صفحه افزونههای فروشگاه وب کروم یا فایرفاکس بروید.
روی افزودن به کروم/فایرفاکس کلیک کنید.
مرحله ۲: صفحهای را که میخواهید آزمایش کنید باز کنید
به صفحه وبی که میخواهید حسابرسی کنید، بروید.
این میتواند یک صفحه لوکال هاست یا صفحه اصلی باشد.
مرحله ۳: راهاندازی WAVE
روی آیکون WAVE در نوار ابزار مرورگر خود کلیک کنید. این علامت W خواهد بود. 
صفحه با یک پنل نوار کناری که نتایج را نشان میدهد، بارگذاری مجدد میشود.
نوار کناری یافتهها را به موارد زیر دستهبندی میکند:
خطاها (قرمز): مشکلات قطعی
مثال: متن جایگزین وجود ندارد، عنوانها خالی هستند
هشدارها (زرد): مشکلات احتمالی که نیاز به بررسی دارند.
ویژگیها (سبز): عناصر دسترسیپذیری شناساییشده (مثلاً سرعنوانها، نشانههای ARIA).
خطاهای کنتراست (آبی): متن با کنتراست پایین.
میتوانید روی «مشاهده جزئیات» کلیک کنید تا برگه جزئیات باز شود. برگه جزئیات اطلاعات بیشتری در مورد خطاهای مشاهده شده در برگه خلاصه ارائه میدهد.
با نگاهی به تب جزئیات، میتوانیم ببینیم که ۳۶ خطایی که در صفحه خلاصه نشان داده شده است، به ۲۴ خطای «عنوان خالی» و ۱۲ خطای مرجع ARIA شکسته تقسیم شده است.
مرحله 5: آیکونهای درون صفحه را بررسی کنید
همراه با تبهای خلاصه و جزئیات، آیکونهایی روی خود صفحه قرار گرفتهاند که موارد زیر را نشان میدهند:
🔴 آیکونهای خطای قرمز — مشکلات بحرانی.
🟡 هشدارهای زرد - مشکلات احتمالی.
🟢 ویژگیهای سبز — ویژگیهای دسترسی موجود است.
🔵 خطاهای کنتراست آبی — کنتراست رنگ پایین.
برای باز کردن جزئیات در نوار کناری، یک نماد را انتخاب کنید.
در تصویر بالا میتوانیم یک نمونه از خطای «عنوان خالی» را که در صفحه خلاصه نشان داده شده است، ببینیم. محل عنوان را در صفحه میبینیم. با کلیک بر روی آیکون قرمز، یک پنجره بازشو با اطلاعات بیشتر در مورد خطا باز میشود.
مرحله ۷: از ابزار بررسی کنتراست استفاده کنید
روی برگه کنتراست در نوار کناری کلیک کنید.
WAVE متنهایی را نشان میدهد که با نسبتهای کنتراست WCAG AA/AAA مطابقت ندارند.
این افزونه رنگ پیشزمینه و پسزمینهی استفادهشده را دریافت میکند و در صورت وجود خطای کنتراست پایین در صفحه، به کاربر اطلاع میدهد.
در مثال زیر، تضاد رنگی بسیار کمی بین متن و رنگ پسزمینه وجود دارد. این تضاد رنگی الزامات WCAG AA و WCAG AAA را برآورده نمیکند. 
مرحله ۸: اعتبارسنجی با تست دستی
WAVE مشکلات ساختاری را تشخیص میدهد، اما کیفیت راهحلها را نه.
برای مثال، میتواند وجود متن جایگزین (alt text) را تأیید کند، اما نمیتواند معنیدار بودن آن را تأیید کند.
با ناوبری کیبورد ، بررسیهای صفحهخوان و آزمایش کاربر ، آن را تکمیل کنید.
مرحله ۱۰: رفع اشکال و آزمایش مجدد
مشکلات علامتگذاریشده در کد خود را حل کنید.
برای تأیید اصلاحات، WAVE را دوباره اجرا کنید.
مشکلات رایج، نکات برجسته WAVE
برخی از موانع دسترسی که مکرراً مشاهده خواهید کرد عبارتند از:
متن جایگزین (alt text) تصاویر وجود ندارد یا نامعتبر است.
تضاد رنگی کم بین متن و پسزمینه.
لینکهای خالی یا خراب.
برچسبهای فرم گم شدهاند.
ساختار عنوان نادرست.
سوءاستفاده از نقشهای ARIA
نتیجهگیری
حسابرسی با WAVE به شما بینشهای فوری و بصری در مورد دسترسیپذیری سایتتان میدهد. اگرچه جایگزین آزمایش دستی کامل یا بازخورد کاربر نمیشود، اما ابزاری قدرتمند برای شناسایی مشکلات رایج، یادگیری بهترین شیوهها و تبدیل دسترسیپذیری به بخشی از فرهنگ توسعه شما است.
با ادغام ممیزیهای WAVE در فرآیند خود، گامی مهم در جهت ایجاد یک وب فراگیرتر و قابل استفادهتر برای همه برمیدارید.
برچسبها
|
ارسال نظر