تركيز لوحة المفاتيح

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

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

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

في هذه الوحدة، نركز على بنية HTML ونمط CSS لوحة المفاتيح والعناصر التي يمكن التركيز عليها. تشير رسالة الأشكال البيانية تتضمن وحدة JavaScript المزيد من معلومات حول إدارة التركيز وضغطات المفاتيح للعناصر التفاعلية.

ترتيب التركيز

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

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

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

يمكنك تعديل ترتيب التركيز لتضمين أي عناصر غير معتادة التركيز، مثل عناصر HTML غير التفاعلية، أو المكونات المخصصة، أو العناصر التي تتضمّن ARIA والتي تلغي الدلالة الدلالية للتركيز الطبيعي.

مؤشر Tabindex

يبدأ ترتيب التركيز بعناصر لها إيجابية tabindex (إن وجدت) وتنتقل من أصغر رقم موجب إلى الأكبر (مثل 1، 2، 3). ثم ينتقل من خلال عناصر بفهرس Tab لـ صفر وفقًا لترتيبه في DOM. أي عناصر بفهرس علامات تبويب سالب من ترتيب التركيز الطبيعي.

عندما يُجري tabindex من الصفر (tabindex="0") على العناصر التي لا يمكن التركيز عليها عادةً، فهي تتم إضافتها إلى ترتيب التركيز الطبيعي للصفحة وفقًا للطريقة التي تظهر بها في DOM. ومع ذلك، وعلى عكس عناصر HTML التي يمكن التركيز عليها بشكل طبيعي، يجب تقديم دعم إضافي للوحة المفاتيح يمكن الوصول إليها بشكل كامل.

وبالمثل، إذا كان لديك عنصر يمكن التركيز عليه عادةً ولكنه غير نشط، مثل زر لا يعمل إلى أن يتم ملء حقل إدخال in - يجب إضافة ملف tabindex سلبي (tabindex="-1") إلى هذا العنصر. جارٍ الإضافة يشير مؤشر Tabindex السلبي إلى التكنولوجيات المساعِدة ولوحات المفاتيح التي تشير إلى أنّ يجب إزالة الزر من ترتيب التركيز الطبيعي. لكن لا تقلق - يمكنك استخدام JavaScript لإضافة التركيز مرة أخرى إلى العنصر عند الحاجة.

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

يعكس ترتيب التركيز الجديد محتوى HTML.
مشاهدة علامات تبويب مستخدم لوحة المفاتيح من خلال CodePen HTML.

لدى معظم مواقع الويب اليوم قائمة طويلة من روابط القائمة في العنوان الرئيسي للصفحة متسقة من صفحة إلى أخرى. يعد هذا أمرًا رائعًا للتنقل العام ولكن يمكن أن صعوبة وصول مستخدمي لوحة المفاتيح فقط إلى الصفحة الرئيسية للمحتوى دون الحاجة إلى النقر عليه عدة مرات.

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

عندما يضغط المستخدم على مفتاح التبويب (Tab) ويكون هناك رابط تخطٍ نشط، يرسل الأداة تركيز لوحة المفاتيح على رابط التخطي. يمكن للمستخدم النقر على رابط التخطّي والانتقال بسرعة. بعد قسم العنوان والتنقل الرئيسي. إذا اختار المستخدم عدم النقر على التخطي والمتابعة إلى أسفل في DOM، فسيتم إرسالهم إلى يمكن التركيز عليه.

مثل جميع الروابط، من المهم أن يتضمن رابط التخطي سياقًا حول الرابط لدينا. عند إضافة عبارة "التخطي إلى المحتوى الرئيسي"، تتيح للمستخدم معرفة التي ينتقل إليها الرابط. هناك العديد من خيارات التعليمات البرمجية للاختيار من بينها عندما توفير سياق إضافي لروابطك، مثل aria-labelledby، aria-label، أو إضافتها مع المحتوى النصي للعنصر <a>، كما هو موضّح في المثال.

معاينة أداة CodePen بتركيز لوحة المفاتيح
يمكنك مشاهدة مستخدم لوحة مفاتيح يتنقل باستخدام رابط التخطّي أو بدونه.

مؤشر التركيز

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

مؤشر تركيز مرئي هي أداة حيوية في إعلام المستخدم بمكان وجوده في جميع الأوقات . وهذا مهم بشكل خاص لمستخدمي لوحة المفاتيح المبصرين فقط.

النمط التلقائي للمتصفّح

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

إذا سمحت للمتصفّح بالتعامل مع نمط التركيز، من المهم مراجعة الرمز لتأكيد أنّ المظهر لن يلغي الإعدادات التلقائية للمتصفّح التصميم. غالبًا ما تتم كتابة الإلغاء على النحو التالي: "outline: 0" أو "outline: none" في ورقة الأنماط الخاصة بك. يمكن لهذا الرمز الصغير إزالة التركيز التلقائي للمتصفّح. الذي يجعل من الصعب جدًا على المستخدمين التنقل في موقع الويب أو التطبيق.

الإجراءات غير المُوصى بها
a:focus {
  outline: none; /* don't do this! */
}
الإجراءات الموصى بها
a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

الأنماط المخصَّصة

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

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

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

يمكنك تغيير نمط عنصر التركيز استنادًا إلى نوع العنصر. على سبيل المثال: يمكنك استخدام تسطير منقَّط لروابط النص الأساسي ولكن اختيار حد مستدير عنصر زر.

ركِّز على الأسلوب كما هو موضّح في CSS.
شاهد ما يحدث عندما تظهر علامات تبويب مستخدم لوحة المفاتيح في كل عنصر من عناصر التركيز المصممة.

لا توجد قاعدة حول عدد أنماط مؤشر التركيز التي لديك في نمط — ولكن تأكد من إبقائها في عدد معقول لتجنب الحاجة إلى للارتباك.

الخاتمة

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

التحقق من فهمك

اختبر معلوماتك حول ARIA وHTML

ما هو مثال نمط CSS :focus الذي يسهل الوصول إليه على خلفية بيضاء؟

outline: 0.5rem solid yellow;
هذا لن يفي بإرشادات تباين الألوان في WCAG.
background-color:black;
في حين أنه من الممكن الوصول إلى هذا، إلا أن هذا التصميم يتطلب مراعاة إضافية للون النص وموضعه في المستند.
text-decoration: dotted underline 2px blue;
هذا التصميم هو الخيار الأكثر سهولة في هذه القائمة. ومع ذلك، هذا ليس خيار التصميم الوحيد الذي يمكن الوصول إليه. تذكر أن التصميم يجب أن يلتزم بنسبة تباين الألوان 3:1 كما هو محدد بواسطة WCAG.
outline: none; text-decoration:none; background:none;
يعد المؤشر المرئي مهمًا لبعض مستخدمي لوحة المفاتيح. قم دائمًا بتضمين النمط للتركيز.

ما الغرض من رابط التخطّي؟

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