ناوبری

همانطور که در بخش لینک‌ها یاد گرفتید، عنصر <a> با ویژگی href لینک‌هایی ایجاد می‌کند که کاربران می‌توانند با کلیک کردن یا ضربه زدن آنها را دنبال کنند. در بخش لیست‌ها ، یاد گرفتید که چگونه فهرست‌هایی از محتوا ایجاد کنید. در این ماژول، نحوه گروه‌بندی فهرست‌های لینک‌ها را برای ایجاد ناوبری کشف خواهید کرد.

انواع مختلفی از ناوبری و روش‌های مختلفی برای نمایش آنها وجود دارد. انکرهای نامگذاری شده درون متن که به صفحات دیگر در همان وب‌سایت لینک می‌دهند، ناوبری محلی محسوب می‌شوند. ناوبری محلی که از مجموعه‌ای از لینک‌ها تشکیل شده و سلسله مراتب صفحه فعلی را در رابطه با ساختار سایت یا صفحاتی که کاربر برای رسیدن به صفحه فعلی دنبال کرده است، نمایش می‌دهد، بردکرامب نامیده می‌شود.

فهرست مطالب یک صفحه، نوع دیگری از ناوبری محلی است. صفحه‌ای که حاوی پیوندهای سلسله مراتبی به هر صفحه در یک سایت است، نقشه سایت نامیده می‌شود. ناوبری که به صفحات سطح بالای وب‌سایت منتهی می‌شود و احتمالاً در هر صفحه یافت می‌شود، ناوبری سراسری نامیده می‌شود. ناوبری سراسری را می‌توان به روش‌های مختلفی نمایش داد، از جمله نوارهای ناوبری، منوهای کشویی و منوهای شناور. یک سایت ممکن است ناوبری سراسری خود را بسته به اندازه نمایشگر، به روش‌های مختلفی نمایش دهد.

همیشه مطمئن شوید که کاربران می‌توانند با کمترین تعداد کلیک به هر صفحه‌ای در سایت شما هدایت شوند، در عین حال مطمئن شوید که ناوبری بصری است و گیج‌کننده نیست. با این حال، هیچ الزام خاصی برای عناصر ناوبری وجود ندارد. MachineLearningWorkshop.com ، به عنوان یک وب‌سایت تک صفحه‌ای، یک نوار ناوبری محلی در بالا سمت راست دارد؛ این جایی است که سایت‌های چند صفحه‌ای اغلب ناوبری جهانی خود را قرار می‌دهند.

اگر از این صفحه در web.dev بازدید کنید، می‌توانید چند ویژگی ناوبری را مشاهده کنید. یک نوار پیمایش بالای عنوان، یک فهرست مطالب «یادگیری HTML» و بسته به عرض صفحه نمایش شما، یک فهرست مطالب «در این صفحه» وجود دارد.

پیوند «رفتن به محتوا»

بعضی از سایت‌ها لینک «پرش به محتوا» را دارند که اغلب به عنوان اولین عنصر در ترتیب فوکوس قرار می‌گیرد. این لینک ممکن است چیزی شبیه به این باشد:

<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> ، کلمه "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>

از تغییر ترتیب تب‌ها خودداری کنید

فهرست مطالب ممکن است بعد از عنوان، در صفحات نمایش کوچک‌تر یا در یک نوار کناری راست‌چین ظاهر شود. قرار دادن دو مجموعه ناوبری یکسان، فقط برای نمایش یکی، یک ضد الگو خواهد بود.

ما از CSS برای نمایش ناوبری به عنوان نوار کناری در صفحاتی که عرض آنها از 1254 پیکسل بیشتر است، استفاده کرده‌ایم.

در حالی که کاربران به واکنش‌گرا بودن محتوا و تغییر مکان آن هنگام تغییر دستگاه یا افزایش اندازه فونت عادت کرده‌اند، انتظار ندارند که ترتیب تب‌ها نیز هنگام انجام این کار تغییر کند. طرح‌بندی صفحات باید در سراسر سایت قابل دسترس، قابل پیش‌بینی و ثابت باشد. در اینجا، مکان فهرست مطالب قابل پیش‌بینی نیست.

بردکرامب‌های صفحه

بردکرامب‌ها ناوبری ثانویه‌ای را فراهم می‌کنند تا به کاربران کمک کنند بفهمند در کجای وب‌سایت هستند. بردکرامب‌ها عموماً سلسله مراتب URL سند فعلی و موقعیت صفحه فعلی را در ساختار سایت نشان می‌دهند.

ساختار سایت از دیدگاه کاربر ممکن است با ساختار فایل روی سرور متفاوت باشد و این اشکالی ندارد. کاربر نیازی ندارد بداند که شما چگونه فایل‌های خود را سازماندهی می‌کنید، اما باید بتواند در محتوای شما پیمایش کند.

بردکرامب‌ها به کاربران بینشی در مورد سازماندهی سایت شما ارائه می‌دهند. این به کاربران کمک می‌کند تا بدون نیاز به بازگشت به هر صفحه قبلی، با استفاده از عملکرد back ، به هر بخش قبلی هدایت شوند.

اگر سایت دارای ساختار دایرکتوری سلسله مراتبی باشد، همانطور که در web.dev وجود دارد، ناوبری breadcrumb اغلب شامل پیوندی به صفحه اصلی یا نام میزبان و پیوندی به فایل فهرست هر دایرکتوری در مسیر 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 دارای ناوبری breadcrumb یکسانی است که سلسله مراتب درس‌های 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> ، یک نقش راهنما، به فناوری کمکی می‌گوید که breadcrumbs را به عنوان یک عنصر ناوبری در صفحه ارائه دهد. نام قابل دسترس "breadcrumbs" که با 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
}

خوانندگان صفحه نمایش این آیکون‌ها را «نمی‌بینند»، که بهترین روش است. جداکننده‌های بین لینک‌های breadcrumb باید از خوانندگان صفحه نمایش پنهان باشند. همچنین باید مانند هر متن و عنصر بصری دیگری در صفحه، کنتراست کافی با پس‌زمینه خود داشته باشند.

کد نمونه ما از یک لیست مرتب استفاده می‌کند که به یک لیست نامرتب ترجیح داده می‌شود زیرا آیتم‌ها شمارش می‌شوند. role="list" اضافه شد زیرا برخی از مقادیر ویژگی نمایش CSS، معناشناسی برخی از عناصر را حذف می‌کنند.

به طور کلی، لینک به صفحه اصلی در یک بردکرامب باید به جای نام سایت یا لوگوی سایت، کلمه "خانه" را بنویسد. از آنجایی که بردکرامب در بالای سند قرار دارد، منطقی است که چرا از این الگوی متضاد استفاده شده است.

صفحه فعلی، یعنی Navigation ، در breadcrumb گنجانده نشده است.

صفحه فعلی

وقتی صفحه فعلی در یک breadcrumb قرار می‌گیرد، متن ترجیحاً نباید لینک باشد و aria-current="page" باید در آیتم لیست صفحه فعلی قرار گیرد. اگر قرار داده نشده است، بهتر است با یک آیکون یا نماد دیگر مشخص کنید که عنوانی که در ادامه می‌آید، صفحه فعلی است.

به یک نسخه جایگزین از breadcrumb با این روش نگاهی بیندازید:

<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>

ممکن است Breadcrumbs با مراحل خطی که کاربر برای رسیدن به صفحه فعلی طی کرده است، یکسان نباشد. فهرست مراحل طی شده تا این مرحله را می‌توان درون یک <nav> قرار داد، اما نباید به عنوان Breadcrumb برچسب‌گذاری شود.

ناوبری محلی

مؤلفه ناوبری بعدی در اکثر دستگاه‌های با اندازه متوسط ​​و بزرگ در نوار کناری سمت چپ نمایش داده می‌شود که شامل یک نوار فیلتر و لینک‌هایی به هر یک از بخش‌های آموزش HTML است. این لینک‌ها و نوار فیلتر، ناوبری مکانی هستند.

اگر از این سایت با دستگاه تلفن همراه یا صفحه نمایش باریک‌تری بازدید می‌کنید، هنگام بارگذاری این صفحه، نوار کناری پنهان می‌شود. می‌توانید از طریق در نوار ناوبری بالا به آن دسترسی پیدا کنید.

تفاوت اصلی بین ناوبری محلی دائمی در صفحات عریض و ناوبری محلی در صفحات باریک‌تر، فلشی است که به ناوبری اصلی بالایی منتهی می‌شود و سپس ناوبری را می‌بندد.

لینک به این سند مانند سایر لینک‌ها در ناوبری محلی به نظر می‌رسد. با این حال، می‌تواند ظاهری کمی متفاوت از سایر لینک‌ها داشته باشد تا به کاربران بینا نشان دهد که این صفحه فعلی است. این تفاوت بصری باید با CSS ایجاد شود.

صفحه فعلی همچنین می‌تواند با ویژگی aria-current="page" شناسایی شود. این به فناوری‌های کمکی اطلاع می‌دهد که لینک‌ها به صفحه فعلی هستند.

در حالت ایده‌آل، کد HTML برای این آیتم لیست در ناوبری محلی باید مشابه کد زیر باشد:

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

ناوبری جهانی

ناوبری سراسری به صفحات سطح بالای وب‌سایت منتهی می‌شود و در هر صفحه از سایت یکسان است. ناوبری سراسری یک سایت همچنین ممکن است از تب‌هایی تشکیل شده باشد که لیست‌های تو در تو از لینک‌هایی را باز می‌کنند که به تمام زیربخش‌های یک سایت یا سایر منوها پیوند دارند. این ناوبری ممکن است شامل بخش‌های عنوان‌دار، دکمه‌ها و ابزارک‌های جستجو باشد. این ویژگی‌های اضافی الزامی نیستند. آنچه لازم است این است که ناوبری در هر صفحه ظاهر شود و در هر صفحه یکسان باشد، البته با aria-current="page" در هر لینکی به صفحه فعلی.

ناوبری سراسری، روشی ثابت برای حرکت در هر کجای برنامه یا وب‌سایت فراهم می‌کند. وب‌سایت گوگل در بالای صفحات خود ناوبری سراسری ندارد، اما یاهو این قابلیت را دارد. در حالی که تمام ویژگی‌های اصلی یاهو سبک‌های متفاوتی دارند، محتوای اکثر بخش‌ها یکسان است.

نوار ناوبری یاهو! که شامل یک انتخابگر مشکی روی پس‌زمینه خاکستری است.

محتوای سربرگ‌های ناوبری سراسری اخبار و ورزش یکسان است. با این حال، آیکونی که نشان می‌دهد کاربر در صفحه ورزشی است، کنتراست کافی برای دسترسی ندارد، حتی برای بازدیدکنندگانی که بینایی کاملی دارند. هر دو بخش دارای یک ناوبری سراسری با یک ناوبری محلی مختص به آن بخش در زیر آن هستند.

در اینجا نسخه بهتری از ناوبری با کنتراست بالاتر را مشاهده می‌کنید.

مشابه ناوبری سراسری، پاورقی‌ها باید در تمام صفحات یکسان باشند. اما این تنها شباهت آنهاست. ناوبری سراسری امکان پیمایش به تمام قسمت‌های سایت را، از دیدگاه محصول، فراهم می‌کند. عناصر ناوبری درون پاورقی الزامات خاصی ندارند.

به‌طورکلی، پاورقی شامل لینک‌های شرکتی، مانند بیانیه‌های حقوقی، درباره شرکت، صفحه فرصت‌های شغلی و لینک‌هایی به منابع خارجی مرتبط، مانند رسانه‌های اجتماعی، می‌شود.

پاورقی این صفحه شامل دو مجموعه از عناصر ناوبری است: یک مجموعه سه ستونی از ناوبری مرتبط با web.dev و یک ناوبری جداگانه با عنوان «شرایط و حریم خصوصی گوگل». ناوبری پاورقی شامل نحوه مشارکت در web.dev، محتوای مرتبط ارائه شده توسط تیم web.dev و پیوندهای رسانه‌های اجتماعی خارجی است.

در ادامه، به نشانه‌گذاری جداول داده خواهیم پرداخت.

درک خود را بررسی کنید

دانش خود را در مورد ناوبری آزمایش کنید.

کدام عنصر برای نشانه‌گذاری ناوبری اصلی سایت استفاده می‌شود؟

<navigation>

دوباره امتحان کنید.

<breadcrumb>

دوباره امتحان کنید.

<nav>

درست است!

آیا می‌توان چندین عنصر ناوبری در یک صفحه داشت؟

نادرست.

دوباره امتحان کنید.

درست است.

درست است!