تمرکز سبک

راب دادسون

نشانگر فوکوس (اغلب با یک "حلقه فوکوس" مشخص می شود) عنصر متمرکز فعلی را در صفحه شما مشخص می کند. برای کاربرانی که قادر به استفاده از ماوس نیستند، این نشانگر بسیار مهم است زیرا به عنوان یک پایه برای نشانگر ماوس آنها عمل می کند.

اگر نشانگر فوکوس پیش‌فرض مرورگر با طراحی شما در تضاد است، می‌توانید از CSS برای تغییر استایل آن استفاده کنید. فقط به یاد داشته باشید که کاربران صفحه کلید خود را در ذهن داشته باشید!

از :focus استفاده کنید تا همیشه یک نشانگر فوکوس نشان داده شود

شبه کلاس :focus هر زمان که یک عنصر فوکوس می شود، صرف نظر از دستگاه ورودی (موس، صفحه کلید، قلم و غیره) یا روشی که برای فوکوس کردن آن استفاده می شود، اعمال می شود. به عنوان مثال، <div> زیر دارای یک tabindex است که آن را قابل فوکوس می کند. همچنین دارای یک سبک سفارشی برای حالت :focus :

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

صرف نظر از اینکه از ماوس برای کلیک کردن روی آن استفاده می کنید یا از صفحه کلید برای تب روی آن استفاده می کنید، <div> همیشه یکسان به نظر می رسد.

متأسفانه مرورگرها ممکن است با نحوه اعمال تمرکز ناسازگار باشند. اینکه آیا یک عنصر فوکوس دریافت می کند یا نه ممکن است به مرورگر و سیستم عامل بستگی داشته باشد.

برای مثال، <button> زیر نیز یک سبک سفارشی برای حالت :focus خود دارد.

button:focus {
  outline: 4px dashed orange;
}

اگر با ماوس در کروم در macOS روی <button> کلیک کنید، باید سبک فوکوس سفارشی آن را ببینید. با این حال، اگر روی <button> در Safari در macOS کلیک کنید، سبک فوکوس سفارشی را نخواهید دید. این به این دلیل است که در سافاری عنصر با کلیک بر روی آن فوکوس دریافت نمی کند.

از آنجایی که رفتار فوکوس ناسازگار است، ممکن است به کمی آزمایش روی دستگاه‌های مختلف نیاز داشته باشد تا مطمئن شوید سبک‌های تمرکز شما برای کاربران شما قابل قبول است.

از :focus-visible برای نشان دادن انتخابی نشانگر فوکوس استفاده کنید

شبه کلاس جدید :focus-visible هر زمانی که یک عنصر فوکوس دریافت می کند اعمال می شود و مرورگر از طریق اکتشافی تشخیص می دهد که نمایش نشانگر فوکوس برای کاربر مفید است. به‌ویژه، اگر آخرین تعامل کاربر از طریق صفحه‌کلید بوده و فشار کلید شامل کلید متا، ALT / OPTION یا CONTROL نبود، آنگاه :focus-visible مطابقت خواهد داشت.

دکمه در مثال زیر به طور انتخابی یک نشانگر فوکوس را نشان می دهد. اگر از ماوس برای کلیک کردن روی آن استفاده کنید، نتایج متفاوت از زمانی است که برای اولین بار از صفحه کلید برای استفاده از آن استفاده کنید.

button:focus-visible {
  outline: 4px dashed orange;
}

از :focus-within برای استایل دادن به والد یک عنصر متمرکز استفاده کنید

:focus-within شبه کلاس به یک عنصر اعمال می شود یا زمانی که خود عنصر فوکوس را دریافت می کند یا زمانی که عنصر دیگری در داخل آن عنصر فوکوس دریافت می کند.

می توان از آن برای برجسته کردن یک منطقه از صفحه برای جلب توجه کاربر به آن منطقه استفاده کرد. به عنوان مثال، فرم زیر هم زمانی که خود فرم انتخاب می شود و هم زمانی که هر یک از دکمه های رادیویی آن انتخاب می شود، فوکوس را دریافت می کند.

form:focus-within {
  background: #ffecb3;
}

زمان نمایش نشانگر فوکوس

یک قانون سرانگشتی خوب این است که از خود بپرسید: "اگر هنگام استفاده از یک دستگاه تلفن همراه روی این کنترل کلیک کنید، آیا انتظار دارید صفحه کلید نمایش داده شود؟"

اگر پاسخ "بله" است، احتمالاً کنترل باید همیشه یک نشانگر فوکوس را بدون توجه به دستگاه ورودی مورد استفاده برای فوکوس نشان دهد. یک مثال خوب عنصر <input type="text"> است. کاربر باید بدون توجه به اینکه عنصر ورودی چگونه فوکوس را دریافت کرده است، ورودی را از طریق صفحه کلید به عنصر ارسال کند، بنابراین نمایش نشانگر فوکوس همیشه مفید است.

اگر پاسخ "نه" است، کنترل ممکن است انتخاب کند که نشانگر فوکوس را به صورت انتخابی نشان دهد. یک مثال خوب عنصر <button> است. اگر کاربر با ماوس یا صفحه لمسی روی آن کلیک کند، عمل کامل شده است و ممکن است نشانگر فوکوس لازم نباشد. با این حال، اگر کاربر با صفحه کلید در حال پیمایش است، نشان دادن یک نشانگر فوکوس مفید است تا کاربر بتواند تصمیم بگیرد که آیا می‌خواهد روی کنترل با استفاده از کلیدهای ENTER یا SPACE کلیک کند یا خیر.

اجتناب از outline: none

نحوه تصمیم گیری مرورگرها برای ترسیم نشانگر فوکوس، صادقانه بگویم، بسیار گیج کننده است. تغییر ظاهر عنصر <button> با CSS یا دادن tabindex به عنصری باعث می‌شود رفتار حلقه فوکوس پیش‌فرض مرورگر فعال شود.

یک ضد الگوی بسیار رایج حذف نشانگر فوکوس با استفاده از CSS است مانند:

/* Don't do this!!! */
:focus {
  outline: none;
}

یک راه بهتر برای حل این مشکل استفاده از ترکیبی از :focus و :focus-visible polyfill است. اولین بلوک کد زیر نحوه عملکرد polyfill را نشان می‌دهد و برنامه نمونه زیر آن مثالی از استفاده از polyfill برای تغییر نشانگر فوکوس روی یک دکمه ارائه می‌دهد.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}