إنشاء رابط انتقال يعمل فعلاً

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

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

الهدف هو العنصر الذي تريد الوصول إليه. امنحه id مطابقًا كي يجد الجزء الموجود في href مكانًا يشير إليه.

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

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

الحل هو السماح للتركيز بالانتقال إليه فعليًا. أضف tabindex يساوي سالب واحد كي يتمكن الهدف من استقبال التركيز من رابط التخطي.

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

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

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

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

ضع المرساة بوصفها الابن الأول لـ body، قبل الرأس، كي يصل إليها Tab قبل أي شيء آخر في الصفحة.

اربط مرساة بـ id مطابق في main، وأضف tabindex سالب واحد، ثم اختبر باستخدام Tab. هكذا تحصل على رابط تخطٍ يعمل فعلًا. 🎯