إضافة رابط تخطي إلى المحتوى: مثال HTML واختبار عملي

ما المهمة التي يؤديها رابط التخطي؟

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

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

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

اختيار موضع الرابط وتسميته

تضع إرشادات نظام GOV.UK رابط التخطي عادة بعد بداية جسم الصفحة، وتذكر ترتيبًا خاصًا عند وجود شريط ملفات تعريف الارتباط. كما تعرضه مكوّنًا له أنماطه وسلوكه، وتوثق إضافة برمجة لتحسين اتساق نقل التركيز. هذه تعليمات لنظام تصميم بعينه، لا دليل على أن نسخ فئة تحمل اسمه سيمنح صفحتك الوظيفة كاملة. إذا كنت تستخدمه، فادمج المكوّن بالطريقة الموثقة؛ وإن كنت تبني مثالًا مستقلًا، فلا توهم القارئ بأنه نسخة منه. [2]

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

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

ربط العنصر الصحيح بمعرّف واضح

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

أما id فهو معرّف يجب أن يكون فريدًا داخل الوثيقة، ويمكن استعماله وجهة لجزء الرابط. اختر اسمًا ثابتًا واضحًا، ثم طابقه مع الاسم الذي يلي علامة # في href. في مثالنا استعملنا article-main في الموضعين. لا تضف العلامة نفسها إلى قيمة id، ولا تكرر المعرّف على العنوان والصندوق معًا؛ المقصود وجهة واحدة معروفة، لا عدة عناصر تحمل اسمًا واحدًا وتنتظر من المتصفح اختيار نيتك. [5]

<a href="#article-main">انتقل إلى المحتوى الرئيسي</a>
<nav aria-label="روابط المثال">
  <a href="#about">عن المثال</a>
</nav>
<main id="article-main" tabindex="-1">
  <h1>كيف نراجع رابط التخطي؟</h1>
  <a href="#about">اقرأ عن المثال</a>
  <section id="about">
    <h2>عن المثال</h2>
    <p>محتوى توضيحي أصلي.</p>
  </section>
</main>

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

ما دور tabindex في الوجهة؟

تفرق وثائق MDN بين جعل العنصر قابلًا لاستقبال التركيز وبين إدخاله في التنقل التسلسلي. القيمة السالبة، الشائعة بصيغة tabindex="-1"، تبقي العنصر خارج المرور المعتاد بمفتاح Tab، مع إمكان وضع التركيز عليه. أما الصفر فيجعله ضمن التسلسل الطبيعي، والقيم الموجبة تغير الأولوية. توصي الوثائق بتجنب الموجبة والاعتماد على ترتيب منطقي للعناصر بدل إعادة ترتيبها بالأرقام. [4]

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

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

إظهار التركيز عند البداية والوجهة

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

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

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

تمييز الأعطال بدل جمعها في ملاحظة واحدة

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

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

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

نتيجة اختبار المثال وحدودها

تتضمن طريقة فحص G1 التأكد من أن الرابط أول عنصر يمكن تركيزه، وأن اسمه يوضح وجهته، وأنه ظاهر دائمًا أو عند التركيز، وأن تفعيله ينقل التركيز إلى المحتوى الرئيسي. لا يكفي فحص وجود href في الشيفرة وحده؛ المطلوب التحقق من النتيجة التي يتيحها الرابط للمستخدم. [1]

أجرينا على الواجهة المؤلفة اختبارًا فعليًا داخل متصفح التطبيق في جلسة العمل. بدأنا من الصفحة المحملة دون جزء إضافي في عنوانها، وضغطنا Tab، فكان العنصر النشط رابط التخطي. ثم ضغطنا Enter، فأصبح العنصر النشط هو main صاحب المعرّف article-main، وانتقل العرض إلى بدايته. وعند الضغط على Tab مرة أخرى أصبح العنصر النشط رابط «راجع خطوات الفحص» الموجود داخل المحتوى، بدل أحد روابط القائمة العامة.

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

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