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

آیا تا به حال متوجه شده اید که وقتی در حال پر کردن فرم هستید ، بعضی اوقات در اطراف دکمه ها یا فیلد های شکل نشان داده شده است؟وقتی روی یک مورد منو کلیک می کنید ، چه می کنید؟آیا تا به حال سعی کرده اید این طرح ها را ناپدید کنید؟

در اینجا یک نکته وجود دارد: به طور پیش فرض ، مرورگرها از کلاس شبه CS Focus CSS استفاده می کنند تا هنگام انتخاب عناصر ، زمینه ها و عناصر دیگر را تشکیل دهند. نکته دیگری در اینجا وجود دارد: اگر تصمیم دارید از شر طرح های آبی خلاص شوید ، حتماً آنها را با چیز دیگری جایگزین کنید!یک زیر مجموعه کامل از کاربران وجود دارند که به این طرح ها اعتماد می کنند تا به آنها بگویند که در صفحه قرار دارند.

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

به هر حال چه کسی به شاخص های تمرکز نیاز دارد؟

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

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

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

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

همچنین لازم به ذکر است که "تمرکز قابل مشاهده" الزامی است که یک سایت تحت دستورالعمل های دسترسی به محتوای وب (WCAG) قابل دسترسی باشد. WCAG رایج ترین مورد توافق بر اساس استاندارد دسترسی است ، و تعداد فزاینده ای از کشورها قوانینی دارند که نیاز دارند که وب سایت های عمومی با استاندارد WCAG مطابقت داشته باشند.

چه تمرکز بر روی صفحه وب است؟

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

• لینک
• دکمه ها
• فیلدها / کنترل ها (فیلدهای متن ، جعبه ها ، دکمه های رادیویی و غیره را انتخاب کنید)
• موارد منو
• چیزهایی که توسط Hover ایجاد شده است ، مانند نوک ابزار
• ویجت ها ، مانند یک انتخاب کننده تقویم

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

شاخص های تمرکز چگونه به نظر می رسند

نمایش طرح کلی اطراف یک عنصر به همه افرادی که الف) از صفحه کلید برای پیمایش استفاده می کنند و ب) همچنین می توانند صفحه را ببینند کمک می کند. می خواهید ببینید چگونه کار می کند؟این صفحه را دوباره بارگیری کنید و سپس چند بار کلید Tab را بزنید. شما باید خطوط زرد را در اطراف برخی از موارد در هدر ببینید، مانند لوگو و نمادهای رسانه های اجتماعی. هر بار که Tab را می زنید، طرح کلی به عنصر بعدی در ترتیب تمرکز (که معمولاً ترتیبی است که هر عنصر در کد ظاهر می شود) حرکت می کند. برای فعال کردن لینک می توانید Enter یا Return را بزنید. با استفاده از کلیدهای Tab، فلش و Enter/Return می‌توانید بیشتر وب را با صفحه‌کلید پیمایش کنید.

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

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

فایرفاکس

فوکوس پیوند یک طرح کلی نقطه‌دار است و همان رنگ پیوند است.

طرح‌های فیلد فرم به جای سیاه، آبی هستند و فقط 1 پیکسل عرض دارند.

دکمه ها دارای یک طرح کلی آبی و یک طرح برجسته کوچکتر در اطراف برچسب دکمه هستند.

کروم

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

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

و همینطور دکمه ها.

اینترنت اکسپلورر

فوکوس لینک یک طرح کلی خاکستری تیره نقطه‌دار است که رنگ آن بر اساس پیوند تغییر نمی‌کند.

فیلدهای فرم کمی سیاه تر از خاکستری تیره و تیره استاندارد هستند.

دکمه‌ها یک طرح کلی در اطراف متن دارند و هیچ چیز دیگری ندارند.

شاخص های پیش فرض چندان عالی نیستند

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

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

طراحی شاخص های تمرکز موثر

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

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

نکاتی برای طراحی

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

چند نمونه

وب سایت دسترسی به دانشگاه میشیگان برای پیوندهای خود از رنگهای معکوس استفاده می کند. Hover تقریباً مشابه Focus است - Focus همچنین شامل یک طرح آبی روشن است که بسیار نزدیک به تمرکز مرورگر بومی برای Chrome است.

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

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

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

وب سایت دستورالعمل های دسترسی به وب سازمان ملل متحد از یک سبک ساده اما مؤثر برای دکمه ها استفاده می کند. در شناور ، دکمه ها از پس زمینه خاکستری استفاده می کنند. در Focus ، یک خط نیمه ضخیم در اطراف دکمه ظاهر می شود. در هر صورت ، دکمه پیدا کردن آسان است.

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

چگونه / چه موقع باید با شاخص های تمرکز مقابله کنید

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

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

• طراحی الگوهای جدید
• بهبود یک برنامه موجود

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

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

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

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

توسط Caitlin Geier 29 ژوئن 2016

دسته بندی ها

این را به اشتراک بگذارید

درباره کیتلین گایر

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

نظرات 9 پاسخ

با تشکر از پست کیتلین.

روده بر شدن از خنده!خنده دار است که من به تازگی متوجه استفاده از شاخص های تمرکز هستم. فکر می‌کردند چیزهای فانتزی هستند که گیک‌ها در وب‌سایت خود قرار داده‌اند تا آن را جذاب‌تر کنند.

من حتی در این فرم نظر متوجه آن شدم.🙂

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

امکان پیش نمایش نظر من وجود ندارد. بدیهی است که می‌خواستم موارد زیر را در آن تگ نقل کنم: «به طور کلی ایده خوبی است که سبک تمرکز مرورگر بومی را برای همه عناصر با یک سبک سفارشی جایگزین کنید تا شاخص‌های فوکوس در مرورگرها ثابت باشند.»

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

کیتلین گایر می گوید:

این نکته بسیار خوبی است ، مایک ، متشکرم!من موافقم که غلبه بر پیش فرض ها می تواند از بسیاری جهات خطرناک باشد ، به ویژه اگر طراحان و توسعه دهندگان مسئول اجرای ، پیامدهای کامل بر سبک های تمرکز پیش فرض را درک نکنند. با این حال ، من فهمیدم که بسیاری از طراحان (و توسعه دهندگان!) ترجیح می دهند به دلیل زشتی و ناسازگاری سبک های پیش فرض ، یک ظاهر طراحی شده را خاموش کنند - و سپس آنها زحمت نمی کشند که آنها را به هیچ وجه جایگزین کنند. من ترجیح می دهم که طراحان تلاش کنند تا آنها را به شکلی درج کنند که به آنها امکان کنترل طراحی را بدهد تا اینکه آنها را به طور کلی خاموش کنند.

با تشکر از به اشتراک گذاری 🙂 برای مواردی که از نشانگر تمرکز درخواست می شود خاموش شود (همیشه مشتری بوده است که این کار را در تجربه من درخواست می کند) ، آیا یک سازش احتمالی برای نشان دادن وضعیت تمرکز برای مدت زمان کوتاه است (به عنوان مثال 2ثانیه) از طریق انیمیشن های CSS؟

این یک مقاله عالی بود- متشکرم!من کنجکاو بودم اگر کسی تجربه/ بهترین شیوه هایی را داشته باشد تا در مورد وضعیت تمرکز پیش فرض در یک صفحه به اشتراک بگذارد؟برای مثال ، ما در سایتی کار می کنیم که دارای یک NAVBAR در بالای صفحه است ، که در این صورت لیستی از دسته های منو است که افراد می توانند روی آن کلیک کنند. در طول برنامه ما معمولاً به اولین مورد در Navbar اما در این صفحه اصلی ، اولین مورد در Navbar یک آرم است (نه یک عنصر عملی). مورد دوم در NAVBAR دکمه سفارش لغو است.

ما در نظر داریم از NAV پرش کنیم و کاربران را به دسته اصلی منو منتقل کنیم ، اما نگران این هستیم که بتوانیم به موارد موجود در بالای NAVBAR مانند سفارش لغو ، ترجیحات رژیم غذایی ، مشاهده کیف و غیره دسترسی پیدا کنیم.

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

رایان باتمن می گوید:

با تشکر از سوال شما دایانا. همکاران من دنیس و هارون به جمع آوری این پاسخ کمک کردند. از دنیس: من معتقدم که دو سؤال مختلف را در اینجا می شنوم: 1) چیزی در مورد شاخص تمرکز ایده آل ، و 2) چیزی در مورد بهترین روشها برای پرش از ناوبری اصلی. امیدوارم که من خیلی دور نباشم!

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

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

امیدوارم که این کمک کند تا کمی نور شود. سال نو مبارک!🙂

از هارون: من یک پست طراحی UX را در مورد تمرکز در اینجا نوشتم: https://www. deque. com/blog/accessible-focus-indicators/

من با ارزیابی دنیس با توجه به ناوبری موافقم. من همچنین ممکن است توصیه کنم که آنها از پیوند پرش با پیوندهای مختلفی در آن استفاده کنند که ممکن است فقط یک صفحه کلید را به قسمت های مهم برنامه مورد نظر خود نشان دهد که می توانند به آن دسترسی سریع اجازه دهند (آنها می توانند نحوه انجام ما در مناطق مختلف را بررسی کنند. در https://pattern-library. dequelabs. com/).

در مورد زمان استفاده از پیش فرض در مقابل چه زمانی ، این یک سوال تا حدودی فلسفی است. تمرکز پیش فرض (حلقه ، به طور معمول) باید از نسبت کنتراست رنگ 4. 5: 1 عبور کند (یا 3: 1 اگر حلقه 2px باشد یا بیشتر باشد ... دنیس ممکن است بخواهد روده را بررسی کند ، من معتقدم که برای 2. 2 ساخته شده است) ، و به درستیعنصر را بدون قطع شدن یا قطع شدن محاصره کنید. با این حال ، شما می توانید انواع روش های درمانی را برای تمرکز یک عنصر انجام دهید. سوال واقعی این است که کلاس اول چگونه عنصر است و آیا به درمانی نیاز دارد که از پیش فرض متمایز باشد. این سوالی است که هرکسی که سیستم طراحی خود را کنترل کند یا یک UX ارشد بتواند پاسخ دهد زیرا فقط از نظر فنی مطابقت ندارد بلکه مطابق با خواسته های الگوی و درمان بصری آنها است. من در مقاله ای که در بالا ارسال کرده ام به این موضوع اشاره می کنم.

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