التنقل

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

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

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

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

رابط "الانتقال إلى المحتوى"

تعرض بعض المواقع الإلكترونية رابط "الانتقال إلى المحتوى"، وغالبًا ما يكون العنصر الأول في ترتيب التركيز. قد يبدو الإجراء على النحو التالي:

<a href="#main" class="skip-link button">Skip to main</a>

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

<main id="main">

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

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

لا تحجب المحتوى إلا في حالة عدم التركيز وعدم النشاط باستخدام أداة اختيار مشابهة لرمز .visually-hidden:not(:focus):not(:active).

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

جدول المحتويات

العنصر الأول من المحتوى الرئيسي هو عنوان <h1> مع عنوان هذه الصفحة: <h1>Navigation</h1>. يلي العنوان الرئيسي وصف موجز لمحتويات هذا الدليل التعليمي.

على الشاشات الأصغر حجمًا، يظهر جدول المحتويات بعد العنوان. في الشاشات الأكبر حجمًا، يتم عرضه في شريط جانبي محاذٍ لليمين.

أفضل عنصر لاستخدامه في أقسام التنقّل هو <nav>. ويُعلم قارئ الشاشة ومحرك البحث تلقائيًا بأنّ القسم لديه دور navigation، وهو دور معلم.

أدرِج السمة aria-label لعرض وصف موجز عن الغرض من التنقّل. في هذا الحالة، ستكون قيمة هذه السمة متكررة مع النص "في هذه الصفحة". للإشارة إلى نص مرئي، استخدِم بدلاً من ذلك العلامة aria-labelledby.

باستخدام id، يمكن أن يظهر على النحو التالي:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

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

شريط التنقل "في هذه الصفحة" هو جدول المحتويات. إذا أردت استخدام aria-label، قدِّم هذا السياق بدلاً من تكرار النص المرئي:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

لتقديم اسم يمكن الوصول إليه لعنصر، يجب عدم تضمين اسم العنصر. تقدّم برامج قراءة الشاشة اسم العنصر للمستخدم. على سبيل المثال، عند استخدام العنصر <nav>، لا تُدرِج الكلمة "التنقّل"، لأنّ هذه المعلومات مضمّنة في العناصر الدلالية.

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

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

تجنَّب تغيير ترتيب علامات التبويب.

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

لقد استخدمنا CSS لعرض التنقل كشريط جانبي على الصفحات التي يتجاوز عرضها 1254 بكسل.

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

مسارات التنقّل في الصفحة

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

قد تختلف بنية الموقع الإلكتروني من منظور المستخدم عن بنية الملفات على الخادم، ولا بأس في ذلك. لا يحتاج المستخدم إلى معرفة كيفية تنظيم ملفاتك، ولكن يجب أن يتمكّن من التنقّل في المحتوى.

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

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

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

تعرِض أقسام شريط التنقل المسار من الصفحة الحالية إلى الصفحة الرئيسية، مع عرض كل مستوى بينهما.

تحتوي كل صفحة من صفحات وحدة "تعلم HTML" على شريط التنقّل نفسه، الذي يعرض التسلسل الهرمي لدروس HTML ضمن قسم Learn في web.dev.

يجب أن يكون الرمز مشابهًا لما يلي:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

يطلب عنصر <nav>، وهو دور بارز، من التكنولوجيا المساعِدة عرض أشرطة التنقّل كعنصر تنقّل على الصفحة. يميز الاسم السهل الاستخدام لـ "الخيط الساري"، الذي يتم توفيره مع الرمز aria-label، هذا التنقّل عن معالِم التنقّل الأخرى في المستند نفسه.

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

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

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

يستخدم نموذج الرمز قائمة مرتبة، وهي أفضل من القائمة غير المرتبة لأنّه يتم سرد العناصر. تمت إضافة role="list" لأنّ بعض قيم سمة العرض في CSS تزيل الدلالات من بعض العناصر.

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

لا يتم تضمين الصفحة الحالية، "التنقّل"، في شريط التنقل.

الصفحة الحالية

عند تضمين الصفحة الحالية في مسار تنقّل، من الأفضل ألا يكون النص رابطًا، ويجب تضمين aria-current="page" في عنصر القائمة للصفحة الحالية. إذا لم يتم تضمينه، فمن المفيد الإشارة إلى أن العنوان التالي هو الصفحة الحالية مع رمز أو رمز آخر.

لنلقِ نظرة على نسخة بديلة من شريط التنقّل تراعي هذه الممارسة:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

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

التنقّل المحلي

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

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

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

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

يمكن أيضًا تحديد الصفحة الحالية باستخدام السمة aria-current="page" . يُعلم ذلك التقنيات المساعِدة بأنّ الروابط تؤدي إلى الصفحة الحالية.

من المفترض أن يظهر رمز HTML الخاص بعنصر القائمة هذا ضمن التنقّل المحلي على النحو التالي:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

التنقّل العام

يؤدي شريط التنقّل العام إلى صفحات المستوى الأعلى من الموقع الإلكتروني، وهو نفسه في كل صفحة من صفحات الموقع الإلكتروني. قد يتألّف التنقّل الشامل لموقع إلكتروني أيضًا من علامات تبويب تفتح قوائم متداخلة من الروابط التي تؤدي إلى جميع الأقسام الفرعية لموقع إلكتروني أو قوائم أخرى. وقد يتضمّن أقسامًا بعنوانات وأزرارًا وتطبيقات مصغّرة للبحث. هذه الميزات الإضافية ليست شرطًا. والمطلب المطلوب هو أن يظهر شريط التنقّل في كلّ صفحة ويكون هو نفسه في كلّ صفحة، مع ظهور aria-current="page" على أي روابط تؤدّي إلى الصفحة الحالية بالطبع.

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

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

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

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

يحتوي تذييل هذه الصفحة على مجموعتَين من عناصر التنقّل: مجموعة من ثلاثة أعمدة لتنقّل web.dev ذي الصلة ومجموعة منفصلة لتنقّل بنود Google وخصوصيتها . تتضمّن قائمة التنقل في التذييل كيفية المساهمة في web.dev والمحتوى ذي الصلة الذي يوفّره فريق web.dev والروابط الخارجية لوسائل التواصل الاجتماعي.

في الخطوة التالية، سنلقي نظرة على وضع علامات على جداول البيانات.

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

اختبر معرفتك بالتنقل.