เชี่ยวชาญอินเทอร์เฟซแท็บ: เจาะลึกการนำทางด้วยคีย์บอร์ดและการจัดการโฟกัส

อินเทอร์เฟซแบบแท็บเป็นรากฐานสำคัญของการออกแบบเว็บสมัยใหม่ ตั้งแต่หน้าผลิตภัณฑ์และแดชบอร์ดผู้ใช้ไปจนถึงเว็บแอปพลิเคชันที่ซับซ้อน อินเทอร์เฟซเหล่านี้เป็นโซลูชันที่สวยงามสำหรับการจัดระเบียบเนื้อหาและทำให้ส่วนต่อประสานกับผู้ใช้ไม่รก แม้จะดูเรียบง่าย แต่การสร้างคอมโพเนนต์แท็บที่มีประสิทธิภาพและเข้าถึงได้อย่างแท้จริงนั้น จำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับการนำทางด้วยคีย์บอร์ดและการจัดการโฟกัสอย่างพิถีพิถัน อินเทอร์เฟซแท็บที่ใช้งานได้ไม่ดีอาจกลายเป็นอุปสรรคที่ผ่านไม่ได้สำหรับผู้ใช้ที่ต้องพึ่งพาคีย์บอร์ดหรือเทคโนโลยีสิ่งอำนวยความสะดวก ซึ่งจะทำให้พวกเขาไม่สามารถเข้าถึงเนื้อหาของคุณได้

คู่มือฉบับสมบูรณ์นี้จัดทำขึ้นสำหรับนักพัฒนาเว็บ, นักออกแบบ UI/UX, และผู้สนับสนุนด้านการเข้าถึงได้ที่ต้องการก้าวไปไกลกว่าพื้นฐาน เราจะสำรวจรูปแบบที่เป็นที่ยอมรับในระดับสากลสำหรับการโต้ตอบด้วยคีย์บอร์ด, บทบาทที่สำคัญของ ARIA (Accessible Rich Internet Applications) ในการให้บริบททางความหมาย, และเทคนิคที่ละเอียดอ่อนสำหรับการจัดการโฟกัสที่สร้างประสบการณ์ผู้ใช้ที่ราบรื่นและใช้งานง่ายสำหรับทุกคน โดยไม่คำนึงถึงสถานที่หรือวิธีที่พวกเขาโต้ตอบกับเว็บ

โครงสร้างของอินเทอร์เฟซแท็บ: ส่วนประกอบหลัก

ก่อนที่จะเจาะลึกถึงกลไกการทำงาน จำเป็นต้องสร้างคำศัพท์ที่เข้าใจร่วมกันโดยอ้างอิงจาก WAI-ARIA Authoring Practices คอมโพเนนต์แท็บมาตรฐานประกอบด้วยองค์ประกอบหลักสามส่วน:

• Tab List (`role="tablist"`): นี่คือองค์ประกอบคอนเทนเนอร์ที่เก็บชุดของแท็บ ทำหน้าที่เป็นวิดเจ็ตหลักที่ผู้ใช้โต้ตอบด้วยเพื่อสลับระหว่างแผงเนื้อหาต่างๆ
• Tab (`role="tab"`): องค์ประกอบที่คลิกได้แต่ละรายการภายใน Tab List เมื่อเปิดใช้งาน จะแสดงแผงเนื้อหาที่เกี่ยวข้อง ในทางสายตา มันคือ "แท็บ" นั่นเอง
• Tab Panel (`role="tabpanel"`): คอนเทนเนอร์สำหรับเนื้อหาที่เกี่ยวข้องกับแท็บนั้นๆ จะมีแผงแท็บเพียงแผงเดียวที่มองเห็นได้ในแต่ละครั้ง ซึ่งเป็นแผงที่สอดคล้องกับแท็บที่ใช้งานอยู่ในปัจจุบัน

การทำความเข้าใจโครงสร้างนี้เป็นขั้นตอนแรกในการสร้างคอมโพเนนต์ที่ไม่เพียงแต่สอดคล้องกันในด้านภาพ แต่ยังเข้าใจได้ในเชิงความหมายสำหรับเทคโนโลยีสิ่งอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ

หลักการนำทางด้วยคีย์บอร์ดที่สมบูรณ์แบบ

สำหรับผู้ใช้เมาส์ที่มีสายตาปกติ การโต้ตอบกับแท็บนั้นตรงไปตรงมา: คุณคลิกแท็บที่คุณต้องการดู สำหรับผู้ใช้ที่ใช้คีย์บอร์ดเพียงอย่างเดียว ประสบการณ์ก็ต้องใช้งานง่ายไม่แพ้กัน WAI-ARIA Authoring Practices ได้จัดเตรียมโมเดลมาตรฐานที่แข็งแกร่งสำหรับการโต้ตอบด้วยคีย์บอร์ด ซึ่งเป็นสิ่งที่ผู้ใช้เทคโนโลยีสิ่งอำนวยความสะดวกคาดหวัง

การนำทางใน Tab List (`role="tablist"`)

การโต้ตอบหลักเกิดขึ้นภายในรายการแท็บ เป้าหมายคือเพื่อให้ผู้ใช้สามารถเรียกดูและเลือกแท็บได้อย่างมีประสิทธิภาพโดยไม่ต้องนำทางผ่านทุกองค์ประกอบที่โต้ตอบได้บนหน้าเว็บ

• ปุ่ม `Tab`: นี่คือจุดเริ่มต้นและจุดสิ้นสุด เมื่อผู้ใช้กด `Tab` โฟกัสควรย้าย*เข้าไป*ในรายการแท็บ โดยไปอยู่ที่แท็บที่ใช้งานอยู่ในปัจจุบัน การกด `Tab` อีกครั้งควรย้ายโฟกัส*ออกจาก*รายการแท็บไปยังองค์ประกอบที่สามารถโฟกัสได้ถัดไปบนหน้า (หรือเข้าไปในแผงแท็บที่ใช้งานอยู่ ขึ้นอยู่กับการออกแบบของคุณ) ประเด็นสำคัญคือวิดเจ็ตรายการแท็บทั้งหมดควรเป็นเพียงจุดหยุดเดียวในลำดับการกด Tab ทั้งหมดของหน้า
• ปุ่มลูกศร (`ซ้าย/ขวา` หรือ `ขึ้น/ลง`): เมื่อโฟกัสอยู่ภายในรายการแท็บ จะใช้ปุ่มลูกศรในการนำทาง
  • สำหรับรายการแท็บแนวนอน ปุ่ม `ลูกศรขวา` จะย้ายโฟกัสไปยังแท็บถัดไป และปุ่ม `ลูกศรซ้าย` จะย้ายโฟกัสไปยังแท็บก่อนหน้า
  • สำหรับรายการแท็บแนวตั้ง ปุ่ม `ลูกศรลง` จะย้ายโฟกัสไปยังแท็บถัดไป และปุ่ม `ลูกศรขึ้น` จะย้ายโฟกัสไปยังแท็บก่อนหน้า
  สิ่งสำคัญคือการนำทางควรเป็นแบบวนรอบ การกด `ลูกศรขวา` บนแท็บสุดท้ายควรย้ายโฟกัสไปยังแท็บแรก และการกด `ลูกศรซ้าย` บนแท็บแรกควรย้ายโฟกัสไปยังแท็บสุดท้าย ซึ่งจะสร้างลูปการนำทางที่ควบคุมได้และคาดเดาได้
• ปุ่ม `Home` และ `End`: สำหรับประสิทธิภาพในรายการที่มีแท็บจำนวนมาก ปุ่มเหล่านี้เป็นทางลัด
  • `Home`: ย้ายโฟกัสไปยังแท็บแรกในรายการ
  • `End`: ย้ายโฟกัสไปยังแท็บสุดท้ายในรายการ

โมเดลการเปิดใช้งาน: อัตโนมัติ vs. ด้วยตนเอง

เมื่อผู้ใช้นำทางระหว่างแท็บโดยใช้ปุ่มลูกศร แผงที่เกี่ยวข้องควรแสดงเมื่อใด? มีโมเดลมาตรฐานสองแบบ:

• การเปิดใช้งานอัตโนมัติ: ทันทีที่แท็บได้รับโฟกัสผ่านปุ่มลูกศร แผงที่เกี่ยวข้องจะถูกแสดงขึ้น นี่เป็นรูปแบบที่พบบ่อยที่สุดและโดยทั่วไปเป็นที่ต้องการเนื่องจากความรวดเร็ว ช่วยลดจำนวนการกดแป้นพิมพ์ที่จำเป็นในการดูเนื้อหา
• การเปิดใช้งานด้วยตนเอง: การย้ายโฟกัสด้วยปุ่มลูกศรจะทำเพียงแค่ไฮไลต์แท็บเท่านั้น ผู้ใช้ต้องกด `Enter` หรือ `Space` เพื่อเปิดใช้งานแท็บและแสดงแผงของมัน โมเดลนี้อาจมีประโยชน์เมื่อแผงแท็บบรรจุเนื้อหาจำนวนมากหรือมีการเรียกขอข้อมูลจากเครือข่าย เพราะจะช่วยป้องกันไม่ให้เนื้อหาโหลดโดยไม่จำเป็นในขณะที่ผู้ใช้กำลังเรียกดูตัวเลือกแท็บ

การเลือกโมเดลการเปิดใช้งานของคุณควรขึ้นอยู่กับเนื้อหาและบริบทของอินเทอร์เฟซ ไม่ว่าจะเลือกแบบใด ควรใช้ให้สอดคล้องกันทั่วทั้งแอปพลิเคชันของคุณ

การจัดการโฟกัสอย่างเชี่ยวชาญ: วีรบุรุษผู้อยู่เบื้องหลังความง่ายในการใช้งาน

การจัดการโฟกัสที่มีประสิทธิภาพคือสิ่งที่แยกอินเทอร์เฟซที่ใช้งานยากออกจากอินเทอร์เฟซที่ราบรื่น มันคือการควบคุมตำแหน่งโฟกัสของผู้ใช้โดยใช้โปรแกรม เพื่อให้แน่ใจว่ามีเส้นทางการใช้งานที่สมเหตุสมผลและคาดเดาได้ผ่านคอมโพเนนต์

เทคนิค `tabindex` แบบเคลื่อนที่ (Roving `tabindex`)

Roving `tabindex` เป็นรากฐานสำคัญของการนำทางด้วยคีย์บอร์ดภายในคอมโพเนนต์ต่างๆ เช่น รายการแท็บ เป้าหมายคือการทำให้วิดเจ็ตทั้งหมดทำงานเสมือนเป็นจุดหยุด `Tab` เพียงจุดเดียว

นี่คือวิธีการทำงาน:

1. องค์ประกอบแท็บที่ใช้งานอยู่ในปัจจุบันจะได้รับ `tabindex="0"` ซึ่งทำให้เป็นส่วนหนึ่งของลำดับการกด Tab ตามปกติ และช่วยให้สามารถรับโฟกัสได้เมื่อผู้ใช้กด Tab เข้ามาในคอมโพเนนต์
2. องค์ประกอบแท็บอื่นๆ ที่ไม่ใช้งานทั้งหมดจะได้รับ `tabindex="-1"` ซึ่งจะลบออกจากลำดับการกด Tab ตามปกติ ดังนั้นผู้ใช้จึงไม่จำเป็นต้องกด `Tab` ผ่านทุกแท็บ อย่างไรก็ตาม องค์ประกอบเหล่านี้ยังคงสามารถถูกโฟกัสได้โดยใช้โปรแกรม ซึ่งเป็นสิ่งที่เราทำกับการนำทางด้วยปุ่มลูกศร

เมื่อผู้ใช้กดปุ่มลูกศรเพื่อย้ายจากแท็บ A ไปยังแท็บ B:

• ลอจิกของ JavaScript จะอัปเดตแท็บ A ให้มี `tabindex="-1"`
• จากนั้นจะอัปเดตแท็บ B ให้มี `tabindex="0"`
• สุดท้าย จะเรียกใช้ `.focus()` บนองค์ประกอบแท็บ B เพื่อย้ายโฟกัสของผู้ใช้ไปที่นั่น

เทคนิคนี้ช่วยให้มั่นใจได้ว่าไม่ว่าจะมีกี่แท็บในรายการ คอมโพเนนต์จะใช้ตำแหน่งเพียงตำแหน่งเดียวในลำดับ `Tab` โดยรวมของหน้า

โฟกัสภายในแผงแท็บ

เมื่อแท็บหนึ่งทำงานอยู่ โฟกัสจะไปที่ใดต่อไป? พฤติกรรมที่คาดหวังคือการกด `Tab` จากองค์ประกอบแท็บที่ใช้งานอยู่จะย้ายโฟกัสไปยังองค์ประกอบแรกที่สามารถโฟกัสได้*ภายใน*แผงแท็บที่เกี่ยวข้อง หากแผงแท็บไม่มีองค์ประกอบที่สามารถโฟกัสได้ การกด `Tab` ควรย้ายโฟกัสไปยังองค์ประกอบที่สามารถโฟกัสได้ถัดไปบนหน้า*หลังจาก*รายการแท็บ

ในทำนองเดียวกัน เมื่อผู้ใช้โฟกัสอยู่ที่องค์ประกอบสุดท้ายที่สามารถโฟกัสได้ภายในแผงแท็บ การกด `Tab` ควรย้ายโฟกัสออกจากแผงไปยังองค์ประกอบที่สามารถโฟกัสได้ถัดไปบนหน้า การกด `Shift + Tab` จากองค์ประกอบแรกที่สามารถโฟกัสได้ภายในแผงควรย้ายโฟกัสกลับไปยังองค์ประกอบแท็บที่ใช้งานอยู่

หลีกเลี่ยงการดักจับโฟกัส (focus trapping): อินเทอร์เฟซแท็บไม่ใช่กล่องโต้ตอบแบบโมดอล ผู้ใช้ควรสามารถนำทางเข้าและออกจากคอมโพเนนต์แท็บและแผงต่างๆ ได้เสมอโดยใช้ปุ่ม `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();
}