ستكون هذه هي المشاركة الثانية في سلسلة صغيرة نقوم بها بشأن إمكانية الوصول إلى النموذج. إذا فاتتك المشاركة الأولى، راجع نماذج يمكن الوصول إليها مع فئات زائفة. في هذا المنشور سنلقي نظرة على :focus-visible وكيفية استخدامه في مواقع الويب الخاصة بك!

التركيز على نقطة اللمس

قبل أن نمضي قدما مع :focus-visible، دعونا نعيد النظر في كيفية القيام بذلك :focus يعمل في CSS الخاص بك. التركيز هو المؤشر المرئي الذي يتم التفاعل معه من خلال لوحة المفاتيح أو الماوس أو لوحة التتبع أو التكنولوجيا المساعدة. تكون بعض العناصر تفاعلية بشكل طبيعي، مثل الروابط والأزرار وعناصر النموذج. نريد أن نتأكد من أن مستخدمينا يعرفون مكان تواجدهم والتفاعلات التي يقومون بها.

تذكر لا تفعل هذا في CSS الخاص بك!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

عندما تقوم بإزالة التركيز، فإنك تقوم بإزالته لـ الجميع! نريد أن نتأكد من أننا نحافظ على التركيز.

إذا كنت بحاجة لأي سبب من الأسباب إلى إزالة التركيز، فتأكد من وجود بديل أيضًا :focus أنماط لمستخدميك. يمكن أن يتطابق هذا الخيار الاحتياطي مع ألوان علامتك التجارية، ولكن تأكد من إمكانية الوصول إلى هذه الألوان أيضًا. إذا كان التسويق أو التصميم أو العلامة التجارية لا يحب أنماط حلقات التركيز الافتراضية، فقد حان الوقت لبدء المحادثات والتعاون معهم بشأن أفضل طريقة لإضافتها مرة أخرى.

ما هي تفاصيل focus-visible?

الطبقة الزائفة :focus-visible، هو تماما مثل الافتراضي لدينا :focus الطبقة الزائفة. إنه يعطي المستخدم مؤشرًا على أنه يتم التركيز على شيء ما في الصفحة. الطريقة التي تكتب بها :focus-visible يتم قطعها وتجفيفها:

:focus-visible {
  /* ... */
}

عند استخدام :focus-visible مع عنصر محدد، يبدو بناء الجملة كما يلي:

.your-element:focus-visible {
  /*...*/
}

الشيء العظيم في استخدام :focus-visible هو أنه يمكنك إبراز العنصر الخاص بك، مشرقة وجريئة! لا داعي للقلق بشأن إظهار ما إذا تم النقر/النقر على العنصر. إذا اخترت عدم تنفيذ الفصل، فسيكون الإعداد الافتراضي هو حلقة تركيز وكيل المستخدم والتي يعتبرها البعض غير مرغوب فيها.

Backstory من focus-visible

قبل أن يكون لدينا :focus-visible، سيتم تطبيق نمط وكيل المستخدم :focus لمعظم العناصر الموجودة في الصفحة؛ الأزرار والروابط وما إلى ذلك. سيتم تطبيق مخطط تفصيلي أو "حلقة تركيز" على العنصر القابل للتركيز. تم اعتبار هذا أمرًا قبيحًا، ولم يعجب معظمهم بحلقة التركيز الافتراضية التي يوفرها المتصفح. ونتيجة لكون حلقة التركيز غير ملائمة للنظر إليها، قام معظم المؤلفين بإزالتها... دون أي تراجع. تذكر، عند الإزالة :focus، فهو يقلل من سهولة الاستخدام ويجعل التجربة غير قابلة للوصول لمستخدمي لوحة المفاتيح.

في الوضع الحالي للويب، لم يعد المتصفح يشير بشكل واضح إلى التركيز على العناصر المختلفة عندما يكون هناك تركيز عليها. يستخدم المتصفح بدلاً من ذلك أساليب استدلالية مختلفة لتحديد متى سيساعد المستخدم، مما يوفر حلقة تركيز في المقابل. وفق أكاديمية خان، الكشف عن مجريات الأمور هو، "تقنية توجه الخوارزمية للعثور على خيارات جيدة."

ما يعنيه هذا هو أن المتصفح يمكنه اكتشاف ما إذا كان المستخدم يتفاعل مع التجربة من خلال لوحة المفاتيح أو الماوس أو لوحة التتبع أم لا، وبناءً على نوع الإدخال هذا، فإنه يضيف حلقة التركيز أو يزيلها. يسلط المثال الموجود في هذا المنشور الضوء على تفاعل الإدخال.

في الايام الاولى من :focus-visible كنا نستخدم أ بوليفيل للتعامل مع حلقة التركيز التي أنشأتها أليس بوكسهول وبريان كارديل، خرجت موزيلا أيضًا بفئتها الزائفة الخاصة بها، :moz-focusringقبل المواصفات الرسمية. إذا كنت ترغب في معرفة المزيد عن الأيام الأولى لحلقة التركيز، فراجع ذلك A11y يلقي مع روب دودسون.

أهمية التركيز

هناك الكثير من الأسباب التي تجعل التركيز مهمًا في طلبك. أولاً، كما ذكرت أعلاه، يتعين علينا كسفراء للويب التأكد من أننا نقدم أفضل تجربة ممكنة ويمكن الوصول إليها. لا نريد أن يخمن أي من مستخدمينا مكان تواجدهم أثناء التنقل عبر التجربة.

أحد الأمثلة التي تتبادر إلى الذهن دائمًا هو موقع الأخوين المكفوفين. إذا ذهبت إلى موقع الويب وقمت بالنقر/النقر (يعمل هذا على الهاتف المحمول)، فسترى العين المغلقة في الزاوية اليسرى السفلية، وسترى العين مفتوحة وتبدأ المحاكاة. تم تشخيص إصابة الأخوين برادفورد وبريان مانينغ في سن مبكرة بمرض ستارغاردت. مرض ستارغاردت هو شكل من أشكال الضمور البقعي للعين. بمرور الوقت، سيصبح كلا الأخوين أعمى تمامًا. قم بزيارة الموقع وانقر على العين لترى كيف يرون.

إذا كنت مكانهم وكان عليك التنقل عبر الصفحة، فستحتاج إلى التأكد من أنك تعرف بالضبط مكان وجودك طوال التجربة بأكملها. تمنحك حلقة التركيز تلك القوة.

تجربة

يوضح العرض التوضيحي أدناه كيف :focus-visible يعمل عند إضافته إلى CSS الخاص بك. يعرض الجزء الأول من الفيديو تجربة التنقل باستخدام الماوس، بينما يعرض الجزء الثاني التنقل باستخدام لوحة المفاتيح فقط. لقد سجلت نفسي أيضًا لإظهار أنني قمت بالتبديل من استخدام الماوس إلى لوحة المفاتيح.

يتنبأ المتصفح بما يجب فعله بحلقة التركيز بناءً على مدخلاتي (لوحة المفاتيح/الماوس)، ثم يضيف حلقة تركيز إلى تلك العناصر. في هذه الحالة، عندما أتنقل عبر هذا المثال باستخدام لوحة المفاتيح، يتم التركيز على كل شيء. عند استخدام الماوس، يتم التركيز على الإدخال فقط ولا يتم التركيز على الأزرار. إذا قمت بإزالة :focus-visible، سيقوم المتصفح بتطبيق حلقة التركيز الافتراضية.

يتم تطبيق الكود أدناه :focus-visible إلى العناصر القابلة للتركيز.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

إذا كنت تريد تحديد label أو زر الاستلام :focus-visible فقط قم بإعداد الفصل بـ input or button على التوالي.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

الدعم الفني

إذا كان المتصفح لا يدعم :focus-visible يمكنك الرجوع إلى مكانك للتعامل مع التفاعل. الكود أدناه هو من ملعب MDN. يمكنك استخدام ال supports في القاعدة أو "الاستعلام عن الميزة" للتحقق من الدعم. هناك شيء واحد يجب أخذه في الاعتبار، وهو أنه يجب وضع القاعدة في الجزء العلوي من الكود أو دمجها داخل مجموعة أخرى في القاعدة.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

مزيد من المخاوف المتعلقة بإمكانية الوصول

مخاوف إمكانية الوصول التي يجب وضعها في الاعتبار عند بناء تجربتك:

• تأكد من أن الألوان التي تختارها لمؤشر التركيز الخاص بك، إن وجدت، لا يزال من الممكن الوصول إليها وفقًا للمعلومات الموثقة في WCAG 2.2 التباين غير النصي (المستوى AA)
• الزائد المعرفي يمكن أن يسبب ضائقة للمستخدم. تأكد من الحفاظ على تناسق الأنماط على العناصر التفاعلية المختلفة

دعم المتصفح

روابط

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
• أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
• أفلاطون كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
• أفلاطون هيلث. التكنولوجيا الحيوية وذكاء التجارب السريرية. الوصول هنا.
• المصدر https://css-tricks.com/managing-user-focus-with-focus-visible/