ساختن ناوبری اصلی برای وب‌سایت

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

Manuel Matuzović

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

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

درحال ساخت لایه به لایه

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

ساختار پایه

برای پیمایش پایه به دو چیز نیاز دارید: عناصر <a> و چند خط CSS برای بهبود سبک و چیدمان پیش‌فرض پیوندهایتان.

• HTML

  <a href="/home">Home</a>
  <a href="/about-us">About us</a>
  <a href="/pricing">Pricing</a>
  <a href="/contact">Contact</a>
  

• CSS

  /* Define variables for your colors */
  :root {
    --color-shades-dark: rgb(25, 25, 25);
  }
  
  /* Use the alternative box model
  Details: <https://web.dev/learn/css/box-model/> */
  *{
    box-sizing: border-box;
  }
  
  /* Basic font styling */
  body {
    font-family: Segoe UI, system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
  }
  
  /* Link styling */
  a {
    --text-color: var(--color-shades-dark);
    border-block-end: 3px solid var(--border-color, transparent);
    color: var(--text-color);
    display: inline-block;
    margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
    margin-inline-end: 0.5rem;
    padding: 0.1rem;
    text-decoration: none;
  }
  
  /* Change the border-color on :hover and :focus */
  a:where(:hover, :focus) {
    --border-color: var(--text-color);
  }
  

مشاهده مرحله ۱: HTML و CSS پایه» در CodePen.

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

در اینجا مواردی است که می توانید انجام دهید:

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

توجه: margin-inline-end و margin-block-end به‌عنوان ویژگی‌های منطقی و جایگزینی برای نوشتن margin-right و margin-bottom شناخته می‌شوند. ویژگی‌های منطقی روشی جدید برای کار با جهت‌ها و ابعاد است، روشی که به شما امکان می‌دهد چیدمان را ازطریق نگاشت‌های منطقی، به‌جای فیزیکی، کنترل کنید. این ویژگی به‌ویژه زمانی مفید است که با وب‌سایت‌هایی سروکار دارید که به زبان‌ها و حالت‌های نوشتاری مختلف، مانند راست به چپ، ارائه می‌شوند. برای دیدن نمونه، به «ویژگی‌های فیزیکی درمقابل منطقی» در CodePen نگاهی بیندازید.

برجسته کردن صفحه فعال

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

<a href="/about-us" class="active-page">About us</a>

مشکل این رویکرد این است که اطلاعات مربوط به اینکه کدام پیوند فعال است را صرفاً به‌صورت بصری منتقل می‌کند. کاربر نابینای صفحه‌خوان نمی‌توانست تفاوت بین صفحه فعال و سایر صفحه‌ها را تشخیص دهد. خوشبختانه، استاندارد برنامه‌های اینترنتی غنی دسترس‌پذیر (ARIA) روشی برای انتقال این اطلاعات به‌صورت معنایی نیز ارائه می‌دهد. به‌جای کلاس، از مقدار و مشخصه aria-current="page" استفاده کنید.

aria-current (وضعیت) نشان‌دهنده عنصری است که مورد فعلی را در ظرف یا مجموعه‌ای از عناصر مرتبط نشان می‌دهد. یک نشانه صفحه که برای نشان دادن پیوند در مجموعه‌ای از پیوندهای صفحه‌بندی استفاده می‌شود، جایی که پیوند به‌صورت بصری برای نمایش صفحه درحال‌نمایش فعلی طراحی شده است. [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

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

<a href="/about-us" aria-current="page" class="active-page">About us</a>

یک اثر جانبی راحت این است که می‌توانید از این مشخصه برای انتخاب پیوند فعال در CSS استفاده کنید، که باعث می‌شود کلاس active-page منسوخ شود.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

مرحله ۲: برجسته کردن صفحه فعال در CodePen را مشاهده کنید.

اعلام کردن تعداد موارد

کاربران بینا با نگاه کردن به پیمایش می‌توانند متوجه شوند که فقط شامل چهار پیوند است. یک کاربر نابینای صفحه‌خوان نمی‌تواند این اطلاعات را به این سرعت دریافت کند. ممکن است مجبور شوند کل فهرست پیوندها را بررسی کنند. اگر فهرست کوتاه باشد، مثل این مثال، ممکن است مشکلی نباشد، اما اگر حاوی ۴۰ پیوند باشد، این کار می‌تواند طاقت‌فرسا باشد. اگر کاربر صفحه‌خوان ازقبل بداند که پیمایش حاوی پیوندهای زیادی است، ممکن است تصمیم بگیرد از روش پیمایش متفاوت و کارآمدتری مانند جستجوی سایت استفاده کند.
یک روش خوب برای اعلام تعداد موارد ازقبل، قرار دادن هر پیوند در یک مورد فهرست (<li>) است که در یک فهرست نامرتب (<ul>) تودرتو شده است.

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

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

در اینجا نمایشی از پیمایش با صفحه‌خوان NVDA در Windows ارائه شده است.

اکنون باید سبک را تطبیق دهید تا مانند قبل به‌نظر برسد.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

استفاده از فهرست‌ها می‌تواند مزایای زیادی برای کاربران صفحه‌خوان داشته باشد:

• می‌توانند قبل‌از تعامل با موارد، تعداد کل موارد را دریافت کنند.
• ممکن است از میان‌برها برای پریدن از یک مورد فهرست به مورد دیگر استفاده کنند.
• ممکن است از میان‌برها برای پریدن از فهرستی به فهرست دیگر استفاده کنند.
• صفحه‌خوان ممکن است نمایه مورد فعلی را اعلام کند (برای مثال، «مورد فهرست، دو از چهار»).

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

جزئیات قابل‌توجه درباره VoiceOver در Safari این است که وقتی list-style: none را تنظیم می‌کنید، همه این مزایا را ازدست می‌دهید. این مورد ازپیش طراحی شده است. تیم WebKit تصمیم گرفت معناشناسی فهرست را زمانی که فهرست شبیه فهرست نیست بردارد. بسته به پیچیدگی پیمایش شما، این موضوع ممکن است مشکل‌ساز باشد یا نباشد. از یک طرف، پیمایش هنوز قابل‌استفاده است و فقط بر VoiceOver در Safari تأثیر می‌گذارد. VoiceOver با Chrome یا Firefox همچنان تعداد موارد را اعلام می‌کند، همچنین صفحه‌خوان‌های دیگر، مانند NVDA. ازسوی دیگر، اطلاعات معنایی می‌تواند در برخی شرایط واقعاً مفید باشد. برای گرفتن این تصمیم، باید پیمایش را با کاربران واقعی صفحه‌خوان آزمایش کنید و بازخورد آن‌ها را دریافت کنید. اگر تصمیم گرفتید که به VoiceOver در Safari نیاز دارید تا مانند سایر صفحه‌خوان‌ها رفتار کند، می‌توانید با تنظیم صریح نقش فهرست ARIA در <ul>، مشکل را حل کنید. این کار رفتار را به حالت قبل‌از برداشتن سبک فهرست برمی‌گرداند. ازنظر بصری، فهرست همچنان یکسان به‌نظر می‌رسد.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

توجه: اگر HTML خود را اعتبارسنجی کنید و سرویس اعتبارسنجی هشداری مانند «نقش فهرست برای عنصر ul غیرضروری است» گزارش دهد، می‌توانید با خیال راحت آن را نادیده بگیرید.

مشاهده مرحله ۳: اعلام تعداد موارد در CodePen.

افزودن نشانگر مکانی

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

استفاده از عنصر <nav> چندین مزیت دارد. به‌ویژه، وقتی کاربر با آن تعامل می‌کند، صفحه‌خوان چیزی مثل «پیمایش» را اعلام می‌کند و نشانگری به صفحه اضافه می‌کند. نشانگرهای مکانی مناطق ویژه‌ای در صفحه هستند، مثل <header>، <footer>، یا <main>، که صفحه‌خوان می‌تواند به آن‌ها بپرد. داشتن نشانگر در صفحه می‌تواند مفید باشد، زیرا به کاربران صفحه‌خوان اجازه می‌دهد بدون نیاز به تعامل با بقیه صفحه، مستقیماً به مناطق مهم صفحه دسترسی داشته باشند. برای مثال، می‌توانید با فشار دادن کلید D در NVDA، از نشانگر مکانی به نشانگر مکانی دیگر بروید. در Voice Over می‌توانید با فشار دادن VO + U از روتور برای فهرست کردن همه نشانگرهای مکانی موجود در صفحه استفاده کنید.

چرخانه در VoiceOver که همه نشانگرهای مکانی موجود در صفحه را فهرست می‌کند.

در این فهرست، ۴ نشانگر مکانی می‌بینید: برنما که عنصر <header> است، پیمایش که عنصر <nav> است، اصلی که عنصر <main> است، و اطلاعات محتوا که عنصر <footer> است. این فهرست نباید خیلی طولانی باشد، واقعاً فقط باید بخش‌های مهم واسط کاربر را به‌عنوان نشانگر مکانی علامت‌گذاری کنید، مثل جستجوی سایت، پیمایش محلی، یا صفحه‌بندی.

اگر پیمایش سراسری سایت، پیمایش محلی برای صفحه، و صفحه‌بندی در یک صفحه داشته باشید، ممکن است ۳ عنصر <nav> نیز داشته باشید. این خوب است، اما اکنون سه نشانگر پیمایش وجود دارد و از نظر معنایی همه آن‌ها یکسان به‌نظر می‌رسند. تشخیص تفاوت آن‌ها دشوار است، مگراینکه ساختار صفحه را به‌خوبی بشناسید.

چرخانه در VoiceOver که سه نشان راهبری بدون برچسب را فهرست می‌کند.

برای اینکه قابل‌تشخیص باشند، باید آن‌ها را بااستفاده از aria-labelledby یا aria-label برچسب‌گذاری کنید.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

اگر برچسبی که انتخاب کرده‌اید ازقبل در جایی از صفحه وجود دارد، می‌توانید به‌جای آن از aria-labelledby استفاده کنید و بااستفاده از مشخصه id به برچسب موجود ارجاع دهید.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

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

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

مرحله ۴: افزودن نقطه عطف در CodePen را مشاهده کنید.

پنهان کردن پیمایش در دریچه‌های دید باریک

Personally, I'm not a big fan of hiding the main navigation on narrow viewports, but if the list of links gets too long, there's no way around it. اگر این‌طور باشد، کاربران به‌جای فهرست، دکمه‌ای با برچسب «منو» یا نماد همبرگری یا ترکیبی از این دو را می‌بینند. با کلیک کردن روی دکمه، فهرست نشان داده و پنهان می‌شود. اگر با جاوا اسکریپت و CSS پایه آشنایی دارید، این کار شدنی است، اما باید به چند نکته دررابطه‌با تجربه کاربری و دسترس‌پذیری توجه کنید.

• باید فهرست را به‌شیوه‌ای دسترس‌پذیر پنهان کنید.
• پیمایش باید با صفحه‌کلید دردسترس باشد.
• پیمایش باید مشخص کند که آیا نمایان است یا نه.

افزودن دکمه همبرگری

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

نتیجه: به‌جای پیوندها، پیمایش دکمه همبرگری را در دریچه‌های دید باریک نشان می‌دهد.

<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

1. مشخصه aria-expanded به نرم‌افزار صفحه‌خوان می‌گوید که آیا عنصر کنترل‌شده توسط دکمه گسترده شده است یا نه.
2. aria-label به دکمه نامی می‌دهد که اصطلاحاً نام دسترس‌پذیر نامیده می‌شود، یعنی متنی جایگزین برای نماد همبرگری.
3. <svg> را از فناوری کمکی بااستفاده از aria-hidden پنهان می‌کنید زیرا قبلاً برچسب نوشتاری ارائه‌شده توسط aria-label را دارد.
4. aria-controls به فناوری کمکی که از این مشخصه پشتیبانی می‌کند (برای مثال JAWS) می‌گوید که دکمه کدام عنصر را کنترل می‌کند.

const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);

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

سپس، سبک پیش‌فرض دکمه را بازنشانی می‌کنید و مطمئن می‌شوید که فقط در درگاه‌های دید باریک قابل‌مشاهده است.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

مرحله ۵: افزودن دکمه همبرگری در CodePen را مشاهده کنید.

درحال پنهان کردن فهرست

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

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

سپس، با افزودن ویژگی سفارشی جدید (—-nav-list-layout)، چیدمان را در درگاه‌های دید باریک تغییر دهید. چیدمان به‌طور پیش‌فرض ستونی است و در صفحه‌نمایش‌های بزرگ‌تر به سطری تغییر می‌کند.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

ناوبری شما در دریچه‌های دید باریک باید چیزی شبیه به این باشد.

هم دکمه همبرگری و هم فهرست در گوشه بالایی نمای دید قرار دارند.

این فهرست قطعاً به CSS نیاز دارد. آن را به گوشه بالا منتقل می‌کنیم، کاری می‌کنیم که کل صفحه را به‌صورت عمودی پر کند، background-color و box-shadow را اعمال می‌کنیم.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

فهرست باید در درگاه‌های دید باریک چیزی شبیه به این باشد، بیشتر شبیه به نوار کناری تا فهرست ساده.

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

پیش‌تر، رویداد کلیکی به دکمه اضافه کردید تا مقدار مشخصه aria-expanded را تغییر دهید. می‌توانید از این اطلاعات به‌عنوان شرطی برای نمایش و پنهان کردن فهرست در CSS استفاده کنید.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

مهم است که برای پنهان کردن فهرست، به‌جای opacity: 0 یا translateX(100%) از اعلام ویژگی مانند visibility: hidden یا display: none استفاده کنید. این ویژگی‌ها تضمین می‌کنند که وقتی پیمایش پنهان است، پیوندها قابل‌تمرکز نباشند. استفاده از opacity یا translate محتوا را به‌صورت بصری برمی‌دارد، بنابراین پیوندها نامرئی می‌شوند اما همچنان بااستفاده از صفحه‌کلید قابل‌دسترسی هستند که این امر می‌تواند گیج‌کننده و ناامیدکننده باشد. استفاده از visibility یا display آن را به‌صورت بصری پنهان می‌کند و آن را غیرقابل‌دسترس می‌کند، بنابراین آن را برای همه کاربران پنهان می‌کند.

مرحله ۶: پنهان کردن فهرست را مشاهده کنید.

درحال پویانمایی فهرست

اگر می‌خواهید بدانید چرا باید از visibility: hidden; به‌جای display: none; استفاده کنید، دلیلش این است که می‌توانید نمایان بودن را پویانمایی کنید. این خصوصیت فقط دو حالت دارد: hidden و visible، اما می‌توانید آن را با خصوصیت دیگری مثل transform یا opacity ترکیب کنید تا جلوه لغزشی یا محوشدگی ایجاد کنید. این کار با display: none انجام نمی‌شود زیرا ویژگی display قابل‌پویانمایی نیست.

انتقال‌های CSS زیر opacity برای ایجاد جلوه محو شدن و ظاهر شدن.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

اگر می‌خواهید حرکت را پویانمایی کنید، باید ویژگی transition را در پُرسمان رسانه‌ای prefers-reduced-motion قرار دهید، زیرا پویانمایی‌ها می‌توانند در برخی کاربران باعث حالت تهوع، سرگیجه، و سردرد شوند.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

این کار تضمین می‌کند که فقط افرادی که ترجیحی برای کاهش حرکت ندارند، پویانمایی را ببینند.

مرحله ۷: پویانمایی فهرست در CodePen را مشاهده کنید.

بهبود سبک‌پردازی تمرکز

کاربران صفحه‌کلید برای جهت‌یابی و پیمایش در صفحه به سبک‌های تمرکز عناصر متکی هستند. سبک‌های تمرکز پیش‌فرض بهتر از نداشتن سبک تمرکز است (که درصورت تنظیم outline: none اتفاق می‌افتد)، اما داشتن سبک‌های تمرکز سفارشی که به‌وضوح قابل‌مشاهده باشند تجربه کاربری را بهبود می‌بخشد.

در اینجا نحوه نمایش سبک‌های تمرکز پیش‌فرض روی پیوند در Chrome 103 آمده است.

با ارائه سبک‌های خودتان در رنگ‌های خودتان می‌توانید آن را بهبود دهید. بااستفاده از :focus-visible به‌جای :focus به مرورگر اجازه می‌دهید تصمیم بگیرد چه زمانی برای نمایش سبک‌های تمرکز مناسب است. سبک‌های :focus برای همه کاربران موشواره، صفحه‌کلید، و لمسی نمایان خواهد بود، چه به آن‌ها نیاز داشته باشند چه نداشته باشند. با :focus-visible، مرورگر از اکتشافات داخلی استفاده می‌کند تا تصمیم بگیرد که آیا آن‌ها را فقط به کاربران صفحه‌کلید نشان دهد یا به همه.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

پشتیبانی مرورگر برای :focus-visible

Browser Support

• 86
• 86
• 85
• 15.4

Source

روش‌های مختلفی برای برجسته کردن موارد هنگام تمرکز روی آن‌ها وجود دارد. استفاده از ویژگی outline توصیه می‌شود زیرا چیدمان را به‌هم نمی‌ریزد، اتفاقی که ممکن است با border رخ دهد، و با حالت کنتراست بالا در Windows به‌خوبی کار می‌کند. ویژگی‌هایی که خوب کار نمی‌کنند background-color یا box-shadow هستند، زیرا ممکن است اصلاً با تنظیمات کنتراست سفارشی نمایش داده نشوند.

مرحله ۸: بهبود سبک‌های فوکوس در CodePen را مشاهده کنید.

تبریک! شما یک ناوبری اصلی با ارتقای پیش‌رو، غنی از نظر معنایی، دسترس‌پذیر، و سازگار با دستگاه همراه ساخته‌اید.

همیشه چیزی برای بهبود وجود دارد، برای مثال:

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

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

پیمایش درمقابل منوها

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

عنصر <nav> دارای نقش ARIA ضمنی پیمایش است که برای برقراری ارتباط کافی است که عنصر یک پیمایش است، اما اغلب می‌بینید که سایت‌ها از منو، نوار منو و آیتم منو نیز استفاده می‌کنند. چون گاهی‌اوقات از این اصطلاحات به‌جای یکدیگر استفاده می‌کنیم، فکر می‌کنیم که ترکیب آن‌ها برای بهبود تجربه کاربران صفحه‌خوان ممکن است منطقی باشد. قبل‌از اینکه بدانیم چرا معمولاً این‌طور نیست، بیایید نگاهی به تعریف رسمی این نقش‌ها بیندازیم.

نقش پیمایش

مجموعه‌ای از عناصر پیمایشی (معمولاً پیوندها) برای پیمایش سند یا اسناد مرتبط.

navigation (role) WAI-ARIA 1.1

نقش منو

منو اغلب فهرستی از کنش‌ها یا عملکردهای رایج است که کاربر می‌تواند فراخوانی کند. نقش منو زمانی مناسب است که فهرستی از گزینه‌های منو به‌شیوه‌ای مشابه منو در برنامه رایانه ارائه شود.

منو (نقش) WAI-ARIA 1.1

نقش نوار منو

نمایش منویی که معمولاً قابل‌مشاهده باقی می‌ماند و معمولاً به‌صورت افقی ارائه می‌شود. نقش menubar برای ایجاد نوار منو مشابه آنچه در برنامه‌های میزکار Windows،‏ Mac، و Gnome یافت می‌شود استفاده می‌شود. از نوار منو برای ایجاد مجموعه‌ای منسجم از فرمان‌های پرکاربرد استفاده می‌شود. نویسندگان باید مطمئن شوند که تعامل با نوار منو مشابه تعامل معمول با نوار منو در میانای نگاره‌ای کاربر رایانه است.

نوار منو (نقش) WAI-ARIA 1.1

نقش menuitem

گزینه‌ای در مجموعه‌ای از انتخاب‌ها که در منو یا نوار منو قرار دارد.

menuitem (role) WAI-ARIA 1.1

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

چه زمانی منو مناسب است؟

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

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

پیامدهای استفاده از نقش‌های منو

استفاده عاقلانه از این نقش‌های منو بسیار مهم است زیرا ممکن است مشکلات زیادی پیش بیاید.

منوها به ساختار DOM خاصی نیاز دارند. ‫menuitem باید مورد فرزند مستقیم menu باشد. کد زیر می‌تواند رفتار معنایی را مختل کند:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

کاربران باتجربه انتظار دارند میان‌برهای صفحه‌کلید خاصی با منوها و نوارهای منو کار کنند. براساس راهنمای شیوه‌های تألیف ARIA (APG)، این شامل موارد زیر است:

• کلید Enter و کلید فاصله برای انتخاب گزینه‌های منو.
• کلیدهای جهت‌نما در همه جهت‌ها برای پیمایش بین موارد.
• کلیدهای Home و End برای انتقال تمرکز به‌ترتیب به اولین یا آخرین مورد.
• a-z برای انتقال تمرکز به گزینه منو بعدی با برچسبی که با نویسه تایپ‌شده شروع می‌شود.
• Esc برای بستن منو.

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

این موضوع برای کاربران صفحه‌کلید که ممکن است انتظار داشته باشند بتوانند از Shift و Shift + Tab استفاده کنند نیز صادق است.

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

منابع بیشتر

• Fixing Lists اثر اسکات اوهارا.
• Don't Use ARIA Menu Roles for Site Nav (از نقش‌های منو ARIA برای پیمایش سایت استفاده نکنید) نوشته آدریان روزلی.
• منوها و دکمه‌های منو اثر هیدون پیکرینگ.
• منوهای WAI-ARIA و اینکه چرا باید با دقت زیاد با آن‌ها کار کنید، نوشته مارکو زهه.
• پنهان کردن مسئولانه محتوا توسط کیتی ژیرودل.
• :focus-visible Is Here از Matthias Ott.