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

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

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

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

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

ลำดับโฟกัส

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

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

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

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

ดัชนีแท็บ

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

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

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

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

ลำดับโฟกัสใหม่จะแสดง HTML
ดูแบบแท็บของผู้ใช้แป้นพิมพ์ผ่าน HTML ของ CodePen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม่มีกฎเกี่ยวกับจำนวนรูปแบบตัวบ่งชี้โฟกัสที่คุณมีใน 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;
สัญญาณบอกสถานะภาพมีความสำคัญสำหรับผู้ใช้แป้นพิมพ์บางราย ใส่รูปแบบเพื่อให้โฟกัสเสมอ

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

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