Frontend Academy · บทเรียน

การนำทางด้วยแป้นพิมพ์และการจัดการโฟกัส

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

การนำทางด้วยแป้นพิมพ์และการจัดการโฟกัส เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดการนำทางด้วยแป้นพิมพ์จึงสำคัญ

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

Tab และ Shift+Tab

Tab ย้าย focus ไปยังองค์ประกอบแบบโต้ตอบถัดไป ส่วน Shift+Tab ย้ายไปยังองค์ประกอบก่อนหน้า โดยค่าเริ่มต้น ลำดับจะเป็นไปตามลำดับใน DOM อย่าฝืนลำดับนี้ แต่ให้ DOM เป็นลำดับการกดแท็บของคุณ

อะไรที่รับ focus ได้โดยค่าเริ่มต้น

องค์ประกอบแบบโต้ตอบดั้งเดิมสามารถรับ focus ได้ ได้แก่ a[href], button, input, select, textarea และ summary ส่วนองค์ประกอบแบบกำหนดเองต้องใช้ tabindex

ค่าของ tabindex

tabindex="0": รวมอยู่ในลำดับการกดแท็บ ณ ตำแหน่งใน DOM tabindex="-1": รับ focus ได้ผ่าน JS เท่านั้น (การโฟกัสโดยสคริปต์ ไม่ใช่ผ่าน Tab) tabindex=">0": เป็นรูปแบบที่ไม่ควรใช้ เพราะสร้างลำดับ focus ที่สับสน

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

ตัวบ่งชี้ focus ที่มองเห็นได้

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

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

คลาสเทียม :focus-visible ทำงานเฉพาะเมื่อ focus มาจากแป้นพิมพ์ ไม่ใช่จากการคลิกเมาส์ ช่วยให้คุณคงรูปแบบที่สะอาดสำหรับเมาส์ไว้ได้ พร้อมแสดง focus สำหรับแป้นพิมพ์

ลิงก์ข้ามไปยังเนื้อหา

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

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

กัก focus ในกล่องโต้ตอบ

เมื่อกล่องโต้ตอบแบบโมดัลเปิดขึ้น ควรกัก focus ไว้ภายในนั้น การกด Tab จากองค์ประกอบสุดท้ายควรวนกลับไปยังองค์ประกอบแรก และการกด Shift+Tab จากองค์ประกอบแรกควรวนไปยังองค์ประกอบสุดท้าย การกดแป้นเอสเคปควรปิดกล่องโต้ตอบ

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

ใช้องค์ประกอบ dialog

<dialog> ดั้งเดิมของ HTML จัดการการกัก focus การปิดด้วยแป้นเอสเคป และพื้นหลังทึบของโมดัลให้โดยอัตโนมัติ

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

จัดการ focus หลังเปลี่ยนเส้นทาง

แอปพลิเคชันหน้าเดียวไม่โหลดหน้าใหม่ ดังนั้นผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่มีสัญญาณว่าการนำทางเกิดขึ้นแล้ว เมื่อเปลี่ยนเส้นทาง ให้ย้าย focus ไปยังหัวข้อหลักหรือเนื้อหาหลักของหน้าใหม่

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

ลำดับ focus ควรตรงกับลำดับที่มองเห็น

ตรวจสอบให้แน่ใจว่าลำดับใน DOM ตรงกับลำดับการมองเห็น หาก CSS จัดองค์ประกอบใหม่ เช่น ลำดับแบบ flex การวางแบบ grid หรือการกำหนดตำแหน่งแบบสัมบูรณ์ ลำดับการกดแท็บจะไม่ตรงกัน ซึ่งทำให้ทุกคนสับสน

ทดสอบโดยวางเมาส์ไว้ห่าง ๆ

การทดสอบการเข้าถึงที่มีประโยชน์ที่สุดคือ ถอดเมาส์ออกแล้วลองใช้แอปทั้งหมดด้วย Tab, Shift+Tab, Enter, Space และปุ่มลูกศร หากคุณติดขัด ผู้ใช้ของคุณก็จะติดขัดเช่นกัน

ตรวจสอบความเข้าใจ

คลาสเทียมของ CSS ใดช่วยให้จัดรูปแบบเส้นขอบ focus เฉพาะเมื่อ focus มาจากแป้นพิมพ์ ไม่ใช่จากการคลิกเมาส์?

ทบทวน: การนำทางด้วยแป้นพิมพ์

องค์ประกอบแบบโต้ตอบดั้งเดิมสามารถรับ focus ได้โดยค่าเริ่มต้น ใช้ค่า tabindex เท่ากับ 0 เฉพาะกับวิดเจ็ตแบบกำหนดเอง และอย่าใช้ค่าที่มากกว่า 0 แสดง focus เสมอโดยใช้การแสดง focus เฉพาะจากแป้นพิมพ์ เพิ่มลิงก์ข้ามไปยังเนื้อหา กัก focus ในกล่องโต้ตอบแบบโมดัลและคืน focus เมื่อปิด ใช้ <dialog> ดั้งเดิมเมื่อทำได้ ย้าย focus ไปยังหัวข้อหลักหรือเนื้อหาหลักเมื่อเปลี่ยนเส้นทาง และทดสอบโดยวางเมาส์ไว้ห่าง ๆ

คำถามที่พบบ่อย

บทเรียน “การนำทางด้วยแป้นพิมพ์และการจัดการโฟกัส” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การนำทางด้วยแป้นพิมพ์และการจัดการโฟกัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การนำทางด้วยแป้นพิมพ์และการจัดการโฟกัส”

ตรวจสอบให้องค์ประกอบโต้ตอบทั้งหมดเข้าถึงได้ด้วย Tab จัดการโฟกัสโดยโปรแกรมในกล่องโต้ตอบและการเปลี่ยนเส้นทาง และสร้างตัวบ่งชี้โฟกัสที่มองเห็นได้ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

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

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy