ผู้คนจำนวนมากใช้แป้นพิมพ์หรือซอฟต์แวร์/ฮาร์ดแวร์อื่นๆ ที่เลียนแบบฟังก์ชันการทำงานของแป้นพิมพ์ เช่น อุปกรณ์สวิตช์ เป็นวิธีหลักในการนำทาง ผู้ที่มีข้อจำกัดทางร่างกายชั่วคราว เช่น ข้อมือแพลงหรือความพิการทางการเคลื่อนไหวที่ดี เช่น อุโมงค์เส้นประสาท รวมถึงคนพิการ อาจเลือกใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของหน้าเว็บเนื่องจากความชื่นชอบส่วนตัว ประสิทธิภาพ หรือฮาร์ดแวร์ที่เสีย
ผู้ใช้ที่สายตาเลือนรางหรือตาบอดอาจใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ร่วมกับซอฟต์แวร์การขยายหรือซอฟต์แวร์โปรแกรมอ่านหน้าจอ อย่างไรก็ตาม พวกเขาอาจใช้คำสั่งแป้นพิมพ์ลัดในการไปยังส่วนต่างๆ ของหน้าจอ ซึ่งต่างจากผู้ใช้ที่มองเห็น
การรองรับการใช้งานแป้นพิมพ์สำหรับผู้พิการและสถานการณ์ต่างๆ เหล่านี้ถือเป็นสิ่งสำคัญ การช่วยเหลือพิเศษในส่วนแป้นพิมพ์ส่วนใหญ่อยู่ที่โฟกัส การโฟกัสหมายถึงองค์ประกอบบนหน้าจอ ที่ได้รับอินพุตจากแป้นพิมพ์
ในโมดูลนี้ เราจะเน้นไปที่โครงสร้าง HTML และการจัดรูปแบบ CSS สำหรับแป้นพิมพ์และองค์ประกอบที่โฟกัสได้ โมดูล JavaScript มีข้อมูลเพิ่มเติมเกี่ยวกับการจัดการโฟกัสและการกดแป้นพิมพ์สำหรับองค์ประกอบแบบอินเทอร์แอกทีฟ
โฟกัสคำสั่งซื้อ
องค์ประกอบที่ผู้ใช้แป้นพิมพ์นำทางไปได้เรียกว่าองค์ประกอบที่โฟกัสได้ ลำดับการโฟกัส หรือที่เรียกอีกอย่างว่าแท็บหรือลำดับการนำทาง คือลำดับที่องค์ประกอบจะได้รับการโฟกัส ลำดับการโฟกัสเริ่มต้นต้องเป็นตรรกะ ใช้งานง่าย และตรงกับลำดับภาพของหน้า
สำหรับภาษาส่วนใหญ่ ลำดับการโฟกัสจะเริ่มต้นที่ด้านบนของหน้าและสิ้นสุดที่ด้านล่าง โดยเลื่อนจากซ้ายไปขวา อย่างไรก็ตาม บางภาษาอ่านจากขวาไปซ้าย ดังนั้นภาษาหลักของหน้าเว็บจึงอาจมีลำดับการมุ่งเน้นที่แตกต่างออกไป
โดยค่าเริ่มต้น ลำดับการโฟกัสจะมีองค์ประกอบ HTML ที่โฟกัสได้อย่างเป็นธรรมชาติ เช่น ลิงก์ ช่องทำเครื่องหมาย และการป้อนข้อความ องค์ประกอบ HTML ที่โฟกัสได้เป็นธรรมชาติรวมถึงการรองรับลำดับแท็บในตัวและการจัดการกิจกรรมบนแป้นพิมพ์ขั้นพื้นฐาน
คุณอัปเดตลำดับการโฟกัสให้รวมองค์ประกอบที่ปกติแล้วจะไม่ได้รับการโฟกัสได้ เช่น องค์ประกอบ HTML แบบไม่โต้ตอบ คอมโพเนนต์ที่กำหนดเอง หรือองค์ประกอบที่มี ARIA ที่ลบล้างการเน้นความหมายตามธรรมชาติ
ดัชนีแท็บ
ลำดับการโฟกัสจะเริ่มต้นจากองค์ประกอบที่มีแอตทริบิวต์ tabindex เป็นบวก (หากมี) และย้ายจากจำนวนบวกน้อยที่สุดไปที่ใหญ่ที่สุด (เช่น 1, 2, 3) จากนั้นจะเดินทางผ่านองค์ประกอบที่มีดัชนีแท็บเป็น 0 ตามลำดับใน DOM องค์ประกอบที่มีดัชนีแท็บเป็นลบ จะถูกนำออกจากลำดับการโฟกัสตามปกติ
เมื่อใช้ tabindex ที่เป็น 0 (tabindex="0"
) กับองค์ประกอบที่ปกติแล้วจะโฟกัสไม่ได้ ระบบจะเพิ่มองค์ประกอบนั้นลงในลำดับการโฟกัสตามปกติของหน้าตามลักษณะที่ปรากฏใน DOM อย่างไรก็ตาม คุณต้องรองรับแป้นพิมพ์เพิ่มเติมเพื่อให้เข้าถึงองค์ประกอบ HTML ได้อย่างสมบูรณ์ ไม่เหมือนกับองค์ประกอบ HTML ที่โฟกัสได้ตามธรรมชาติ
ในทำนองเดียวกัน หากคุณมีองค์ประกอบที่โดยปกติโฟกัสได้แต่ไม่มีการใช้งาน เช่น ปุ่มที่ใช้งานไม่ได้จนกว่าจะกรอกข้อมูลในช่องอินพุต คุณควรเพิ่ม Tabindex (tabindex="-1"
) ลงในองค์ประกอบนี้ การเพิ่มสัญญาณลบ Tabindex ไปยังเทคโนโลยีความช่วยเหลือพิเศษและแป้นพิมพ์ว่าควรนำปุ่มนี้ออกจากลำดับการโฟกัสตามปกติ แต่ไม่ต้องกังวล คุณใช้ JavaScript เพื่อเพิ่มโฟกัสกลับไปที่องค์ประกอบได้เมื่อต้องการ
ในตัวอย่างนี้ แอตทริบิวต์ tabindex
ถูกเพิ่มลงในองค์ประกอบที่ไม่ได้รับการโฟกัสตามธรรมชาติ ลำดับขององค์ประกอบได้รับการปรับเปลี่ยนโดยใช้ tabindex
เพื่อแสดงถึงพลังที่สามารถมีได้ตามลำดับโฟกัส นี่เป็นตัวอย่างของสิ่งที่ไม่ควรทำ
![ลำดับโฟกัสใหม่จะแสดง HTML](https://web.dev/static/learn/accessibility/focus/image/new-focus-order-reflects-451c5c700368b.gif?authuser=5&hl=th)
ข้ามลิงก์
เว็บไซต์ส่วนใหญ่ในปัจจุบันมีรายการลิงก์เมนูจำนวนมากในส่วนหัวหลักของหน้าที่สอดคล้องกันในแต่ละหน้า วิธีนี้ดีสำหรับการนำทางทั่วไป แต่อาจทำให้ผู้ใช้ที่ใช้แป้นพิมพ์เพียงอย่างเดียวเข้าถึงเนื้อหาหลักของเว็บไซต์ได้ยากโดยไม่ต้องกด Tab หลายๆ ครั้ง
วิธีหนึ่งในการข้ามกลุ่มลิงก์ซ้ำซ้อนหรือกลุ่มลิงก์ที่ไม่เป็นประโยชน์คือการเพิ่มลิงก์ข้าม ลิงก์ข้ามคือลิงก์ Anchor ที่จะข้ามไปยังส่วนอื่นๆ ในหน้าเดียวกันโดยใช้รหัสของหัวข้อนั้น แทนที่จะส่งผู้ใช้ไปยังหน้าอื่นในเว็บไซต์หรือแหล่งข้อมูลภายนอก โดยทั่วไปลิงก์ข้ามจะถูกเพิ่มเป็นองค์ประกอบแรกที่โฟกัสได้ที่ผู้ใช้จะพบเมื่อมาถึงเว็บไซต์ และสามารถมองเห็นได้หรือซ่อนจนกว่าผู้ใช้จะแตะแท็บ โดยขึ้นอยู่กับสิ่งที่การออกแบบนั้นต้องการ
เมื่อผู้ใช้กดปุ่ม Tab และลิงก์ข้ามที่ใช้งานอยู่ทำงานอยู่ ระบบจะส่งโฟกัสของแป้นพิมพ์ไปยังลิงก์การข้าม ผู้ใช้สามารถคลิกลิงก์ข้ามและข้าม ส่วนส่วนหัวและการนำทางหลักได้ หากผู้ใช้เลือกที่จะไม่คลิกลิงก์ข้ามและไปที่แท็บ DOM ต่อไป ระบบจะส่งผู้ใช้ไปยังองค์ประกอบที่โฟกัสได้ถัดไป
เช่นเดียวกับลิงก์ทั้งหมด ลิงก์ข้ามต้องมีบริบทเกี่ยวกับวัตถุประสงค์ของลิงก์ด้วย การเพิ่มวลี "ข้ามไปที่เนื้อหาหลัก" จะช่วยให้ผู้ใช้ทราบว่า
ลิงก์จะนำพวกเขาไปที่ใด มีตัวเลือกโค้ดมากมายให้เลือกเมื่อให้บริบทเพิ่มเติมกับลิงก์ เช่น aria-labelledby, aria-label หรือการใส่โค้ดลงในเนื้อหาข้อความขององค์ประกอบ <a>
ดังที่แสดงในตัวอย่าง
![แสดงตัวอย่าง CodePen แบบโฟกัสแป้นพิมพ์](https://web.dev/static/learn/accessibility/focus/image/preview-codepen-keyboard-ae708e66afbe9.gif?authuser=5&hl=th)
สัญญาณบอกสถานะโฟกัส
อย่างที่เพิ่งเรียนไป ลำดับการโฟกัสคือคุณลักษณะสำคัญของการช่วยเหลือพิเศษด้วยแป้นพิมพ์ สิ่งสำคัญอีกอย่างคือต้องกำหนดสไตล์การมุ่งเน้นนั้น เพราะแม้ว่าลำดับการโฟกัสจะดีมาก แต่ผู้ใช้จะรู้ได้อย่างไรว่าตัวเองอยู่ตรงไหนในหน้าเว็บหากไม่มีการจัดรูปแบบที่เหมาะสม
ตัวบ่งชี้โฟกัสที่มองเห็นได้เป็นเครื่องมือสำคัญในการแจ้งให้ผู้ใช้ทราบว่าตนอยู่ที่จุดใดในหน้าเว็บ ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับผู้ใช้ของคุณที่เห็นเฉพาะแป้นพิมพ์
การจัดรูปแบบเริ่มต้นของเบราว์เซอร์
ปัจจุบันเว็บเบราว์เซอร์สมัยใหม่ทุกชนิดมีการจัดรูปแบบการแสดงผลเริ่มต้นแตกต่างกันซึ่งมีผลกับองค์ประกอบที่โฟกัสได้บนเว็บไซต์หรือแอปของคุณ ซึ่งบางรายการจะมองเห็นได้ง่ายกว่าเบราว์เซอร์อื่นๆ เมื่อผู้ใช้แท็บผ่านหน้า สไตล์นี้จะใช้เมื่อองค์ประกอบได้รับการโฟกัสของแป้นพิมพ์
หากคุณอนุญาตให้เบราว์เซอร์จัดการการจัดรูปแบบโฟกัส คุณจะต้องตรวจสอบโค้ดเพื่อยืนยันว่าธีมจะไม่ลบล้างการจัดรูปแบบเริ่มต้นของเบราว์เซอร์ การลบล้างมักจะเขียนเป็น "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](https://web.dev/static/learn/accessibility/focus/image/focus-style-demonstrated-9dce0f0e29ee1.gif?authuser=5&hl=th)
ไม่มีกฎเกี่ยวกับจำนวนรูปแบบตัวบ่งชี้โฟกัสที่คุณมีในหน้า 1 หน้า แต่คุณควรกำหนดให้เป็นจำนวนที่เหมาะสมเพื่อหลีกเลี่ยงความสับสนโดยไม่จำเป็น
สรุป
หากต้องการให้เว็บไซต์หรือแอปจะถือว่าเข้าถึงได้ ทุกอย่างที่เข้าถึงได้ด้วยเมาส์จะต้องเข้าถึงด้วยแป้นพิมพ์ด้วย โมดูลนี้เน้นไปที่มุมมองด้านภาพของการช่วยเหลือพิเศษด้วยแป้นพิมพ์ โดยเฉพาะลำดับโฟกัสและตัวบ่งชี้โฟกัส
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับ ARIA และ HTML
ตัวอย่างใดของสไตล์ CSS :focus
ที่เข้าถึงได้มากที่สุดบนพื้นหลังสีขาว
outline: 0.5rem solid yellow;
background-color:black;
text-decoration: dotted underline 2px blue;
outline: none; text-decoration:none; background:none;
วัตถุประสงค์ของลิงก์ข้ามคืออะไร