جهت یابی

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

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

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

اگر این صفحه را در web.dev مشاهده می کنید، می توانید چند ویژگی ناوبری را مشاهده کنید. یک جدول در بالای عنوان، یک فهرست مطالب "در این صفحه" بعد از عنوان، و یک جدول "Learn HTML" از مطالب وجود دارد که بسته به عرض صفحه شما، یا همیشه نمایش داده می شود یا با کلیک روی آن قابل مشاهده می شود. یک دکمه منو اولین عنصر در صفحه یک پیوند مخفی به #main است که به شما امکان می‌دهد هم از نوار کناری و هم پیوندهای breadcrumb رد شوید.

لینک "پرش به محتوا".

اولین عنصر در صفحه یک پیوند داخلی است:

<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> ، عبارت "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 میلی متر عرض دارد، ویجت "در این صفحه" در زیر عنوان و برچسب قرار دارد. این کار با گنجاندن دو مؤلفه ناوبری فهرست مطالب و پنهان کردن یکی یا دیگری با display: none; بر اساس یک پرسش رسانه ای

شامل دو ویجت یکسان برای نشان دادن تنها یکی، ضد الگو است. بایت های اضافی ناچیز است. پنهان کردن محتوای HTML از همه کاربران با استفاده از display: none مناسب نیست. مسئله این است که در صفحات گسترده، فهرست مطالب قبل از #main است. و در صفحه‌های باریک‌تر، فهرست مطالب درون #main تودرتو است. استفاده از صفحه‌کلید برای پرش به محتوا، از فهرست مطالب در یک صفحه گسترده عبور می‌کند. در حالی که کاربران عادت دارند که محتوا هنگام تغییر دستگاه یا افزایش اندازه فونت خود واکنش گرا باشد و مکان را تغییر دهد، اما انتظار ندارند ترتیب برگه ها در هنگام انجام این کار تغییر کند. طرح بندی صفحه باید در یک سایت قابل دسترس، قابل پیش بینی و سازگار باشد. در اینجا، مکان فهرست مطالب قابل پیش بینی نیست.

پودر سوخاری صفحه

Breadcrumbs ناوبری ثانویه را برای کمک به کاربران برای درک مکان آنها در یک وب سایت فراهم می کند. آنها به طور کلی سلسله مراتب URL سند جاری و مکان صفحه فعلی را در ساختار سایت نشان می دهند. ساختار سایت از دیدگاه کاربر ممکن است با ساختار فایل روی سرور متفاوت باشد. این خوب است. کاربر نیازی ندارد که بداند فایل های خود را چگونه سازماندهی می کنید، اما باید بتواند در محتوای شما پیمایش کند.

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

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

آخرین عنصر یک عنصر سفارشی <share-action> است. عناصر سفارشی در بخش 15 مورد بحث قرار می گیرند. در حالی که این عنصر سفارشی بخشی از خرده نان نیست، گنجاندن یک عنصر نامرتبط در یک <nav> خوب است، تا زمانی که گنجاندن در همه صفحات ثابت باشد.

صفحه فعلی

در این صفحه، صفحه کنونی، "Navigation" در بخش سوخاری گنجانده نشده است. هنگامی که صفحه فعلی در یک breadcrumb گنجانده می شود، ترجیحاً متن نباید یک پیوند باشد و 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"، یک نوار جستجو و پیوندهایی به هر یک از 20 بخش در Learn 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" در هر پیوندی به صفحه فعلی.

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

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

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

پاورقی این صفحه شامل سه عنصر <nav> اضافی است: پیمایش پاورقی، توسعه دهندگان Google، و شرایط و خط مشی ها که هر کدام یک پیوند هستند. پیمایش پاورقی شامل نحوه مشارکت در web.dev در Github، سایر محتوای آموزشی ارائه شده توسط Google خارج از web.dev، و پیوندهای خارجی «نحوه اتصال» است.

این سه پیمایش در <footer> عناصر <nav> با aria-label هستند که نامی قابل دسترسی برای این نقش‌های شاخص ارائه می‌کنند. تمام پیمایش‌هایی که دیده‌ایم ، پیوندهایی تودرتو در فهرست‌های داخل یک ناو بوده‌اند. ما تمام آنچه را که برای ایجاد ناوبری خود باید بدانید را پوشش داده ایم. در ادامه، ما به نشانه گذاری جداول داده نگاه خواهیم کرد.

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

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

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

<navigation>

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

<breadcrumb>

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

<nav>

درست!

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

نادرست

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

درست است، واقعی.

درست!