چرا نباید ترتیب فوکوس رو annotate کنی
فرانتاندClaude Opus 4.8خلاصهٔ کاملتر
نویسنده مطلب رو خطاب به طراحهایی نوشته که بعد از annotate کردن دسترسپذیری روی طرحشون به این پست لینک شدن، و اول از همه ازشون تشکر میکنه که وقت گذاشتن برای دسترسپذیری. ولی نکتهٔ اصلیش اینه: وقتی نوبت به ترتیب فوکوس میرسه، بهتره این میل رو که حتماً چیزی اضافه کنی سرکوب کنی و بذاری همهچی همونطور که هست بمونه. خیلی از کیتهای annotation امکان مشخصکردن ترتیب فوکوس رو دارن، ولی معمولاً لازم نیست ازش استفاده کنی.
دلیلش اینه که عناصر تعاملی خودشون بدون هیچ کار اضافهای فوکوسپذیرن: دکمهها، لینکها، فیلدهای فرم، چکباکسها، رادیوها، تبها و امثال اینها. نویسنده میگه شرطش اینه که مهندس (یا حتی LLMی که UI رو میسازه) از عناصر معنایی استفاده کنه؛ یعنی button برای دکمه و عنصر anchor یعنی a برای لینک. اگه عناصر معنایی به کار نرن، خودش یه دستهٔ مشکل جداگانهست.
دربارهٔ خود ترتیب، نویسنده میگه ترتیب فوکوس باید یه ترتیب منطقی باشه که تو اکثر موارد یعنی مطابق با ترتیب خوندن: تو انگلیسی چپ به راست و بالا به پایین، تو عربی راست به چپ و بالا به پایین. سادهترین راه برای تضمین این هماهنگی هم اینه که خود HTMLی که پشت تجربهست از بالا به پایین و به ترتیب درست نوشته بشه و عرض viewport تعیین کنه محتوا کجا به خط بعدی بره. خوشبختانه بیشتر وب هنوز همینطوری ساخته میشه.
نویسنده میگه کاری که واقعاً ارزش داره، ارزیابی دستی ترتیب فوکوس روی UI ساختهشدهست. روشش هم سادهست: کلید Tab رو بزن و مطمئن شو که هر بار یه نشانهٔ فوکوس قابلدیدن روی هر بخش تعاملی ظاهر میشه و فوکوس به ترتیب خوندنِ زبان طرح حرکت میکنه و چیزی رو جا نمیندازه. این تست رو هم باید روی نسخهٔ زنده و عمومی سایت انجام بدی، چون همون چیزیه که کاربرای واقعی باهاش سروکار دارن، و بعد هر جا مشکلی بود باگ ثبت کنی.
پس چرا اصلاً کیتها گزینهٔ ترتیب فوکوس دارن؟ نویسنده دو حالت رو نام میبره: یکی وقتی ترتیب HTML با ترتیب خوندن جور درنمیاد (مثلاً به خاطر کد شخص ثالث یا بعضی تکنیکهای چیدمان CSS مثل پراپرتی order)، و دیگری وقتی کامپوننتهای پیچیده و کارهای سفارشی سنگین نیاز دارن ترتیب فوکوس برای تحویل به توسعهدهنده صریحاً مشخص بشه. بیرون از این موارد، annotate کردن لازم نیست.
در آخر نویسنده چند اشتباه رایج دیگه رو هم برمیشمره که همگی انتظارات کاربر رو میشکنن: دستکاری دستی مسیر فوکوس با tabindex، فوکوسپذیر کردن متن ثابت و غیرتعاملی برای «مهمتر» جلوهدادنش، و گرفتن قابلیت فوکوس از عناصر تعاملی برای هدایت کاربر به سمت بخشهای دلخواه سازمان. پیام کلیش اینه که «پیشرفت مهمتر از کماله» و هر قدم کوچیک برای دسترسپذیرتر کردن وب روی هم جمع میشه.
نکات کلیدی:
- معمولاً نیازی به annotate کردن ترتیب فوکوس روی طرح نیست
- عناصر معنایی مثل button و a خودشون فوکوسپذیرن
- ترتیب فوکوس درست = HTML از بالا به پایین، مطابق ترتیب خوندن
- بهترین کار: تست دستی با Tab روی نسخهٔ زندهٔ سایت و گزارش باگ
- annotate فقط تو موارد خاص مثل ناهماهنگی ترتیب یا کامپوننت پیچیده ارزش داره
