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

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

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

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

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

โฟกัสคำสั่งซื้อ

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

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

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

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

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

ดัชนีแท็บ

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

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

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

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

ดูแบบแท็บผู้ใช้แป้นพิมพ์ผ่าน CodePen HTML

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

ข้ามลิงก์

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

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

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

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

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

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

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

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

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

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

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

หากคุณอนุญาตให้เบราว์เซอร์จัดการการจัดรูปแบบโฟกัส คุณจะต้องตรวจสอบโค้ดเพื่อยืนยันว่าธีมจะไม่ลบล้างการจัดรูปแบบเริ่มต้นของเบราว์เซอร์ การลบล้างมักจะเขียนเป็น "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 สำหรับตัวบ่งชี้โฟกัสทั้งหมด ซึ่งเป็นไปตาม Focus Appearance (minimum) ของ WCAG 2.2

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

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

สรุป

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

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

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

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

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;

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

วัตถุประสงค์ของลิงก์ข้ามคืออะไร

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

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

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

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