التنقُّل

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

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

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

إذا كنت تطّلِع على هذه الصفحة على web.dev، يمكنك الاطّلاع على بعض ميزات التنقّل. يتوفّر شريط تنقّل أعلى العنوان، وجدول محتويات "في هذه الصفحة" بعد العنوان، وجدول محتويات بعنوان "تعلم HTML" يتم عرضه دائمًا أو إظهاره بشكل دائم بنقرة زر في القائمة، وذلك استنادًا إلى عرض شاشتك. العنصر الأول في الصفحة هو رابط مخفي إلى #main، ما يمكّنك من تخطي روابط الشريط الجانبي وشريط التنقل.

رابط "التخطّي إلى المحتوى"

العنصر الأول في الصفحة هو رابط داخلي:

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

والذي، عند النقر عليه، أو عندما يتم التركيز عليه وينقر المستخدم على Enter، يمرر الصفحة ويركز على المحتوى الرئيسي: المعلَم <main> مع id من main:

<main id="main">

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

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

لا يحب معظم المصممين مظهر وجود رابط في أعلى الصفحة. ولا بأس في إخفاء الرابط من العرض مع تذكر أنه عندما يتم التركيز على الرابط، وهذا يحدث عندما ينتقل مستخدم لوحة المفاتيح إلى الرابط الموجود في الصفحة، فإن الرابط يجب أن يكون مرئيًا لجميع المستخدمين. يمكنك فقط إخفاء المحتوى الذي يكون في حالة التركيز أو غير النشط باستخدام أداة اختيار مشابهة لـ .visually-hidden:not(:focus):not(:active).

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

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

يؤدي رابط التخطي إلى المحتوى إلى تمرير المحتوى الرئيسي إلى وضع العرض. العنصر الأول هو عنوان <h1> الذي يحمل عنوان هذا القسم. وهي في هذه الحالة <h1>Marking up navigation</h1>. يتبع العنوان الرئيسي الجملة الترويجية، وهو وصف موجز لمحتويات هذا البرنامج التعليمي. يعتمد ظهور جدول المحتويات قبل العنوان في قاعدة الرموز أو بعده على عرض المتصفّح.

إذا كان عرض المتصفّح أكبر من 80em، يظهر جدول المحتويات قبل العنوان في الترميز، وهو يشبه ما يلي (تمت إزالة أسماء الفئات لتبسيط الترميز):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

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

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

يمكننا تغيير <div> غير الدلالي إلى فقرة <p>، ثم إضافة id حتى يمكن الإشارة إليها. نستخدم بعد ذلك aria-labelledby:

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

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

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

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

عند توفير اسم يمكن الوصول إليه في عنصر ما، لا تُدرج اسم العنصر. توفّر برامج قراءة الشاشة تلك المعلومات للمستخدم. على سبيل المثال، لا تُدرج "التنقل" عند استخدام العنصر <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>

إذا كان عرض المتصفّح أقل من 80 طولاً، ستظهر الأداة "في هذه الصفحة" أسفل العنوان والجملة الترويجية. ويتم ذلك من خلال تضمين مكوّنَين من مكوِّنات التنقّل في جدول المحتويات وإخفاء أحدهما باستخدام لغة display: none; في CSS استنادًا إلى استعلام عن الوسائط.

تضمين أداتَين متطابقتَين لعرض إحداهما فقط يُعتبر أسلوبًا عكسيًا. وحدات البايت الإضافية ضئيلة. من الملائم إخفاء محتوى HTML عن جميع المستخدمين باستخدام لغة CSS display: none. تكمن المشكلة في أنّ جدول المحتويات على الشاشات العريضة يأتي قبل #main؛ وفي الشاشات الأضيق، يتم دمج جدول المحتويات داخل #main. يؤدي استخدام لوحة المفاتيح للتخطي إلى المحتوى إلى تخطي جدول المحتويات على شاشة عريضة. في حين اعتاد المستخدمون على استجابة المحتوى وتغيير الموقع عند تغيير الأجهزة أو زيادة حجم الخط، فإنهم لا يتوقعون أن يتغير ترتيب علامات التبويب عند القيام بذلك. يجب أن تكون تخطيطات الصفحة سهلة الوصول ويمكن التنبؤ بها ومتسقة عبر موقع الويب. في هذه الحالة، لا يمكن التنبؤ بموقع جدول المحتويات.

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

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

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

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

هناك فواصل بين الروابط والمحتوى الذي تم إنشاؤه باستخدام CSS. تظهر الفواصل قبل كل عنصر قائمة يبدأ بالرمز <li> الثاني.

[aria-label^="breadcrumb" 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 تزيل دلالات بعض العناصر.

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

العنصر الأخير هو عنصر <share-action> مخصّص. تتم مناقشة العناصر المخصصة في القسم 15. وهذا العنصر المخصّص ليس جزءًا من شريط التنقّل، ولكن لا بأس في إدراج عنصر غير مرتبط في <nav>، ما دام المحتوى متناسقًا في جميع الصفحات.

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

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

إذا كنت تزور هذا الموقع الإلكتروني على جهاز لوحي أو جهاز جوّال، أو إذا كنت تستخدمه في عرض شاشة أضيق، هذا يعني أن الشريط الجانبي مخفي عند تحميل هذه الصفحة. يمكنك إظهاره من خلال قائمة الهامبرغر في شريط التنقل العلوي (نعم، العنوان هو عنصر <web-header> مخصّص مع مجموعة role="navigation").

يتمثل الاختلاف الرئيسي بين التنقل المحلي الدائم على الشاشات العريضة والتنقل المحلي على الشاشات الأضيق الذي يمكن إظهاره واختفائه في عرض زر الإغلاق على الإصدار الذي يمكن إخفاؤه. هذا الرمز مخفي على الشاشات العريضة مع display: none;.

للرابط إلى هذا المستند، القسم 010، مظهر مختلف قليلاً عن الروابط الأخرى في التنقل المحلي للإشارة إلى المستخدمين البكم أنّ هذه هي الصفحة الحالية. وينشأ هذا الاختلاف المرئي باستخدام صفحات الأنماط المتتالية (CSS). يتم التعرّف على الصفحة الحالية أيضًا من خلال السمة aria-current="page". يُعلم هذا التقنيات المساعدة بأنّها رابط إلى الصفحة الحالية. يشبه رمز HTML لعنصر القائمة هذا داخل شريط التنقّل المحلي هذا ما يلي:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

إذا لم تكن هذه هي المرة الأولى التي تزور فيها هذه الصفحة، لن تظهر علامة الاختيار. إذا كنت قد زرت هذه الصفحة في السابق، تم ضبط السمة المخصّصة data-complete على true، وستظهر علامة الاختيار. تظهر علامة اختيار في كل رابط، ولكنّ خدمة CSS تخفي مربّع الاختيار عن المستخدمين الذين لم يسبق لهم زيارة هذه الصفحة باستخدام display: none استنادًا إلى عدم توفّر سمة data-complete="true" وقيمتها:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

عند ضبط display على خيار آخر غير none، تُعلِم السمة role التكنولوجيا المساعِدة بأنّ ملف SVG المضمّن عبارة عن صورة، وأن aria-label تعمل كسمة alt على <img>.

التنقل العام

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

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

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

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

يتضمّن تذييل هذه الصفحة ثلاثة عناصر إضافية من <nav>: التنقّل في التذييل، ومطوّري برامج Google، والبنود والسياسات، ويمثّل كل عنصر رابطًا. يتضمّن التنقل في التذييل كيفية المساهمة في web.dev على جيت هب، والمحتوى التعليمي الآخر الذي تقدّمه Google خارج web.dev، وروابط "كيفية الاتصال" الخارجية.

عمليات التنقّل الثلاثة هذه في <footer> هي عناصر <nav> aria-labelوتوفّر اسمًا يمكن الوصول إليه لأدوار المَعلم هذه. كانت جميع عمليات التنقل التي رأيناها روابط مضمَّنة في القوائم داخل شريط التنقُّل. لقد تناولنا كل ما تحتاج إلى معرفته لإنشاء عمليات التنقل الخاصة بك. بعد ذلك، سنلقي نظرة على ترميز جداول البيانات.

التحقّق من استيعابك

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