تمرکز

پادکست CSS - 018: Focus

در صفحه وب خود، روی پیوندی کلیک می‌کنید که کاربر را به محتوای اصلی وب‌سایت پرش می‌کند. اینها اغلب به عنوان پیوندهای پرش یا پیوندهای لنگر نامیده می شوند. هنگامی که آن پیوند توسط صفحه کلید، با استفاده از کلیدهای تب و اینتر فعال می شود، محفظه محتوای اصلی یک حلقه فوکوس در اطراف خود دارد. چرا اینطور است؟

این به این دلیل است که <main> دارای مقدار مشخصه tabindex="-1" است، به این معنی که می توان آن را به صورت برنامه نویسی متمرکز کرد. هنگامی که <main> مورد هدف قرار می گیرد - زیرا #main-content در نوار URL مرورگر با id مطابقت دارد - فوکوس برنامه ای را دریافت می کند. حذف سبک های فوکوس در این مواقع وسوسه انگیز است، اما مدیریت مناسب و با دقت فوکوس به ایجاد یک تجربه کاربری خوب، در دسترس و در دسترس کمک می کند. همچنین می تواند مکانی عالی برای افزودن مقداری علاقه به تعاملات باشد.

چرا تمرکز مهم است؟

به عنوان یک توسعه دهنده وب، وظیفه شما این است که یک وب سایت را برای همه در دسترس و فراگیر کنید. ایجاد حالت های تمرکز در دسترس با CSS بخشی از این مسئولیت است.

سبک‌های فوکوس به افرادی که از دستگاهی مانند صفحه‌کلید یا کنترل سوئیچ استفاده می‌کنند کمک می‌کنند تا در وب‌سایت پیمایش کنند و با آن تعامل داشته باشند. اگر یک عنصر فوکوس دریافت کند و هیچ نشانه بصری وجود نداشته باشد، کاربر ممکن است ردیابی آنچه در فوکوس است را از دست بدهد. این می تواند مشکلات ناوبری ایجاد کند و در صورت دنبال کردن پیوند اشتباه، منجر به رفتار ناخواسته شود.

عناصر چگونه تمرکز می کنند

برخی از عناصر به طور خودکار قابل تمرکز هستند. اینها عناصری هستند که تعامل و ورودی را می پذیرند، مانند <a> ، <button> ، <input> و <select> . به طور خلاصه، همه عناصر فرم، دکمه ها و پیوندها. معمولاً می توانید با استفاده از کلید tab برای حرکت به جلو در صفحه و shift + tab برای حرکت به عقب، عناصر قابل تمرکز یک وب سایت را پیمایش کنید.

همچنین یک ویژگی HTML به نام tabindex وجود دارد که به شما امکان می‌دهد هر بار که فردی کلید تب خود را فشار می‌دهد یا با تغییر هش در URL یا جاوا اسکریپت، نمایه Tabing را تغییر دهید - که ترتیب تمرکز عناصر است. رویداد اگر tabindex در یک عنصر HTML روی 0 تنظیم شده باشد، می‌تواند از طریق کلید تب فوکوس را دریافت کند و فهرست برگه جهانی را که با ترتیب منبع سند تعریف می‌شود، رعایت می‌کند.

اگر tabindex روی -1 تنظیم کنید، فقط می‌تواند فوکوس را به صورت برنامه‌نویسی دریافت کند، به این معنی که تنها زمانی که یک رویداد جاوا اسکریپت اتفاق می‌افتد یا تغییر هش (تطابق با id عنصر در URL) رخ می‌دهد. اگر tabindex روی هر چیزی بالاتر از 0 تنظیم کنید، از فهرست برگه جهانی که با ترتیب منبع سند تعریف شده است حذف می شود. ترتیب Tabbing اکنون با مقدار tabindex تعریف می شود، بنابراین عنصری با tabindex="1" قبل از عنصری با tabindex="2" فوکوس دریافت می کند.

تمرکز استایل

رفتار پیش فرض مرورگر زمانی که یک عنصر فوکوس را دریافت می کند، ارائه یک حلقه فوکوس است. این حلقه فوکوس بین مرورگر و سیستم عامل متفاوت است.

این رفتار را می‌توان با CSS تغییر داد، با استفاده از کلاس‌های :focus ، :focus-within و :focus-visible که در درس شبه کلاس‌ها درباره آن‌ها آموختید. تنظیم سبک فوکوس که با سبک پیش‌فرض یک عنصر در تضاد باشد، مهم است. به عنوان مثال، یک رویکرد رایج استفاده از ویژگی outline است.

a:focus {
  outline: 2px solid slateblue;
}

ویژگی outline می‌تواند خیلی نزدیک به متن یک پیوند ظاهر شود، اما ویژگی outline-offset می‌تواند به این موضوع کمک کند، زیرا بدون تأثیر بر اندازه هندسی که عنصر پر می‌کند، padding بصری اضافی اضافه می‌کند. یک مقدار عددی مثبت برای outline-offset طرح کلی را به سمت بیرون می راند، یک مقدار منفی، طرح کلی را به سمت داخل می کشد.

در حال حاضر در برخی از مرورگرها، اگر border-radius روی عنصر خود تنظیم کرده باشید و outline استفاده کنید، مطابقت نخواهد داشت - طرح کلی گوشه های تیز خواهد داشت. به همین دلیل، استفاده از box-shadow با شعاع تاری کوچک وسوسه انگیز است، زیرا box-shadow به شکل گیره می دهد و border-radius رعایت می کند، اما این سبک در حالت کنتراست بالا ویندوز نشان داده نمی شود . این به این دلیل است که حالت کنتراست بالا ویندوز سایه‌ها را اعمال نمی‌کند و بیشتر تصاویر پس‌زمینه را نادیده می‌گیرد تا تنظیمات ترجیحی کاربر را جلب کند.

به طور خلاصه

ایجاد یک حالت فوکوس که در تضاد با حالت پیش فرض یک عنصر باشد، بسیار مهم است. سبک های پیش فرض مرورگر از قبل این کار را برای شما انجام می دهند، اما اگر می خواهید این رفتار را تغییر دهید، موارد زیر را به خاطر بسپارید:

• از استفاده از outline: none در عنصری که می تواند فوکوس صفحه کلید را دریافت کند.
• از جایگزینی استایل های outline با box-shadow خودداری کنید. زیرا در حالت کنتراست بالا ویندوز نمایش داده نمی شوند.
• فقط در صورت لزوم یک مقدار مثبت برای tabindex در یک عنصر HTML تنظیم کنید.
• مطمئن شوید که حالت فوکوس در مقابل حالت پیش فرض بسیار واضح است.

درک خود را بررسی کنید

دانش خود را در مورد تمرکز آزمایش کنید