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

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

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

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

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

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

ลำดับโฟกัส

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

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

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

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

Tabindex

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

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

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

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

ข้ามลิงก์

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

วิธีหนึ่งในการข้ามกลุ่มลิงก์ที่ซ้ำซ้อนหรือไม่มีประโยชน์คือการเพิ่มลิงก์ข้าม ลิงก์ข้ามคือลิงก์ Anchor ที่ข้ามไปยังส่วนอื่นๆ ในหน้าเดียวกันโดยใช้รหัสของส่วนนั้นแทนการส่งผู้ใช้ไปยังหน้าอื่นในเว็บไซต์หรือแหล่งข้อมูลภายนอก โดยทั่วไปแล้ว ลิงก์ข้ามจะเพิ่มเป็นองค์ประกอบแรกที่โฟกัสได้ซึ่งผู้ใช้จะพบเมื่อมาถึงเว็บไซต์ และสามารถแสดงหรือซ่อนจนกว่าผู้ใช้จะกด 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 */
}

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

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

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

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

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

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

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

ทดสอบความรู้ของคุณเกี่ยวกับ ARIA และ HTML