راهنمای طراحی نشانگرهای فوکوس قابل دسترس مطابق با WCAG

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

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

دقیقا چی است نشانگر فوکوس؟

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

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

نشانگر فوکوس یک نشانگر بصری است که عنصر متمرکز فعلی را “برجسته” می کند. این نشانگر بصری معمولاً به صورت طرح کلی در اطراف عنصر ارائه می شود. یک طرح کلی شکل عنصر خود را می گیرد و از آنجایی که هر عنصر در CSS یک مستطیل است، بنابراین نشانگر فوکوس معمولاً مستطیلی است که اطراف یک عنصر کشیده شده است.

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

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

در واقع نشانگر فوکوس قابل مشاهده برای اینکه یک سایت طبق دستورالعمل های دسترسی به محتوای وب (WCAG) قابل دسترسی باشد، الزامی است. حذف یا پنهان کردن نشانگرهای فوکوس نقض معیار موفقیت (SC) 2.4.7 است (و بنابراین ناموفق خواهد بود): فوکوس قابل مشاهده است (سطح A) که بیان می کند:

هر رابط کاربری صفحه کلید یک حالت کار دارد جایی که نشانگر فوکوس صفحه کلید قابل مشاهده است.

نشانگرهای فوکوس پیش فرض مرورگر

مرورگرها نشانگرهای فوکوس را برای عناصر تعاملی بومی خارج از جعبه، به صورت رایگان ارائه می دهند. و بسیاری از ما – اگر نه همه – در مقطعی از زمان این قطعه CSS را در شیوه نامه خود قرار داده ایم:

:focus {
	outline: none;
}

برای حذف این نشانگرهای فوکوس اعمال شده توسط مرورگر.

برای ملاقات فوکوس قابل مشاهدهباید از حذف نشانگر فوکوس ارائه شده توسط مرورگر خودداری کنید مگر اینکه شما آن را با نشانگر فوکوس موجود خود جایگزین می کنید. و من توصیه می کنم که انجام دهید. (توضیح خواهیم داد چرا در این مقاله.)

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

(چه فایده ای دارد نمایش داده شود نشانگر فوکوس که بسیاری از کاربران نمی توانند ببینید؟)

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

کنتراست رنگ نشانگر فوکوس پیش‌فرض در مرورگرها یکسان نیست.

بسته به پالت رنگ وب‌سایت شما، رنگ‌های نشانگرهای فوکوس پیش‌فرض مرورگر ممکن است با رنگ‌های استفاده شده در وب‌سایت شما تداخل داشته باشند و دیدن آنها را دشوار (اگر نه غیرممکن) کند. وقتی این اتفاق می افتد، شما مجبور خواهید بود لغو سبک های فوکوس پیش فرض با سبک های بهتر و در دسترس تر.

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

الزامات دسترسی نشانگر فوکوس WCAG 2.1 و WCAG 2.2

SC 2.4.7: فوکوس قابل مشاهده (سطح A) به وجود یک نشانگر فوکوس قابل مشاهده برای اجزایی که فوکوس صفحه کلید دارند نیاز دارد.

بنابراین، اولین قدم در ایجاد شاخص های تمرکز مقرون به صرفه بله است شاخص های تمرکز را پنهان نکنید. 😊

* {
    outline: none; 
}

SC 1.4.11 کنتراست غیر متنی (سطح AA) بیان می کند که (مورب مال من):

نمایش بصری موارد زیر دارای نسبت کنتراست حداقل 3:1 نسبت به رنگ(های) مجاور است:

اجزای رابط کاربری: اطلاعات بصری مورد نیاز برای شناسایی اجزا و حالت‌های رابط کاربری…

از نشانگرهای فوکوس برای شناسایی وضعیت یک جزء (فوکوس) استفاده می شود. بنابراین، با توجه به این معیار، شاخص های تمرکز باید نسبت کنتراست رنگی حداقل 3:1 به رنگ های مجاور داشته باشد.

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

WCAG 2.2 سه معیار موفقیت را اضافه می کند که دسترسی به شاخص های تمرکز را بسته به آنها تعیین می کند رنگ، سطح و دید:

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

SC 2.4.13 فوکوس ظاهر بیان می کند که:

هنگامی که نشانگر فوکوس صفحه کلید قابل مشاهده است، ناحیه ای از نشانگر فوکوس همه شرایط زیر را دارد:

• حداقل به اندازه مساحت محیط ضخامت 2 پیکسل CSS از مؤلفه یا جزء فرعی بدون تمرکز است، و
• دارای نسبت کنتراست حداقل 3:1 بین پیکسل های مشابه در حالت های متمرکز و بدون فوکوس.

تمرکز بر ظاهر ارتباط نزدیک دارد فوکوس قابل مشاهده و کنتراست بدون متن.

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

کجا کنتراست بدون متن نشانگرهای فوکوس باید دارای نسبت کنتراست رنگی حداقل 3:1 در مقابل باشند مجاور رنگ ها، تمرکز بر ظاهر به تغییر کنتراست کافی برای ناحیه نشانگر فوکوس نیاز دارد. (به زودی در مورد معنای آن بیشتر توضیح خواهیم داد.)

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

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

قسمت “ضخامت 2px محیط” از SC است حداقل منطقه نشانگر فوکوس که دارای نسبت کنتراست 3:1 بین پیکسل های مشابه در حالت های متمرکز و بدون فوکوس است. این بدان معنا نیست که نشانگر فوکوس باید یک طرح کلی با ضخامت 2 پیکسل در اطراف عنصر باشد، فقط نشانگر باید باشد. حداقل خیلی بزرگ

نشانگر فوکوس صفحه کلید می تواند اشکال مختلفی داشته باشد. این معیار موفقیت، استفاده از خطوط کلی در اطراف مؤلفه UI متمرکز را تشویق می‌کند، اما به انواع شاخص‌هایی که حداقل به اندازه بزرگ هستند، اجازه می‌دهد.
.- درک ظاهر تمرکز

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

در این مقاله، معنای “حداقل به ضخامت یک محیط با ضخامت 2 پیکسل” را خواهیم فهمید و نمونه هایی را مشاهده خواهیم کرد که چگونه می توانید حداقل منطقه مورد نیاز را برآورده کنید بدون اینکه لزوماً یک طرح کلی با ضخامت 2 پیکسل به عنوان نشانگر فوکوس ارائه دهید.

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

برای بسیاری از مثال‌ها، الزامات شاخص تمرکز را همانطور که اعمال می‌شود نشان داده و بررسی می‌کنیم دکمه آبی روی پس زمینه سفید

در ادامه این مطلب، کمی بداخلاق می شویم!

1. ناحیه نشانگر فوکوس و ناحیه کنتراست

هنگامی که یک جزء فوکوس را تغییر می دهد تا نشانگر فوکوس را شامل شود، این تغییر همیشه می تواند به عنوان تغییر در کنتراست رنگ اندازه گیری شود.

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

ناحیه نشان‌دهنده فوکوس، ناحیه‌ای در پیکسل‌های CSS مربعی است که در آن تغییر رنگ بین حالت‌های متمرکز و عدم تمرکز جزء اتفاق می‌افتد.

تمرکز بر ظاهر بیان می کند که “منطقه نشانگر فوکوس” باید نسبت کنتراست 3:1 بین حالت های فوکوس نشده و متمرکز داشته باشد. یعنی مساحت در ناحیه نشانگر فوکوس (الف یک زیر مجموعه از ناحیه نشانگر فوکوس) باید نسبت کنتراست 3:1 بین حالت های فوکوس نشده و متمرکز داشته باشد.

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

در مثال قبلی، تغییر رنگ از سفید یکدست به سیاه یکدست اتفاق می‌افتد و نسبت کنتراست رنگ بین حالت‌های متمرکز و متمرکز (سفید و سیاه) برابر است. 21: 1. بنابراین، کل ناحیه نشانگر فوکوس حداقل نیاز کنتراست را برآورده می کند. این بدان معنی است که منطقه کنتراست با کل ناحیه نشانگر فوکوس برابر است.

به همین ترتیب، اگر یک طرح کلی مشکی جدا از دکمه اضافه کنید، مجدداً ناحیه ای که تغییر رنگ را نشان می دهد منطقه متضاد است.

من این مدل را دوست دارم زیرا فضای کمی برای تنفس اضافه می کند و به برجسته شدن نشانگر فوکوس کمک می کند و دیدن آن را آسان تر می کند.

اگر یک طرح کلی داخل خود دکمه اضافه کنید، ناحیه کنتراست داخل دکمه است. تغییر رنگ از آبی (رنگ پس زمینه دکمه) به سیاه است. نسبت کنتراست رنگ بین حالت متمرکز و بدون فوکوس است 4.86: 1.

اگر دکمه در فوکوس رنگ پس‌زمینه خود را از آبی به سیاه تغییر دهد، کل ناحیه پس‌زمینه دکمه، ناحیه کنتراست است و نسبت کنتراست رنگ بین حالت‌های فوکوس شده و فوکوس نشده دوباره است. 4.86: 1.

اگر رنگ قاب دکمه با دریافت فوکوس تغییر کند، منطقه کنتراست در امتداد مرز دکمه قرار می گیرد:

وقتی رنگ قاب دکمه یا رنگ پس‌زمینه در فوکوس تغییر می‌کند، ناحیه کنتراست باید حداقل نسبت کنتراست 3:1 بین حالت‌های فوکوس شده و بدون فوکوس داشته باشد تا مطابقت داشته باشد. تمرکز بر ظاهر الزامات کنتراست اگر تغییر کنتراست کمتر از 3:1 باشد، نشانگر فوکوس نه تنها کار نمی کند تمرکز بر ظاهر، اما همچنین شکست خواهد خورد SC 1.4.1 استفاده از رنگ (سطح A).

هنگامی که نشانگر فوکوس یک رنگ ثابت است، اندازه گیری نسبت کنتراست رنگ در ناحیه کنتراست آسان است. اما تغییرات رنگ ممکن است همیشه ثابت نباشد. ممکن است بخواهید فوکوس روی دکمه را با اعمال سایه ی شیب دار روی آن نشان دهید. در این مورد تنها بخشی از گرادیان با کنتراست کافی (بیشتر از 3:1) منطقه کنتراست ما خواهد بود; بقیه که شکست خوردند بخشی از آن نخواهند بود. این مثال زمانی است که ناحیه کنتراست کوچکتر از ناحیه نشانگر فوکوس است.

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

هرچه تغییر کنتراست بین حالت های متمرکز و متمرکز بیشتر باشد، دیدن آن برای کاربران آسان تر است.

2. حداقل منطقه کنتراست

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

ساده ترین راه برای برآورده کردن این نیاز، ارائه یک حاشیه ضخیم 2 پیکسل است محصور می کند عنصر یا جزء

براکت کردن یک جزء به معنای بله است جامد مقید شده است یا را احاطه کنند جزء

صفحه Understanding Focus Appearance دو تصویر ارائه می دهد که تفاوت بین کانتوری که یک جزء را محدود می کند و کانتوری که آن را احاطه کرده است را نشان می دهد:

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

.element {
    outline: 1px solid #000;   
}

و جامد 2 پیکسل طرح کلی دارای مساحت حداقل 2 پیکسل ضخامت محیط جزء است. (البته، هر طرح کلی ضخیم تر از 2 پیکسل نیز نیاز منطقه را برآورده می کند.)

.element {
    outline: 2px solid #000;   
}

اگر نشانگر فوکوس چین خورده یا چین خورده باشد (وصل نیست)، دیگر مؤلفه «جامد» را محدود یا احاطه نمی کند (زیرا دیگر «جامد» نیست). همچنین، دیگر برابر با ضخامت 2px محیط کامپوننت نخواهد بود.

.element {
    outline: 2px dashed #000;   
}

محیط یک است خطی پیوسته که مرز شکلی را تشکیل می‌دهد که شامل پیکسل‌های مشترک نمی‌شود، یا حداقل کادر محدود، هر کدام کوتاه‌تر باشد.

محاسبه محیط برای یک محیط با ضخامت 2px در اطراف یک عنصر به این صورت است: 2×(2×h+2×w) = (4×w + 4×h) که در آن ساعت ارتفاع عنصر است و w عرض است. (محاسبه ساده شده است زیرا شامل پیکسل های مشترک نمی شود.)

محیط دایره است 2𝜋r، کجا r شعاع این دایره است. ضخامت 2px محیط اطراف یک دایره برابر است با 4𝜋r.

هنگامی که نشانگر فوکوس یک طرح کلی 2 پیکسلی است، مساحت آن برابر با 2 برابر طول محیط دکمه (یا جزء) است. منهای هر فاصله ای که بین خط تیره های طرح وارد شده است. طول حاصل تقریباً نصف حداقل مساحت مورد نیاز است.

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

.element {
    outline: 4px dashed #000;   
}

این همان چیزی است که یک طرح کلی با ضخامت 4 پیکسل به نظر می رسد. هرچه طرح کلی ضخیم‌تر باشد، سطح آن بزرگ‌تر و راحت‌تر دیده می‌شود.

اکنون برای اهداف نمایشی فرض می کنیم که سبک های تمرکز را برای a طراحی می کنید 150 پیکسل از 75 پیکسل دکمه یک محیط با ضخامت 2 پیکسل در اطراف این دکمه برابر است با 4×150px+4×75px = 900 پیکسل.

بنابراین نشانگر فوکوس این دکمه باید دارای ناحیه متضاد حداقل 900 پیکسل باشد.

اگر درخواست بدهید داخلی حلقه به دکمه، آن حلقه کوچکتر از محیط دکمه خواهد بود (زیرا عرض و ارتفاع حلقه از عرض و ارتفاع دکمه کوتاهتر است). و 2px طرح جامد داخلی دارای ناحیه ای کوچکتر از ضخامت 2px محیط دکمه است.

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

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

همانطور که قبلا ذکر شد، نشانگر فوکوس می تواند اشکال دیگری نیز داشته باشد.

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

هرچه خطوط ضخیم تر باشند، منطقه کنتراست بزرگتر، نشانگر فوکوس بیشتر قابل مشاهده است.

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

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

3. حداقل کنتراست با رنگ های همسایه

بر اساس SC 1.4.11 کنتراست غیر متنی (سطح AA)، نشانگرهای فوکوس باید نسبت کنتراست رنگی حداقل 3:1 به رنگ های مجاور داشته باشد.

صفحه «درک کنتراست غیر متنی» «رنگ(های) مجاور» را به عنوان «رنگ‌های مجاور مؤلفه» تعریف می‌کند.

برای دکمه ما، رنگ مجاور، رنگ زمینه سفید اطراف دکمه است.

رنگ های مجاور برای نشانگر فوکوس به موقعیت نشانگر فوکوس در جزء بستگی دارد.

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

• خارج از جزء، در این صورت باید با پس زمینه اطراف مولفه تضاد داشته باشد (این رنگ همسایه نشانگر است).

• داخل جزء، در این صورت باید با رنگ(های) مجاور تضاد داشته باشد. در داخل جزء.

• در امتداد مرز جزء، در این صورت باید متضاد باشد هم با پس زمینه کامپوننت و هم پس زمینه اطراف کامپوننت.

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

به عنوان مثال، اگر دکمه دارای پس‌زمینه آبی، حاشیه سیاه و نشانگر فوکوس دارای حاشیه داخلی سفید باشد، نشانگر سفید باید نسبت کنتراست 3:1 به پس‌زمینه آبی و حاشیه سیاه داشته باشد.

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

من یک نشانگر فوکوس در طبیعت ندیده ام که بخشی از آن در داخل و قسمتی خارج از یک عنصر باشد. اما اگر شاخص است بخشی از داخل و بخشی در خارج، پس باید نسبت کنتراست 3:1 وجود داشته باشد یا با رنگ پس زمینه جزء، یا رنگ خارج از جزء

4. عنصر متمرکز را نمی توان پنهان کرد

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

اما نشانگر فوکوس چه فایده ای دارد اگر خود عنصر فوکوس شده قابل مشاهده نباشد زیرا در خارج از صفحه پنهان یا توسط عناصر دیگر در صفحه پنهان شده است؟

SC 2.4.11 فوکوس کم نور نیست (حداقل) بیان می کند که:

هنگامی که یک مؤلفه UI فوکوس را از صفحه کلید دریافت می کند، به دلیل محتوای ایجاد شده توسط نویسنده، مؤلفه کاملاً پنهان نمی شود.

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

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

SC 2.4.12 فوکوس کم نور نشده (بهبود) (که نسخه سطح AAA این نیاز است) بیان می کند که:

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

هنگامی که به دنبال انطباق با سطح AA هستید، می‌توانید با پنهان کردن جزئی مؤلفه متمرکز کنار بیایید، اگرچه نمی‌توانم تصور کنم که کجا یا چگونه مشکلی ایجاد نمی‌کند. سعی کنید همیشه مطمئن شوید که جزء متمرکز است به طور کامل قابل مشاهده است و توسط مطالب دیگر پوشیده نیست. فقط برای قابلیت استفاده بهتر است. تمرکز در سایه نیست (بهبود) یکی از معیارهای AAA است که برآورده کردن آن نسبتاً آسان است حتی اگر شما به دنبال انطباق با AAA نباشید.

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

بررسی شاخص های تمرکز مرورگر (جاری) در برابر الزامات WCAG

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

کنتراست بدون متن بیان می کند که اطلاعات بصری مورد نیاز برای شناسایی اجزا و حالت های رابط کاربری [must have a contrast ratio of at least 3:1 against adjacent color(s)]، به استثنای اجزای غیرفعال یا زمانی که ظاهر کامپوننت توسط عامل کاربر تعیین می شود و توسط نویسنده تغییر نمی کند (تاکید من است).

این بدان معنی است که نشانگرهای تمرکز مرورگر از این الزامات مستثنی هستند، حتی اگر آنها را ملاقات نکنند. به این معنا که نشانگرهای فوکوس پیش‌فرض در نظر گرفته می‌شوند که این معیار را برآورده کنند، حتی اگر نسبت کنتراست 3:1 به رنگ‌های مجاور نداشته باشند. اگر به وضوح قابل مشاهده نباشند.

نشانگرهای فوکوس پیش فرض نیز منتشر می شوند تمرکز بر ظاهر الزامات، کافی است نشانگر فوکوس و رنگ پس زمینه نشانگر توسط نویسنده تغییر نکرده است.

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

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

این مورد دیگری از “WCAG قابلیت استفاده را تضمین نمی کند” است که نمونه های زیادی از آن را در طول فصل های قبلی دیده ایم.

در این بخش، اندازه‌گیری می‌کنیم که شاخص‌های فوکوس پیش‌فرض تا چه اندازه با الزامات نشانگرهای فوکوس به وضوح قابل مشاهده (و قابل استفاده) هستند.

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

برای تعیین اینکه آیا شاخص پیش فرض مطابق با الزامات است، باید بررسی کنید که آیا:

• کنتراست کافی با رنگ های همسایه وجود دارد
• دارای یک ناحیه متضاد است که حداقل به اندازه محیط ضخامت 2 پیکسلی دکمه است
• کنتراست کافی در ناحیه کنتراست بین حالت های متمرکز و غیر متمرکز وجود دارد

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

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

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

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

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

سافاری:

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

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

رنگ صورتی دارای یک نسبت کنتراست پایین در برابر اکثر رنگ های پس زمینه نسبت کنتراست 2.1:1 در پس زمینه سفید دارد. و نسبت کنتراست 2.1:1 در پس زمینه مشکی.

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

کروم:

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

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

به عنوان مثال، طرح کلی صورتی کنتراست پایینی با رنگ پس‌زمینه دکمه سیاه (2.8:1)، دکمه آبی (1.7:1) و دکمه صورتی (1.4:1) دارد، به این معنی که مطابقت ندارد. کنتراست بدون متن الزامات

لبه:

نشانگر فوکوس Edge یک طرح کلی سیاه است که در امتداد حاشیه دکمه اعمال می شود، به این معنی که باید کنتراست کافی هم با رنگ پس زمینه بیرون دکمه و هم با رنگ پس زمینه دکمه وجود داشته باشد.

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

این نشانگر به دلیل سیاه بودن، کنتراست خوبی را در برابر رنگ های روشن ارائه می دهد. اما حداقل نسبت کنتراست را در برابر رنگ های تیره برآورده نمی کند.

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

فایرفاکس:

نشانگر فوکوس فعلی فایرفاکس یک طرح کلی صورتی است که اطراف دکمه را احاطه کرده است. رنگ مجاور نشانگر رنگ پس زمینه صفحه است.

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

برای مثال، در زمینه خاکستری روشن، نسبت کنتراست بین صورتی و خاکستری 2:1 است (که کمتر از 3:1 است). این بدان معنی است که نسبت کنتراست ناحیه کنتراست حداقل مورد نیاز کنتراست و همچنین نسبت کنتراست رنگ های مجاور را برآورده نمی کند.

---

کروم، اج و فایرفاکس آنچه را که به نظر می رسد پیاده سازی می کنند مدار دوم – طرح کلی سفید – اطراف نشانگر. شما می توانید آن را واضح تر در پس زمینه تیره تر ببینید. برای مثال، به ترتیب در کروم و اج روی پس‌زمینه بنفش تیره به این شکل به نظر می‌رسد:

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

این طرح سفید بیرون از دکمه است، به این معنی که فقط باید با رنگ پس‌زمینه خارج از دکمه تضاد داشته باشد. نیازی به تضاد با رنگ(های) دکمه نیست.

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

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

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

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

نشانگر فوکوس فعلی Edge نزدیکترین نشانگر پیش فرض به این سطح کنتراست است. اما اینکه نشانگر Edge به عنوان حاشیه ارائه شده است به این معنی است که باید با دو رنگ مجاور تضاد داشته باشد و اگر آن رنگ ها رنگ های متضاد باشند (مثلاً اگر یکی از آنها روشن و دیگری تیره باشد) احتمالاً حداقل نسبت کنتراست مشخص شده در زیر را برآورده نمی کند. کنتراست بدون متن در برابر یکی از آنها

اما اگر سیاه و سفید هر دو را مشخص کنند احاطه شده است را فشار دهید، سپس آنها فقط باید نسبت کنتراست 3:1 به رنگ پس زمینه اطراف دکمه داشته باشند.

اندازه گیری نسبت کنتراست تنها در برابر یک رنگ به این معنی است که طرح سیاه یا سفید از الزامات کنتراست رنگ های مجاور عبور می کند. اگر سفید نگذرد، سیاه خواهد شد. و برعکس این امر ترکیب سیاه و سفید را به دستور العمل مناسبی برای نشانگر فوکوس “جهانی” تبدیل می کند.

نشانگر فوکوس “جهانی”.

با الهام از نشانگر Edge، می توانید یک نشانگر فوکوس سیاه و سفید بهبود یافته، همه کاره و سیاه و سفید برای وب سایت خود ارائه دهید که برای اکثر عناصر قابل فوکوس (اگر نه همه) کار می کند و کنتراست کافی را در برابر همه رنگ های پس زمینه ارائه می دهد.

این نشانگر فوکوس از دو (یا بیشتر) کانتور تشکیل شده است: یک کانتور سفید و یک کانتور سیاه.

چون نمیتونیم استفاده کنیم outline ویژگی برای ارائه دو کانتور با رنگ های مختلف، در حال حاضر ما نیاز به استفاده از ترکیبی از outline و box-shadow برای ایجاد افکت مورد نظر:

:focus-visible {
    outline: 3px solid black;
    box-shadow: 0 0 0 6px white;
}

را box-shadow اعلان یک سایه جعبه “جامد” (با شعاع تاری صفر) در اطراف عنصر ایجاد می کند. خطوط با سایه‌های کادر همپوشانی دارند، به این معنی که طرح کلی 3 پیکسلی (سیاه) ایجاد شده با outline سایه جعبه ایجاد شده “پشت” عنصر همپوشانی خواهد داشت. بنابراین سایه جعبه را 3 پیکسل باز می کنیم (بنابراین عرض کل 6 پیکسل است). این تضمین می کند که قسمت قابل مشاهده سایه (سفید) نیز 3 پیکسل عرض داشته باشد و مانند یک طرح کلی به نظر برسد.

اگر اکثر دکمه‌ها یا اجزای وب‌سایت شما دارای رنگ‌های تیره هستند، ممکن است بخواهید ترتیب خطوط سیاه و سفید را برعکس کنید تا خطوط سفید کنتراست بیشتری با اجزا ایجاد کنند:

:focus-visible {
    outline: 3px solid white;
    box-shadow: 0 0 0 6px black;
}

این کانتور علاوه بر ایجاد کنتراست کافی با رنگ های همسایه، مزایای دیگری نیز دارد:

1. از آنجایی که خارج از کامپوننت رندر می شود، اندازه بصری کامپوننت را هنگام نمایش افزایش می دهد و تشخیص آن را آسان تر می کند.
2. طرح کلی با استفاده از outline ویژگی در حالت‌های رنگی اجباری (مانند حالت کنتراست بالا ویندوز) حفظ می‌شود، جایی که سایر سبک‌های بصری مانند سایه‌های جعبه و رنگ‌های پس‌زمینه توسط رنگ‌های سیستم نادیده گرفته می‌شوند.

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

به قلم نگاه کن
#PracticalA11y: نشانگر فوکوس جهانی اثر سارا سویدان (@SaraSoueidan)
در CodePen.

اگر می خواهید شاخص های تمرکز خود را به سطح بعدی ببرید و آنها را بسازید حتی بیشتر از این ببینید، می توانید از چیزی که اریک کروز طراح آن را نشانگر “Oreo-focus” می نامد استفاده کنید. مفهوم یکسان است: شما از سیاه و سفید برای ایجاد یک نشانگر فوکوس استفاده می کنید، اما به جای یک طرح کلی سفید و سیاه، دو طرح سیاه با یک طرح کلی سفید در بین آنها ایجاد می کنید (مانند یک Oreo!). این نشانگر فوکوس را بدون توجه به رنگ هایی که در مؤلفه(های) خود استفاده می کنید، بیشتر قابل مشاهده می کند.

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

:focus-visible {
  outline: 9px double black;
  box-shadow: 0 0 0 6px white;
}

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

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

به قلم نگاه کن
#PracticalA11y: نشانگر فوکوس جهانی اثر سارا سویدان (@SaraSoueidan)
در CodePen.

تقریباً در تمام پروژه های خود می توانید از هر یک از خطوط کلی که اخیراً نشان دادیم استفاده کنید. من شخصا شروع کرده ام آنها را در تمام فایل های CSS شروع کننده خود که در پروژه هایم دوباره استفاده می کنم اضافه کنم.

نمایش نشانگر فوکوس فقط برای کاربران صفحه کلید

بحث اصلی که معمولا می شنوم در مقابل نشانگرهای فوکوس این است که حتی زمانی که شما نمی خواهید ظاهر می شوند – مانند زمانی که ماوس را کلیک می کنید یا مؤلفه را لمس می کنید. طراحان و ذینفعان معمولاً این را خیلی دوست ندارند.

امروز، همه مرورگرهای مدرن فقط در صورت نیاز نشانگرهای فوکوس را به طور پیش فرض نمایش می دهند: هنگام پیمایش صفحه با صفحه کلید. وقتی روی یک مورد کلیک می‌کنید یا ضربه می‌زنید، طرح اصلی فوکوس نمایش داده نمی‌شود. فقط زمانی ظاهر می شود که آن را با صفحه کلید فشار دهید.

هنگام ارائه نشانگرهای تمرکز سفارشی خود، احتمالاً می خواهید همین کار را انجام دهید و آنها را فقط به کاربرانی که به آنها نیاز دارند نشان دهید. شما می توانید این کار را با استفاده از :focus-visible انتخابگر

:focus-visible دقیقا همین کار را می کند :focus این کار را انجام می دهد، با این تفاوت که تنها زمانی که آن عنصر آن عنصر را دریافت می کند، سبک های نشانگر فوکوس را برای یک عنصر اعمال می کند فوکوس صفحه کلید.

:focus-visible {
    outline: 9px double black;
    box-shadow: 0 0 0 6px white;
}

اکنون نشانگر فوکوس فقط برای کاربرانی که با صفحه کلید (یا فناوری کمکی شبیه به صفحه کلید) حرکت می کنند، قابل مشاهده است و کاربران غیر کیبورد حتی نمی دانند که آنجاست!

پشتیبانی مرورگر برای :focus-visible بسیار خوب است – تقریباً همه مرورگرهای مدرن امروزی از آن پشتیبانی می کنند.

اگر (هنوز) نیاز به پشتیبانی از اینترنت اکسپلورر دارید، می‌توانید از یک پلی‌پری جاوا اسکریپت با فوکوس قابل مشاهده استفاده کنید، یا اگر مانند من هستید و رویکرد بهبود پیشرونده را ترجیح می‌دهید که به جاوا اسکریپت متکی نیست، می‌توانید از آن استفاده کنید. :focus-visible به عنوان یک بهبود در ترکیب با :focus.

در مقاله خود در مورد :focus-visible و سازگاری با عقب، Patrick Laucke نشان می دهد که چگونه می توانید از آن استفاده کنید :not() نفی شبه کلاس و (به طور متناقض) تعریف سبک های نه برای :focus-visible، اما برای لغو :focus سبک های زمانی که از دست رفته، و سپس استفاده می شود :focus-visible اگر می خواهید سبک های قوی تری برای مرورگرهایی که از آن پشتیبانی می کنند ارائه دهید.

button:focus { 
	 
}

button:focus:not(:focus-visible) {
}

button:focus-visible { 
  
}

را button:focus:not(:focus-visible) بخش CSS برای “زمانی که دکمه فوکوس می شود که از فوکوس قابل مشاهده نیست” است. یعنی “وقتی دکمه فوکوس می شود که فوکوس صفحه کلید نیست”… سپس همه را لغو کنید :focus سبک ها سپس سبک های فوکوس فقط صفحه کلید را با استفاده از آن اعمال کنید button:focus-visible.

همانطور که پاتریک اشاره می کند، این حتی در مرورگرهایی که از آن پشتیبانی نمی کنند نیز کار می کند :focus-visible زیرا اگرچه :not() شبه کلاس‌ها را به عنوان بخشی از فهرست انتخابی خود پشتیبانی می‌کند، مرورگرها هنگام استفاده از کلاس شبهی که نمی‌فهمند/پشتیبانی می‌کنند، هر چیزی را نادیده می‌گیرند، یعنی کل button:focus:not(:focus-visible) { ... } بلوک هرگز اعمال نمی شود.

من این بخش را با این پاراگراف از مقاله پاتریک به پایان می برم (تاکید از من است):

اگر به سازگاری با عقب اهمیت می دهید (و باید، در حالی که می توانید بدون هیچ شکی تضمین کنید که همه کاربران شما مرورگری خواهند داشت که از آن پشتیبانی می کند :focus-visible، همیشه باید ترکیبی از را پر کنید یا از آن استفاده کنید :focus و :not(:focus-visible) (به علاوه یک گزینه حتی قوی تر :focus-visible).

Outro

نشانگرهای فوکوس یک افزونه کوچک اما حیاتی برای وب سایت شما هستند که توانایی بهبود قابلیت استفاده از وب سایت یا برنامه شما را برای میلیون ها نفری که از آن استفاده خواهند کرد را دارد.

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

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

اگر یک توسعه دهنده هستید، سبک های تمرکز را در پیش فرض های CSS خود قرار دهید. اگر با طراحان کار می‌کنید، اگر قبلاً آنها را در مشخصات طراحی اولویت‌بندی نکرده‌اند، درباره سبک‌های تمرکز با آنها بحث کنید. و از آن استفاده کنید :focus-visible برای اطمینان از اینکه شاخص های تمرکز فقط به افرادی که به آنها نیاز دارند نشان داده می شود.

منابع، مراجع و مطالعه بیشتر

---

از جیمز ادواردز برای بررسی و بازخوردش در مورد این نسخه از مقاله و از Alistair Campbell برای بررسی و بازخوردش در مورد نسخه قبلی بسیار سپاسگزاریم.