رایج‌ترین خطاهای دسترس‌پذیری وب و راه رفعشون
فرانتاند
تستخلاصهٔ کامل‌تر
تو این مقالهٔ SitePoint (که یه پست اسپانسری از طرف TestMu AI هست) اومده که بیشتر مشکلات دسترس‌پذیری یا همون accessibility (یعنی اینکه سایت برای آدم‌هایی که با screen reader یا فقط کیبورد کار می‌کنن هم قابل استفاده باشه) اصلاً سخت نیستن. گزارش ۲۰۲۶ WebAIM که هر سال صفحهٔ اصلی یک میلیون سایت برتر رو اسکن می‌کنه، روی تقریباً ۹۶ درصدشون حداقل یه خطای قابل‌تشخیص پیدا کرده. همون خطاها هفت ساله که بالای لیستن.
نویسنده می‌گه دلیلش بی‌اهمیتی تیم‌ها نیست. دسترس‌پذیری معمولاً آخر کار تست میشه، وقتی دیگه وقتی برای درست کردن نمونده. یه تیک سبز از ابزار اسکن هم با «صفحه کار می‌کنه» اشتباه گرفته میشه. کامپوننت‌هایی که با ساخته می‌شن فقط role="button" می‌گیرن ولی برخلاف واقعی، فوکوس و کلیدهای Tab و Enter رو پشتیبانی نمی‌کنن. ویجت‌های بیرونی مثل date picker و بنر کوکی هم کسی چکشون نمی‌کنه.
خطاهای اصلی و آمارشون طبق WebAIM: کنتراست کم متن روی ۸۴ درصد صفحه‌ها (مثلاً متن خاکستری #999 روی سفید فقط نسبت 2.85:1 داره، در حالی که WCAG حداقل 4.5:1 می‌خواد). عکس بدون alt روی بیشتر از نصف صفحه‌ها؛ برای عکس تزئینی هم باید alt="" گذاشت نه اینکه کلاً حذفش کرد. فیلد فرم بدون label روی ۵۱ درصد، که اگه با for و id به فیلد وصل نباشه، screen reader فقط می‌گه «edit text». placeholder هم جای label رو نمی‌گیره چون با تایپ کردن غیب میشه.
بقیهٔ لیست: لینک‌های خالی (مثل آیکون سبد خرید یا سرچ بدون اسم) روی نزدیک نصف صفحه‌ها، و دکمه‌های بی‌نام روی ۳۱ درصد که از ۲۰۲۱ هر سال بیشتر شدن. راهش aria-label هست، مثلاً aria-label="Close dialog". حدود ۱۴ درصد هم زبان صفحه رو با مشخص نکردن. به اینا اضافه کن منوهایی که فقط با hover باز می‌شن، حذف outline فوکوس بدون جایگزین، ویدیوی بدون زیرنویس، و دکمه‌های ریز موبایل. WCAG 2.2 حداقل 24x24 پیکسل CSS رو می‌خواد و 44x44 پیشنهاد میشه.
نکتهٔ مهم مقاله اینه که ابزارهای خودکار طبق برآوردها فقط ۳۰ تا ۴۰ درصد مشکلات رو می‌گیرن. اسکنر فقط می‌بینه alt خالی نیست، نه اینکه متنش به درد بخوره. یا می‌بینه یه div نقش button داره، ولی نمی‌فهمه با کیبورد کار نمی‌کنه. ترتیب خوندن صفحه رو هم نمی‌تونه بسنجه. یعنی اسکن تمیز فقط یه نقطهٔ شروعه، نه تأیید نهایی.
پیشنهاد نویسنده اینه که اسکن خودکار (مثلاً با axe-core) تو CI/CD روی هر build اجرا بشه، و قبل از انتشار چند دقیقه صفحه رو فقط با کیبورد و یه screen reader مثل NVDA یا VoiceOver امتحان کنی. اگه هم یه خطا مدام تکرار میشه، باید تو design system یا کتابخونهٔ کامپوننت ریشه‌ای درستش کرد.
نکات کلیدی:
- طبق WebAIM 2026 تقریباً ۹۶ درصد صفحه‌های اصلی یک میلیون سایت برتر حداقل یه خطای دسترس‌پذیری دارن
- کنتراست کم با ۸۴ درصد رایج‌ترین خطاست و WCAG برای متن معمولی حداقل نسبت 4.5:1 می‌خواد
- فیلدهای بدون label روی ۵۱ درصد و دکمه‌های بی‌نام روی ۳۱ درصد صفحه‌ها دیده شدن
- ابزارهای خودکار فقط حدود ۳۰ تا ۴۰ درصد مشکلات رو پیدا می‌کنن
- WCAG 2.2 حداقل اندازهٔ هدف لمسی رو 24x24 پیکسل CSS تعیین کرده و 44x44 پیشنهاد میشه
- یه با role="button" بدون کد کیبورد، برای کاربر بدون ماوس قابل استفاده نیست
