إتقان واجهات علامات التبويب: نظرة معمقة على التنقل باستخدام لوحة المفاتيح وإدارة التركيز

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

هذا الدليل الشامل مخصص لمطوري الويب، ومصممي واجهة المستخدم/تجربة المستخدم، والمدافعين عن إمكانية الوصول الذين يرغبون في تجاوز الأساسيات. سنستكشف الأنماط المعترف بها دوليًا للتفاعل باستخدام لوحة المفاتيح، والدور الحاسم لـ ARIA (تطبيقات الإنترنت الغنية الميسرة) في توفير السياق الدلالي، والتقنيات الدقيقة لإدارة التركيز التي تخلق تجربة مستخدم سلسة وبديهية للجميع، بغض النظر عن موقعهم أو كيفية تفاعلهم مع الويب.

تشريح واجهة علامات التبويب: المكونات الأساسية

قبل الغوص في الآليات، من الضروري تحديد مصطلحات مشتركة بناءً على ممارسات التأليف الخاصة بـ WAI-ARIA. يتكون مكون علامات التبويب القياسي من ثلاثة عناصر أساسية:

• قائمة علامات التبويب (`role="tablist"`): هذا هو العنصر الحاوي الذي يضم مجموعة علامات التبويب. وهو بمثابة الأداة الرئيسية التي يتفاعل معها المستخدمون للتبديل بين لوحات المحتوى المختلفة.
• علامة التبويب (`role="tab"`): عنصر فردي قابل للنقر داخل قائمة علامات التبويب. عند تفعيلها، تعرض لوحة المحتوى المرتبطة بها. بصريًا، هي "علامة التبويب" نفسها.
• لوحة علامة التبويب (`role="tabpanel"`): الحاوية الخاصة بالمحتوى المرتبط بعلامة تبويب معينة. تكون لوحة واحدة فقط مرئية في أي وقت معين - وهي تلك المطابقة لعلامة التبويب النشطة حاليًا.

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

مبادئ التنقل السلس باستخدام لوحة المفاتيح

بالنسبة لمستخدم الفأرة المبصر، يكون التفاعل مع علامات التبويب مباشرًا: تنقر على علامة التبويب التي تريد رؤيتها. بالنسبة للمستخدمين الذين يعتمدون على لوحة المفاتيح فقط، يجب أن تكون التجربة بديهية بنفس القدر. توفر ممارسات التأليف الخاصة بـ WAI-ARIA نموذجًا قويًا وموحدًا للتفاعل باستخدام لوحة المفاتيح يتوقعه مستخدمو التكنولوجيا المساعدة.

التنقل في قائمة علامات التبويب (`role="tablist"`)

يحدث التفاعل الأساسي داخل قائمة علامات التبويب. الهدف هو السماح للمستخدمين بتصفح واختيار علامات التبويب بكفاءة دون الحاجة إلى التنقل عبر كل عنصر تفاعلي في الصفحة.

• مفتاح `Tab`: هذا هو نقطة الدخول والخروج. عندما يضغط المستخدم على `Tab`، يجب أن ينتقل التركيز *إلى* قائمة علامات التبويب، ويهبط على علامة التبويب النشطة حاليًا. الضغط على `Tab` مرة أخرى يجب أن ينقل التركيز *خارج* قائمة علامات التبويب إلى العنصر التالي القابل للتركيز في الصفحة (أو إلى لوحة علامة التبويب النشطة، حسب تصميمك). النقطة الأساسية هي أن أداة قائمة علامات التبويب بأكملها يجب أن تمثل نقطة توقف واحدة في تسلسل التنقل العام للصفحة.
• مفاتيح الأسهم (`اليسار/اليمين` أو `الأعلى/الأسفل`): بمجرد أن يكون التركيز داخل قائمة علامات التبويب، يتم استخدام مفاتيح الأسهم للتنقل.
  • بالنسبة لقائمة علامات تبويب أفقية، ينقل مفتاح `السهم الأيمن` التركيز إلى علامة التبويب التالية، وينقل مفتاح `السهم الأيسر` التركيز إلى علامة التبويب السابقة.
  • بالنسبة لقائمة علامات تبويب رأسية، ينقل مفتاح `السهم لأسفل` التركيز إلى علامة التبويب التالية، وينقل مفتاح `السهم لأعلى` التركيز إلى علامة التبويب السابقة.
  والأهم من ذلك، يجب أن يكون التنقل دائريًا. الضغط على `السهم الأيمن` في علامة التبويب الأخيرة يجب أن ينقل التركيز إلى علامة التبويب الأولى، والضغط على `السهم الأيسر` في علامة التبويب الأولى يجب أن ينقل التركيز إلى الأخيرة. هذا يخلق حلقة تنقل محتواة ويمكن التنبؤ بها.
• مفتاحا `Home` و `End`: للكفاءة في القوائم التي تحتوي على العديد من علامات التبويب، توفر هذه المفاتيح اختصارات.
  • `Home`: ينقل التركيز إلى أول علامة تبويب في القائمة.
  • `End`: ينقل التركيز إلى آخر علامة تبويب في القائمة.

نماذج التفعيل: تلقائي أم يدوي

عندما يتنقل المستخدم بين علامات التبويب باستخدام مفاتيح الأسهم، متى يجب عرض اللوحة المقابلة؟ هناك نموذجان قياسيان:

• التفعيل التلقائي: بمجرد أن تتلقى علامة التبويب التركيز عبر مفتاح سهم، يتم عرض لوحتها المرتبطة. هذا هو النمط الأكثر شيوعًا ويفضل عمومًا لفوريته. فهو يقلل من عدد ضغطات المفاتيح المطلوبة لعرض المحتوى.
• التفعيل اليدوي: نقل التركيز باستخدام مفاتيح الأسهم يسلط الضوء فقط على علامة التبويب. يجب على المستخدم بعد ذلك الضغط على `Enter` أو `Space` لتفعيل علامة التبويب وعرض لوحتها. يمكن أن يكون هذا النموذج مفيدًا عندما تحتوي لوحات علامات التبويب على كمية كبيرة من المحتوى أو تطلق طلبات شبكة، لأنه يمنع تحميل المحتوى بشكل غير ضروري بينما يتصفح المستخدم خيارات علامات التبويب فقط.

يجب أن يعتمد اختيارك لنموذج التفعيل على محتوى وسياق واجهتك. أيًا كان اختيارك، كن متسقًا في جميع أنحاء تطبيقك.

إتقان إدارة التركيز: البطل المجهول لسهولة الاستخدام

إدارة التركيز الفعالة هي ما يفصل بين الواجهة غير المتقنة والواجهة السلسة. إنها تتعلق بالتحكم البرمجي في مكان تركيز المستخدم، مما يضمن مسارًا منطقيًا ويمكن التنبؤ به عبر المكون.

تقنية `tabindex` المتجولة

تقنية `tabindex` المتجولة هي حجر الزاوية في التنقل باستخدام لوحة المفاتيح داخل المكونات مثل قوائم علامات التبويب. الهدف هو جعل الأداة بأكملها تعمل كنقطة توقف `Tab` واحدة.

إليك كيف تعمل:

1. يتم إعطاء عنصر علامة التبويب النشطة حاليًا `tabindex="0"`. هذا يجعلها جزءًا من ترتيب التنقل الطبيعي ويسمح لها بتلقي التركيز عندما ينتقل المستخدم إلى المكون.
2. يتم إعطاء جميع عناصر علامات التبويب غير النشطة الأخرى `tabindex="-1"`. هذا يزيلها من ترتيب التنقل الطبيعي، لذلك لا يضطر المستخدم إلى الضغط على `Tab` عبر كل واحدة منها. لا يزال من الممكن تركيزها برمجيًا، وهو ما نفعله باستخدام التنقل بمفاتيح الأسهم.

عندما يضغط المستخدم على مفتاح سهم للانتقال من علامة التبويب أ إلى علامة التبويب ب:

• يقوم منطق JavaScript بتحديث علامة التبويب أ ليكون لديها `tabindex="-1"`.
• ثم يقوم بتحديث علامة التبويب ب ليكون لديها `tabindex="0"`.
• أخيرًا، يستدعي `.focus()` على عنصر علامة التبويب ب لنقل تركيز المستخدم إلى هناك.

تضمن هذه التقنية أنه بغض النظر عن عدد علامات التبويب في القائمة، فإن المكون يشغل دائمًا موضعًا واحدًا فقط في تسلسل `Tab` العام للصفحة.

التركيز داخل لوحات علامات التبويب

بمجرد أن تكون علامة التبويب نشطة، إلى أين يذهب التركيز بعد ذلك؟ السلوك المتوقع هو أن الضغط على `Tab` من عنصر علامة تبويب نشط سينقل التركيز إلى أول عنصر قابل للتركيز *داخل* لوحة علامة التبويب المقابلة لها. إذا لم تكن لوحة علامة التبويب تحتوي على عناصر قابلة للتركيز، فيجب أن يؤدي الضغط على `Tab` إلى نقل التركيز إلى العنصر التالي القابل للتركيز في الصفحة *بعد* قائمة علامات التبويب.

وبالمثل، عندما يكون المستخدم مركزًا على آخر عنصر قابل للتركيز داخل لوحة علامة التبويب، يجب أن يؤدي الضغط على `Tab` إلى نقل التركيز خارج اللوحة إلى العنصر التالي القابل للتركيز في الصفحة. يجب أن يؤدي الضغط على `Shift + Tab` من أول عنصر قابل للتركيز داخل اللوحة إلى نقل التركيز مرة أخرى إلى عنصر علامة التبويب النشط.

تجنب حصر التركيز: واجهة علامات التبويب ليست مربع حوار مشروط (modal dialog). يجب أن يكون المستخدمون قادرين دائمًا على التنقل داخل وخارج مكون علامة التبويب ولوحاته باستخدام مفتاح `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();
}