التنقّل

كما تعلمت في links، يعمل العنصر <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).

يظهر نص الرابط "تخطي إلى الصفحة الرئيسية". وهذا هو الاسم الذي يمكن الوصول إليه من الرابط. هذا موقع تقني، وربما يعرف المستخدمون ما "الرئيسي" ما يعنيه ذلك. مثل جميع نصوص الرابط، يجب أن يشير الاسم الذي يمكن الوصول إليه بوضوح إلى المكان الذي ينقل إليه الرابط المستخدم. يجب أن يكون هدف الرابط بداية للمحتوى الرئيسي للصفحة. لاختبار ذلك، عند تحميل الصفحة، اضغط على مفتاح التبويب (Tab) للانتقال إلى "التخطّي إلى الصفحة الرئيسية" . بعد ذلك، اضغط على 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>، لا تضِف "navigation"؛ يتم تضمين هذه المعلومات عند استخدام العناصر الدلالية.

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

<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 مترًا، ستظهر زر "في هذه الصفحة" يكون التطبيق المصغّر أسفل العنوان والجملة الترويجية. يتم ذلك عن طريق تضمين مكوّنا تنقُّل في جدول المحتويات وإخفاء أحدهما باستخدام CSS display: none; استنادًا إلى الاستعلام عن الوسائط.

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

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

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

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

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

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

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

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

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