آموزش CSS: فوکوس قابل‌دیدن برای کاربران کیبورد بساز

فوکوس نشان می‌دهد کدام کنترل آمادهٔ تعامل است؛ کاربر کیبورد باید بتواند آن را ببیند.

با Tab میان لینک‌ها، دکمه‌ها و ورودی‌ها حرکت کن و با Shift+Tab مسیر را برعکس برو.

اگر کادر پیش‌فرض فوکوس را حذف می‌کنی، حتماً نشانهٔ دیداری مناسبی جایگزین کن.

انتخابگر :focus-visible وقتی مرورگر نمایش فوکوس را لازم بداند، کنترل دارای فوکوس را هدف می‌گیرد.

نمونهٔ ساده: button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; }

رنگ حلقه را روی زمینهٔ واقعی بسنج؛ انتخاب یک رنگ روشن به‌تنهایی خوانایی را تضمین نمی‌کند.

:focus برای هر کنترل دارای فوکوس صدق می‌کند؛ :focus-visible به تصمیم مرورگر دربارهٔ نمایش نشانه وابسته است.

با کیبورد فرم تماس، منو و پنجرهٔ ورود را بررسی کن؛ حلقهٔ فوکوس نباید پشت بخش دیگری پنهان شود.

تمرین پیشنهادی: یک بار بدون ماوس مسیر ورود، تکمیل فرم و ارسال را طی کن.

فوکوس زیبا تنها بخشی از دسترس‌پذیری است؛ عملکرد واقعی کنترل‌ها با کیبورد را هم آزمایش کن.

منابع رسمی

اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.

آموزش‌های مرتبط