وقتی توی آفتاب گوشی‌ات را نگاه می‌کنی و متن خاکستری روشن را نمی‌خوانی، یا با یک دست در حال حرکت دکمه‌ی کوچکی را اشتباهی لمس می‌کنی، در واقع با ضعف دسترس‌پذیری روبه‌رو شده‌ای. دسترس‌پذیری فقط برای افراد دارای معلولیت نیست؛ تجربه‌ی همه را بهتر می‌کند.
استاندارد معروف این حوزه WCAG است که W3C منتشر می‌کند. نسخه‌ی ۲٫۲ چند معیار جدید اضافه کرده و سطح AA معمولاً هدف عملی است. این پنج کار را می‌شود همین امروز شروع کرد:
۱. کنتراست متن
متن معمولی باید دست‌کم ۴٫۵ به ۱ با پس‌زمینه کنتراست داشته باشد. برای متن بزرگ (حدود ۲۴ پیکسل، یا ۱۸٫۵ پیکسل ضخیم) ۳ به ۱ کافی است. خاکستری روشن روی سفید رایج‌ترین خطاست. با یک ابزار بررسی کنتراست، رنگ‌های سایتت را تست کن.
۲. کنتراست اجزای رابط
آیکون‌ها، حاشیه‌ی فیلدها و حلقه‌ی فوکوس هم باید دست‌کم ۳ به ۱ با اطرافشان کنتراست داشته باشند.
۳. اندازه‌ی هدف لمسی
در WCAG 2.2 هر دکمه یا لینک باید دست‌کم ۲۴ در ۲۴ پیکسل CSS باشد تا لمس اشتباهی کمتر شود. برای موبایل، اندازه‌های بزرگ‌تر (حدود ۴۴ تا ۴۸ پیکسل) راحت‌ترند.
۴. فوکوس کیبورد
کسی که با کیبورد کار می‌کند باید همیشه ببیند الان روی کدام عنصر است. خط دور فوکوس را بدون جایگزین حذف نکن و مطمئن شو سربرگ ثابت یا پنجره‌های شناور عنصر فوکوس‌شده را نمی‌پوشانند.
۵. متن جایگزین و برچسب
- برای عکس‌های معنادار متن جایگزین (alt) بنویس؛ برای عکس‌های تزئینی خالی بگذار
- برای فیلدهای فرم برچسب واقعی بگذار، نه فقط placeholder
- متن لینک‌ها معنا داشته باشد؛ ده تا «ادامه مطلب» پشت هم به کاربر چیزی نمی‌گوید
چند معیار دیگر که ارزش دارد
- متن تا ۲۰۰ درصد بزرگ شود و اسکرول افقی ایجاد نشود
- اطلاعات فقط با رنگ منتقل نشود (مثلاً خطای فرم فقط قرمز باشد)
چطور بررسی کنیم؟
- فقط با کلید Tab سایت را بگرد.
- بزرگ‌نمایی را روی ۲۰۰ درصد بگذار.
- گزارش دسترس‌پذیری Lighthouse را اجرا کن؛ اما یادت باشد ابزارهای خودکار فقط بخشی از مشکلات را پیدا می‌کنند و بررسی دستی لازم است.