تسلط بر رابط‌های کاربری تب: نگاهی عمیق به ناوبری با صفحه‌کلید و مدیریت فوکوس

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

این راهنمای جامع برای توسعه‌دهندگان وب، طراحان UI/UX و حامیان دسترس‌پذیری است که می‌خواهند فراتر از اصول اولیه بروند. ما الگوهای شناخته‌شده بین‌المللی برای تعامل با صفحه‌کلید، نقش حیاتی ARIA (Accessible Rich Internet Applications) در ارائه زمینه معنایی، و تکنیک‌های ظریف برای مدیریت فوکوس را بررسی خواهیم کرد که تجربه‌ای یکپارچه و شهودی برای همه کاربران، صرف‌نظر از موقعیت مکانی یا نحوه تعامل آن‌ها با وب، ایجاد می‌کند.

آناتومی یک رابط کاربری تب: اجزای اصلی

قبل از پرداختن به جزئیات فنی، ضروری است که یک واژگان مشترک بر اساس شیوه‌نامه‌های تألیف WAI-ARIA ایجاد کنیم. یک کامپوننت تب استاندارد از سه عنصر اصلی تشکیل شده است:

• فهرست تب (`role="tablist"`): این عنصر دربرگیرنده است که مجموعه‌ای از تب‌ها را نگه می‌دارد. این ویجت اصلی است که کاربران برای جابجایی بین پنل‌های محتوای مختلف با آن تعامل می‌کنند.
• تب (`role="tab"`): یک عنصر قابل کلیک مجزا در داخل فهرست تب. هنگامی که فعال می‌شود، پنل محتوای مرتبط با خود را نمایش می‌دهد. از نظر بصری، این همان «تب» است.
• پنل تب (`role="tabpanel"`): محفظه‌ای برای محتوای مرتبط با یک تب خاص. در هر زمان فقط یک پنل تب قابل مشاهده است - آنکه مربوط به تب فعال فعلی است.

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

اصول ناوبری بی‌نقص با صفحه‌کلید

برای یک کاربر بینا که از ماوس استفاده می‌کند، تعامل با تب‌ها ساده است: شما روی تبی که می‌خواهید ببینید کلیک می‌کنید. برای کاربرانی که فقط از صفحه‌کلید استفاده می‌کنند، تجربه باید به همان اندازه شهودی باشد. شیوه‌نامه‌های تألیف WAI-ARIA یک مدل قوی و استاندارد برای تعامل با صفحه‌کلید ارائه می‌دهد که کاربران فناوری‌های کمکی انتظار آن را دارند.

ناوبری در فهرست تب (`role="tablist"`)

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

• کلید `Tab`: این نقطه ورود و خروج است. وقتی کاربر کلید `Tab` را فشار می‌دهد، فوکوس باید *به داخل* فهرست تب حرکت کند و روی تب فعال فعلی قرار گیرد. فشار دادن مجدد `Tab` باید فوکوس را *از* فهرست تب به عنصر قابل فوکوس بعدی در صفحه منتقل کند (یا بسته به طراحی شما، به داخل پنل تب فعال). نکته کلیدی این است که کل ویجت فهرست تب باید یک توقفگاه واحد در توالی کلی تب صفحه باشد.
• کلیدهای جهت‌نما (`چپ/راست` یا `بالا/پایین`): هنگامی که فوکوس داخل فهرست تب قرار گرفت، از کلیدهای جهت‌نما برای ناوبری استفاده می‌شود.
  • برای یک فهرست تب افقی، کلید `جهت‌نمای راست` فوکوس را به تب بعدی و کلید `جهت‌نمای چپ` فوکوس را به تب قبلی منتقل می‌کند.
  • برای یک فهرست تب عمودی، کلید `جهت‌نمای پایین` فوکوس را به تب بعدی و کلید `جهت‌نمای بالا` فوکوس را به تب قبلی منتقل می‌کند.
  نکته حیاتی این است که ناوبری باید چرخشی باشد. فشار دادن `جهت‌نمای راست` روی آخرین تب باید فوکوس را به اولین تب منتقل کند و فشار دادن `جهت‌نمای چپ` روی اولین تب باید فوکوس را به آخرین تب منتقل کند. این یک حلقه ناوبری محدود و قابل پیش‌بینی ایجاد می‌کند.
• کلیدهای `Home` و `End`: برای کارایی در فهرست‌هایی با تب‌های زیاد، این کلیدها میانبرهایی را فراهم می‌کنند.
  • `Home`: فوکوس را به اولین تب در فهرست منتقل می‌کند.
  • `End`: فوکوس را به آخرین تب در فهرست منتقل می‌کند.

مدل‌های فعال‌سازی: خودکار در مقابل دستی

وقتی کاربر با استفاده از کلیدهای جهت‌نما بین تب‌ها حرکت می‌کند، پنل مربوطه چه زمانی باید نمایش داده شود؟ دو مدل استاندارد وجود دارد:

• فعال‌سازی خودکار: به محض اینکه یک تب از طریق کلید جهت‌نما فوکوس را دریافت می‌کند، پنل مرتبط با آن نمایش داده می‌شود. این رایج‌ترین الگو است و به دلیل فوریت آن به طور کلی ترجیح داده می‌شود. این مدل تعداد کلیدهای مورد نیاز برای مشاهده محتوا را کاهش می‌دهد.
• فعال‌سازی دستی: حرکت فوکوس با کلیدهای جهت‌نما فقط تب را برجسته می‌کند. کاربر باید سپس `Enter` یا `Space` را فشار دهد تا تب را فعال کرده و پنل آن را نمایش دهد. این مدل می‌تواند زمانی مفید باشد که پنل‌های تب حاوی مقدار زیادی محتوا هستند یا درخواست‌های شبکه را فعال می‌کنند، زیرا از بارگذاری غیرضروری محتوا در حالی که کاربر صرفاً در حال مرور گزینه‌های تب است، جلوگیری می‌کند.

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

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

مدیریت مؤثر فوکوس چیزی است که یک رابط کاربری ناشیانه را از یک رابط یکپارچه متمایز می‌کند. این موضوع به کنترل برنامه‌ریزی شده محل فوکوس کاربر مربوط می‌شود و یک مسیر منطقی و قابل پیش‌بینی را از طریق کامپوننت تضمین می‌کند.

تکنیک `tabindex` متحرک

تکنیک `tabindex` متحرک (roving `tabindex`) سنگ‌بنای ناوبری با صفحه‌کلید در کامپوننت‌هایی مانند فهرست تب‌ها است. هدف این است که کل ویجت به عنوان یک توقفگاه واحد برای کلید `Tab` عمل کند.

نحوه کار آن به این صورت است:

1. به عنصر تب فعال فعلی `tabindex="0"` داده می‌شود. این کار آن را بخشی از ترتیب طبیعی تب می‌کند و به آن اجازه می‌دهد هنگام ورود کاربر به کامپوننت با کلید Tab، فوکوس را دریافت کند.
2. به همه عناصر تب غیرفعال دیگر `tabindex="-1"` داده می‌شود. این کار آن‌ها را از ترتیب طبیعی تب حذف می‌کند، بنابراین کاربر مجبور نیست برای عبور از هر یک از آن‌ها کلید `Tab` را فشار دهد. آن‌ها هنوز هم می‌توانند به صورت برنامه‌ریزی شده فوکوس شوند، که این همان کاری است که ما با ناوبری کلیدهای جهت‌نما انجام می‌دهیم.

وقتی کاربر یک کلید جهت‌نما را برای حرکت از تب A به تب B فشار می‌دهد:

• منطق جاوا اسکریپت، تب A را به‌روزرسانی می‌کند تا `tabindex="-1"` داشته باشد.
• سپس تب B را به‌روزرسانی می‌کند تا `tabindex="0"` داشته باشد.
• در نهایت، متد `.focus()` را روی عنصر تب B فراخوانی می‌کند تا فوکوس کاربر را به آنجا منتقل کند.

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

فوکوس در داخل پنل‌های تب

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

به طور مشابه، هنگامی که کاربر روی آخرین عنصر قابل فوکوس در داخل یک پنل تب متمرکز است، فشار دادن `Tab` باید فوکوس را از پنل خارج کرده و به عنصر قابل فوکوس بعدی در صفحه منتقل کند. فشار دادن `Shift + Tab` از اولین عنصر قابل فوکوس در داخل پنل باید فوکوس را به عنصر تب فعال بازگرداند.

از تله فوکوس اجتناب کنید: یک رابط کاربری تب یک دیالوگ مودال نیست. کاربران باید همیشه بتوانند با استفاده از کلید `Tab` به داخل و خارج از کامپوننت تب و پنل‌های آن حرکت کنند. فوکوس را در داخل کامپوننت به دام نیندازید، زیرا این کار می‌تواند گیج‌کننده و ناامیدکننده باشد.

نقش ARIA: انتقال معنا به فناوری‌های کمکی

بدون ARIA، یک رابط کاربری تب که با عناصر `

<h2 id="tablist-label">تنظیمات حساب کاربری</h2>
<div role="tablist" aria-labelledby="tablist-label">
  <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0">
    پروفایل
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    رمز عبور
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    اعلان‌ها
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>محتوا برای پنل پروفایل...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>محتوا برای پنل رمز عبور...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>محتوا برای پنل اعلان‌ها...</p>
</div>

const tablist = document.querySelector('[role="tablist"]');
const tabs = tablist.querySelectorAll('[role="tab"]');

tablist.addEventListener('keydown', (e) => {
  let currentTab = document.activeElement;
  let newTab;

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    // تب بعدی در دنباله را پیدا کن، در صورت لزوم به ابتدا برگرد
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // تب قبلی در دنباله را پیدا کن، در صورت لزوم به انتها برگرد
    newTab = getPreviousTab(currentTab);
  } else if (e.key === 'Home') {
    newTab = tabs[0];
  } else if (e.key === 'End') {
    newTab = tabs[tabs.length - 1];
  }

  if (newTab) {
    activateTab(newTab);
    e.preventDefault(); // از رفتار پیش‌فرض مرورگر برای کلیدهای جهت‌نما جلوگیری کن
  }
});

function activateTab(tab) {
  // همه تب‌های دیگر را غیرفعال کن
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // تب جدید را فعال کن
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}