สถานะโฟกัสที่สามารถเข้าถึงได้: การออกแบบโฟกัสแป้นพิมพ์ที่มองเห็นได้
วิธีการออกแบบโฟกัสของแป้นพิมพ์ที่มองเห็นได้ซึ่งตรงตาม WCAG 2.2: สิ่งที่ 2.4.7 และ 2.4.13 ต้องการ วิธีการ :การทำงานที่มองเห็นได้โฟกัส และเคล็ดลับการออกแบบสำหรับวงแหวนโฟกัส
หลัก Takeaway
องค์ประกอบเชิงโต้ตอบทุกรายการจำเป็นต้องมีตัวบ่งชี้โฟกัสที่มองเห็นได้ชัดเจนสำหรับผู้ใช้แป้นพิมพ์ WCAG 2.2 ต้องใช้ที่ระดับ AA (2.4.7) หากต้องการตัวบ่งชี้ที่ชัดเจน ให้เล็งไปที่แนวทาง AAA ของ WCAG (2.4.13): อย่างน้อยพื้นที่ของโครงร่างพิกเซล CSS 2 พิกเซลรอบๆ องค์ประกอบโดยมีค่าคอนทราสต์ 3:1 ระหว่างสถานะโฟกัสและไม่ได้โฟกัส ใช้ :focus-visible เพื่อแสดงวงแหวนสำหรับผู้ใช้แป้นพิมพ์ โดยไม่ต้องแสดงวงแหวนทุกครั้งที่คลิกเมาส์
เหตุใดสถานะโฟกัสจึงมีความสำคัญ
ผู้ที่ใช้แป้นพิมพ์ สวิตช์อุปกรณ์ หรือแว่นขยายหน้าจอจะเลื่อนผ่านองค์ประกอบต่างๆ ของหน้าไปทีละองค์ประกอบ สัญลักษณ์แสดงโฟกัสเป็นวิธีเดียวที่พวกเขารู้ว่าตนอยู่ที่ไหน การนำโครงร่างเบราว์เซอร์ออกโดยไม่มีการเปลี่ยนใหม่ถือเป็นหนึ่งในความล้มเหลวในการเข้าถึงที่พบบ่อยที่สุด
สิ่งที่ WCAG 2.2 ต้องการ
เกณฑ์ความสำเร็จ 2.4.7 Focus Visible (ระดับ AA) กำหนดให้อินเทอร์เฟซที่ใช้แป้นพิมพ์ต้องมีโหมดที่มองเห็นตัวบ่งชี้โฟกัสได้ WCAG 2.2 เพิ่ม 2.4.13 ลักษณะโฟกัส (ระดับ AAA) ซึ่งอธิบายตัวบ่งชี้ที่แข็งแกร่ง: อย่างน้อยใหญ่เท่ากับพื้นที่ 2 CSS พิกเซลหนาปริมณฑลของส่วนประกอบ โดยมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1 ระหว่างสถานะที่โฟกัสและไม่ได้โฟกัส
:มองเห็นโฟกัสได้
MDN อธิบายว่า :focus-visible นำไปใช้เมื่อองค์ประกอบมีโฟกัส และเบราว์เซอร์ตัดสินใจว่าควรแสดงโฟกัสนั้นโดยใช้การวิเคราะห์พฤติกรรม โดยทั่วไปจะใช้กับการใช้แป้นพิมพ์ ซึ่งช่วยให้คุณแสดงวงแหวนโฟกัสที่ชัดเจนสำหรับผู้ใช้คีย์บอร์ด โดยไม่ต้องแสดงทุกครั้งที่มีคนคลิกปุ่มด้วยเมาส์ ใช้แทนการลบโครงร่าง
การออกแบบแหวน
คำแนะนำการปฏิบัติ:
- ใช้โครงร่างหรือวงแหวนที่มีการชดเชยเพื่อไม่ให้กลมกลืนกับองค์ประกอบ
- ตรวจสอบคอนทราสต์กับทุกพื้นหลังที่องค์ประกอบสามารถปรากฏได้ วงแหวนสองสีช่วยได้
- รักษาความสอดคล้องของส่วนประกอบต่างๆ ซึ่งกำหนดเป็นโทเค็นในระบบการออกแบบของคุณ
- อย่าพึ่งพาการเปลี่ยนสีเพียงเล็กน้อยเพียงอย่างเดียว
- ตรวจสอบให้แน่ใจว่าองค์ประกอบที่โฟกัสไม่ได้ซ่อนอยู่หลังส่วนหัวแบบติดหนึบ
โฟกัสและการเคลื่อนไหว
วงแหวนปรับโฟกัสอาจปรากฏขึ้นพร้อมกับการเปลี่ยนผ่านที่สั้นมาก แต่ควรให้ความรู้สึกทันที หลีกเลี่ยงภาพเคลื่อนไหวที่ทำให้วงแหวนล่าช้าหรือย้ายองค์ประกอบ และสำหรับองค์ประกอบที่วาดบนผืนผ้าใบแบบกำหนดเอง ตรวจสอบให้แน่ใจว่ายังมีองค์ประกอบที่สามารถโฟกัสได้จริงในหน้า เพื่อให้ผู้ใช้แป้นพิมพ์สามารถเข้าถึงได้
คีย์ Principles ที่ต้องจำ
- ต้องมีโฟกัสที่มองเห็นได้ที่ WCAG AA (2.4.7)
- 2.4.13 (AAA): พื้นที่ 2px-ปริมณฑล และการเปลี่ยนแปลงคอนทราสต์ 3:1
- ใช้ :focus-visible แทนที่จะลบโครงร่าง
- กำหนดวงแหวนโฟกัสเป็นโทเค็นการออกแบบ
- UI ที่เรนเดอร์ Canvas ต้องการองค์ประกอบที่สามารถโฟกัสได้จริง
คำถามที่พบบ่อย
แหล่งที่มา
- Understanding SC 2.4.7: Focus Visible — W3C ไหว
- Understanding SC 2.4.13: Focus Appearance — W3C ไหว
- :focus-visible — MDN เว็บเอกสาร