โฟกัสแป้นพิมพ์

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

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

ผู้ใช้บางรายที่ไม่ใช่ผู้พิการอาจเลือกไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์ด้วย

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

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

ลำดับโฟกัส

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

สําหรับภาษาส่วนใหญ่ ลําดับโฟกัสจะเริ่มต้นที่ด้านบนของหน้าและสิ้นสุดที่ด้านล่าง โดยเริ่มจากซ้ายไปขวา อย่างไรก็ตาม บางภาษาอ่านจากขวาไปซ้าย ดังนั้นภาษาหลักของหน้าเว็บจึงอาจมีลําดับโฟกัสที่ต่างกัน

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

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

หมายเหตุ: ปุ่ม tab จะย้ายโฟกัสของแป้นพิมพ์ขึ้น DOM ส่วน shift+tab จะย้ายโฟกัสลงตาม DOM

Tabindex

ลําดับโฟกัสจะเริ่มต้นด้วยองค์ประกอบที่มีแอตทริบิวต์ tabindex ที่เป็นบวก (หากมี) และเลื่อนจากตัวเลขบวกที่มีค่าน้อยที่สุดไปยังค่ามากที่สุด (เช่น 1, 2, 3) จากนั้นจะไปยังองค์ประกอบที่มี tabindex เป็น 0 ตามลําดับใน DOM ระบบจะนำองค์ประกอบที่มี tabindex เป็นค่าลบออกจากลําดับโฟกัสตามปกติ

เมื่อใช้ tabindex เท่ากับ 0 (tabindex="0") กับองค์ประกอบที่ปกติแล้วโฟกัสไม่ได้ ระบบจะเพิ่มองค์ประกอบดังกล่าวลงในลําดับโฟกัสตามปกติของหน้าตามลักษณะที่ปรากฏใน DOM อย่างไรก็ตาม คุณต้องระบุการรองรับแป้นพิมพ์เพิ่มเติมเพื่อให้เข้าถึงองค์ประกอบเหล่านี้ได้อย่างเต็มรูปแบบ ซึ่งต่างจากองค์ประกอบ HTML ที่โฟกัสได้เอง

ในทำนองเดียวกัน หากคุณมีองค์ประกอบที่ปกติแล้วสามารถรับโฟกัสได้แต่ไม่ได้ใช้งาน เช่น ปุ่มที่ใช้งานไม่ได้จนกว่าจะมีการป้อนข้อมูลในช่องป้อนข้อมูล คุณควรเพิ่ม tabindex เชิงลบ (tabindex="-1") ลงในองค์ประกอบนี้ การเพิ่มสัญญาณ tabindex เชิงลบไปยังเทคโนโลยีความช่วยเหลือพิเศษและคีย์บอร์ดว่าควรนำปุ่มนี้ออกจากลําดับโฟกัสตามปกติ แต่ไม่ต้องกังวล คุณสามารถใช้ JavaScript เพื่อเพิ่มโฟกัสกลับไปยังองค์ประกอบได้เมื่อต้องการ

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

ดูผู้ใช้แป้นพิมพ์กด Tab ไปยังส่วนต่างๆ ของ HTML ใน CodePen

ข้อควรระวัง: โดยทั่วไป คุณควรหลีกเลี่ยงการใช้ tabindex ที่เป็นค่าบวก การให้โฟกัสกับองค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟและการรบกวนลําดับโฟกัสปกติอาจทําให้ผู้ใช้สับสนและหงุดหงิด แทบจะไม่มีกรณีที่ควรเพิ่มค่าบวกให้กับค่า tabindex เช่น tabindex=1 ลงในองค์ประกอบที่โฟกัสไม่ได้

ข้ามลิงก์

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

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

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

เช่นเดียวกับลิงก์ทั้งหมด ลิงก์ข้ามจำเป็นต้องมีบริบทเกี่ยวกับวัตถุประสงค์ของลิงก์ การเพิ่มวลี "ข้ามไปยังเนื้อหาหลัก" จะช่วยให้ผู้ใช้ทราบว่าลิงก์จะนำตนไปยังที่ใด มีตัวเลือกโค้ดมากมายให้เลือกเมื่อระบุบริบทเพิ่มเติมในลิงก์ เช่น aria-labelledby, aria-label หรือเพิ่มลงในเนื้อหาข้อความขององค์ประกอบ <a> ดังที่แสดงในตัวอย่าง

ดูผู้ใช้แป้นพิมพ์ไปยังส่วนต่างๆ โดยมีและไม่มีลิงก์ข้าม

สัญญาณบอกสถานะโฟกัส

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

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

การจัดรูปแบบเริ่มต้นของเบราว์เซอร์

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

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

ไม่แนะนำ — ไม่มีขอบ

a:focus {
  outline: none; /* don't do this! */
}

แนะนำ — ขอบที่มีสไตล์

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

รูปแบบที่กำหนดเอง

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

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

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

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

หมายเหตุ: ในกรณีนี้ อาจมีความจำเป็นที่ตัวบ่งชี้โฟกัสต้องเป็นไปตามข้อกำหนดคอนทราสต์สีขั้นต่ำเมื่อเทียบกับพื้นหลังด้วย ทั้งนี้ขึ้นอยู่กับลักษณะการจัดรูปแบบของตัวบ่งชี้โฟกัส ปฏิบัติตามอัตราส่วนคอนทราสต์ของสี 3:1 สำหรับตัวบ่งชี้โฟกัสทั้งหมดเพื่อให้เป็นไปตามลักษณะโฟกัส (ขั้นต่ำ) ของ WCAG 2.2

ดูสิ่งที่เกิดขึ้นเมื่อผู้ใช้แป้นพิมพ์กด Tab ผ่านองค์ประกอบโฟกัสที่มีการจัดรูปแบบแต่ละรายการ

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับโฟกัส

ตัวอย่างสไตล์ :focus CSS ใดที่เข้าถึงได้ง่ายที่สุดบนพื้นหลังสีขาว

outline: 0.5rem solid yellow;

ซึ่งไม่เป็นไปตามหลักเกณฑ์ความคมชัดของสี WCAG

background-color:black;

แม้ว่าการออกแบบนี้อาจเข้าถึงได้ แต่ก็ยังต้องมีการพิจารณาเพิ่มเติมเกี่ยวกับสีข้อความและตำแหน่งในเอกสาร

text-decoration: dotted underline 2px blue;

การออกแบบนี้เป็นตัวเลือกที่เข้าถึงได้ง่ายที่สุดในรายการนี้ แต่นี่ไม่ใช่ตัวเลือกการออกแบบที่เข้าถึงได้เพียงอย่างเดียว โปรดทราบว่าการออกแบบของคุณควรเป็นไปตามอัตราส่วนคอนทราสต์สี 3:1 ตามที่กำหนดโดย WCAG

outline: none; text-decoration:none; background:none;

ตัวบ่งชี้ภาพมีความสำคัญต่อผู้ใช้แป้นพิมพ์บางราย ใส่สไตล์สำหรับโฟกัสเสมอ

ลิงก์ข้ามมีไว้เพื่ออะไร

ช่วยให้ผู้ใช้แป้นพิมพ์ข้ามกลุ่มลิงก์ที่ซ้ำซ้อนหรือไม่มีประโยชน์ได้

ซึ่งจะเป็นประโยชน์อย่างยิ่งในเมนูการนำทางที่ยาว เมื่อผู้ใช้อาจไปที่หน้าที่ต้องการแล้ว

ช่วยให้ผู้ใช้แป้นพิมพ์ข้ามเนื้อหาที่ไม่น่าสนใจได้

เราไม่สามารถทราบได้ว่าเนื้อหาใดน่าสนใจหรือไม่น่าสนใจสำหรับผู้ใช้ วิธีนี้ไม่ใช่วิธีที่ดีในการกำหนดการใช้งานลิงก์ข้าม