حالات التركيز التي يمكن الوصول إليها: تصميم التركيز المرئي للوحة المفاتيح
كيفية تصميم تركيز مرئي للوحة المفاتيح يتوافق مع WCAG 2.2: ما يتطلبه 2.4.7 و2.4.13، وكيف: يعمل التركيز المرئي، ونصائح التصميم لحلقات التركيز.
الوجبات الجاهزة الأساسية
يحتاج كل عنصر تفاعلي إلى مؤشر تركيز مرئي بوضوح لمستخدمي لوحة المفاتيح؛ يتطلب WCAG 2.2 أن يكون على المستوى AA (2.4.7). للحصول على مؤشر قوي، استهدف توجيهات WCAG AAA (2.4.13): على الأقل مساحة مخطط 2 CSS بكسل حول العنصر مع تباين 3:1 بين الحالات المركزة وغير المركزة. استخدم :focus-visible لإظهار الحلقات لمستخدمي لوحة المفاتيح دون إظهارها عند كل نقرة بالماوس.
لماذا يهم حالات التركيز
يتنقل الأشخاص الذين يستخدمون لوحة المفاتيح أو يبدلون الأجهزة أو مكبر الشاشة عبر الصفحة عنصرًا تلو الآخر. مؤشر التركيز هو الطريقة الوحيدة التي يعرفون بها مكانهم. تعد إزالة مخطط المتصفح بدون استبدال أحد أكثر حالات فشل إمكانية الوصول شيوعًا.
ما يتطلبه WCAG 2.2
يتطلب معيار النجاح 2.4.7 التركيز المرئي (المستوى AA) أن تحتوي أي واجهة قابلة للتشغيل بواسطة لوحة المفاتيح على وضع يكون فيه مؤشر التركيز مرئيًا. أضاف WCAG 2.2 2.4.13 مظهر التركيز (المستوى AAA)، والذي يصف مؤشرًا قويًا: على الأقل كبير مثل مساحة محيط المكون بسمك 2 CSS بكسل، مع نسبة تباين لا تقل عن 3:1 بين الحالات المركزة وغير المركزة.
:التركيز المرئي
يوضح MDN أن :focus-visible ينطبق عندما يكون هناك تركيز على عنصر ما ويقرر المتصفح، باستخدام الاستدلال، أنه يجب إظهار هذا التركيز، عادةً لاستخدام لوحة المفاتيح. يتيح لك ذلك إظهار حلقات تركيز قوية لمستخدمي لوحة المفاتيح دون إظهارها في كل مرة ينقر فيها شخص ما على زر بالماوس. استخدمه بدلاً من إزالة الخطوط العريضة.
تصميم الخاتم
التوجيه العملي:
- استخدم مخططًا تفصيليًا أو حلقة ذات إزاحة حتى لا تندمج مع العنصر.
- التحقق من التباين في كل خلفية يمكن أن يظهر عليها العنصر؛ حلقة ذات لونين تساعد.
- اجعلها متسقة عبر المكونات، والتي تم تعريفها كرمز مميز في نظام التصميم الخاص بك.
- لا تعتمد أبدًا على تغيير اللون الدقيق وحده.
- تأكد من عدم إخفاء العنصر الذي تم التركيز عليه خلف الرؤوس اللاصقة.
التركيز والحركة
يمكن أن تظهر حلقة التركيز خلال فترة انتقالية قصيرة جدًا، ولكن يجب أن تبدو فورية. تجنب الرسوم المتحركة التي تؤخر الرنين أو تحرك العنصر، وبالنسبة للمكونات المخصصة المرسومة على لوحة الرسم، تأكد من أنه لا يزال هناك عنصر حقيقي قابل للتركيز في الصفحة حتى يتمكن مستخدمو لوحة المفاتيح من الوصول إليه.
مفتاح Principle للتذكر
- مطلوب التركيز المرئي في WCAG AA (2.4.7)
- 2.4.13 (AAA): مساحة محيطية تبلغ 2 بكسل وتغيير التباين بنسبة 3:1
- استخدم :focus-visible بدلاً من إزالة الخطوط العريضة
- حدد حلقة التركيز كرمز تصميمي
- تحتاج واجهة المستخدم المعروضة على قماش إلى عناصر حقيقية قابلة للتركيز
الأسئلة المتداولة
المصادر
- Understanding SC 2.4.7: Focus Visible — W3C واي
- Understanding SC 2.4.13: Focus Appearance — W3C واي
- :focus-visible — MDN مستندات الويب