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

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

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

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

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

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

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

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

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

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

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

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