التنقل

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

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

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

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

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

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

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

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

<main id="main">

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

لا يفضّل معظم المصمّمين ظهور هذا الرابط في أعلى الصفحة. لا بأس في إخفاء هذا الرابط. ومع ذلك، تذكَّر أنّه عندما يتم التركيز على الرابط، وهو ما يحدث عندما يتنقّل مستخدم لوحة المفاتيح بين الروابط على الصفحة باستخدام مفتاح 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"

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

تتضمّن كل صفحة من صفحات وحدة Learn 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>، ولكن يجب عدم تصنيفها كمسار تنقّل.

شريط التنقّل المحلي

يظهر عنصر التنقّل التالي على معظم الأجهزة ذات الأحجام المتوسطة والكبيرة في شريط جانبي أيسر، ويضم شريط فلتر وروابط تؤدي إلى كل قسم من أقسام Learn 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، وروابط خارجية لوسائل التواصل الاجتماعي.

في ما يلي، سنتناول كيفية ترميز جداول البيانات.

اختبِر معلوماتك

اختبِر معلوماتك حول التنقّل.