คอมโบบ็อกซ์และการเติมข้อความอัตโนมัติอย่างถูกต้อง

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

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

ใส่ role="combobox" ลงบนช่องกรอกข้อความโดยตรง เพื่อบอกเทคโนโลยีช่วยเหลือว่าการพิมพ์ที่นี่จะแสดงรายการตัวเลือก

ใช้ aria-controls บนช่องกรอก และกำหนดค่าเป็น id ของป๊อปอัป การทำเช่นนี้เชื่อมช่องกรอกเข้ากับรายการตัวเลือกที่เปิดและปิด

สลับค่า aria-expanded เป็น true เมื่อรายการแสดง และเป็น false เมื่อซ่อน โปรแกรมอ่านหน้าจอจะประกาศสถานะป๊อปอัปจากแอตทริบิวต์นี้

คอนเทนเนอร์คำแนะนำใช้ role="listbox" และคำแนะนำแต่ละรายการใช้ role="option" ทำให้ผู้ใช้ได้รายการที่คุ้นเคยและนำทางได้

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

ให้ aria-activedescendant บนช่องกรอกชี้ไปยัง id ของตัวเลือกที่ถูกเน้น นี่คือวิธีให้โปรแกรมอ่านหน้าจออ่านตัวเลือกที่ใช้งานอยู่โดยไม่ย้ายโฟกัสจริง

ลูกศรลงและลูกศรขึ้นใช้เลื่อนดูตัวเลือก Enter ใช้เลือกตัวเลือกที่ใช้งานอยู่ และ Escape ใช้ปิดป๊อปอัป ปุ่มเหล่านี้มาจาก APG โดยตรง

ตั้งค่า aria-selected="true" ให้ตัวเลือกที่ถูกเน้น และตั้งค่าเป็น false ให้ตัวเลือกที่เหลือ ในคอมโบบ็อกซ์ที่เลือกได้รายการเดียว ควรมีตัวเลือกที่ถูกเลือกเพียงหนึ่งรายการในแต่ละครั้ง

ใช้ aria-autocomplete เพื่ออธิบายว่าคำแนะนำปรากฏอย่างไร: ใช้ "list" สำหรับเมนูที่กรองแล้ว หรือ "both" เมื่อมีการเติมข้อความในช่องให้ด้วย

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

คอมโบบ็อกซ์ คือช่องกรอกข้อมูลคู่กับรายการตัวเลือก: เชื่อมทั้งสองด้วย aria-controls และ aria-expanded ให้โฟกัสอยู่ในช่อง และติดตามตัวเลือกที่ใช้งานอยู่ด้วย aria-activedescendant ✅