برگشت outline؛ حلقهٔ فوکوس رو از کاربر نگیرید
فرانتاندClaude Opus 5خلاصهٔ کامل‌تر
حلقهٔ فوکوس (outline) دور دکمه‌ها و فیلدها برای کاربرهایی که با کیبورد حرکت می‌کنن یا سطح بینایی متفاوتی دارن یه نشونهٔ حیاتیه؛ بدونش معلوم نیست الان کدوم عنصر فعاله. نویسنده می‌گه برای خودش این یه ترجیحه که با کیبورد کار کنه، ولی برای بعضی کاربرها اصلاً یه نیازه و نبودش سایت رو عملاً غیرقابل‌استفاده می‌کنه.
ریشهٔ ماجرا به حدود ۲۰۰۸ و قبل‌تر برمی‌گرده: بعضی توسعه‌دهنده‌ها و طراح‌ها outline رو صفر کردن، یا چون شلوغ به نظر می‌رسید یا چون قرار بود بعداً استایل دلخواه براش بذارن که خیلی وقت‌ها هیچ‌وقت نذاشتن. به گفتهٔ نویسنده حتی یکی از ریست‌های CSS معروف و در زمان خودش مفید هم outline رو صفر کرده بود، با یه کامنت که «خودت استایلش رو تعریف کن» — و خب اکثر آدم‌ها هیچ‌وقت اون پیش‌فرض رو عوض نکردن.
نکتهٔ اصلی مقاله اینه که این دیگه یه بدهی فنی قابل‌دفاع نیست. از ۲۰۲۲ که :focus-visible به سطح baseline رسید، مرورگر خودش با یه سری هیوریستیک تصمیم می‌گیره کِی حلقهٔ فوکوس نشون داده بشه؛ یعنی همون ایرادی که قدیم به :focus خالی می‌گرفتن — ظاهر شدن حلقه موقع کلیک با ماوس — دیگه موضوعیت نداره و میشه هم ظاهر دلخواه داشت هم دسترس‌پذیری.
نویسنده تعریف می‌کنه که همین اواخر به سایت یه سازمان مدنی برخورده که کاربر باید توش آدرسش رو تو یه نقشه پیدا می‌کرده، و بدون outline کار کردن باهاش با کیبورد سخت بوده؛ تصویر ابتدای مقاله هم outline ـیه که خودش با ابزار توسعه‌دهندهٔ مرورگر بهش اضافه کرده. پیشنهاد عملیش برای ۲۰۲۶ اینه که کمی سمج‌تر باشیم: سایت‌هایی که ازشون استفاده می‌کنیم رو با کیبورد امتحان کنیم و اگه حلقهٔ فوکوس نداشتن، ایشو یا گزارش باگ ثبت کنیم.
نکات کلیدی:
- outline نشونهٔ اصلی فوکوسه و برای کاربرهای کیبورد و کم‌بینا ضروریه
- عادت outline: 0 از ریست‌های قدیمی CSS به ارث رسیده و هنوز تکرار میشه
- :focus-visible از ۲۰۲۲ baseline شده و ایراد قدیمی :focus رو حل می‌کنه
- معیار مرجع، ضابطهٔ Focus Visible در WCAG 2.2 ـه
- راه‌حل، استایل دادن به outline ـه نه حذفش
