การช่วยการเข้าถึงสำหรับวิดเจ็ตเติมข้อความอัตโนมัติ

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

ครอบช่องป้อนข้อมูลด้วย div ที่มี role="combobox" วิธีนี้ประกาศให้เทคโนโลยีสิ่งอำนวยความสะดวกทราบว่าช่องป้อนข้อมูลมีรายการป๊อปอัปที่เชื่อมโยงอยู่ ตั้งค่า aria-expanded={isOpen} บนส่วนครอบนี้เพื่อบอกโปรแกรมอ่านหน้าจอว่ารายการคำแนะนำกำลังแสดงหรือซ่อนอยู่

องค์ประกอบช่องป้อนข้อมูลควรมีสิ่งต่อไปนี้: aria-autocomplete="list" (ป๊อปอัปมีรายการคำแนะนำ), aria-haspopup="listbox" (การคลิกหรือพิมพ์จะเปิดกล่องรายการ), aria-expanded={isOpen} และ aria-controls="suggestion-list-id" ซึ่งชี้ไปยัง id ขององค์ประกอบรายการแบบเลื่อนลง

aria-activedescendant บนช่องป้อนข้อมูลจะชี้ไปยัง id ของตัวเลือกที่กำลังไฮไลต์อยู่ เมื่อ selectedIndex เป็น 0 ให้ตั้งค่า aria-activedescendant="option-0" โปรแกรมอ่านหน้าจอใช้ข้อมูลนี้เพื่อประกาศว่ารายการใดกำลังใช้งานอยู่ โดยไม่ต้องย้ายโฟกัสจริงออกจากช่องป้อนข้อมูล เมื่อไม่มีรายการที่เลือกอยู่ ให้ลบแอตทริบิวต์นี้หรือตั้งค่าเป็นสตริงว่าง

องค์ประกอบภาชนะของรายการแบบเลื่อนลงควรมี role="listbox" และ id ที่ไม่ซ้ำกันและตรงกับ aria-controls ของช่องป้อนข้อมูล บทบาทนี้บอกต้นไม้การเข้าถึงว่าองค์ประกอบนี้เป็นรายการตัวเลือกที่เลือกได้ กล่องรายการจะได้รับโฟกัสทางอ้อมผ่าน aria-activedescendant บนช่องป้อนข้อมูล

รายการคำแนะนำทุกรายการควรมี role="option" และ id ที่ไม่ซ้ำกัน เช่น option-0, option-1 เป็นต้น เพิ่ม aria-selected={index === selectedIndex} เพื่อระบุว่ารายการใดกำลังไฮไลต์อยู่ โปรแกรมอ่านหน้าจอจะประกาศทั้งเนื้อหาของตัวเลือกและสถานะการเลือกเมื่อผู้ใช้นำทางด้วยปุ่มลูกศร

เมื่อผู้ใช้กด ArrowDown และ aria-activedescendant เปลี่ยนเป็น option-1 VoiceOver จะประกาศข้อความประมาณว่า "ฮุกของ React, 2 จาก 5" โปรแกรมอ่านหน้าจอจะอ่านข้อความของตัวเลือกและตำแหน่งของตัวเลือกในรายการโดยอัตโนมัติจากมาร์กอัป ARIA ไม่จำเป็นต้องมีพื้นที่ประกาศเพิ่มเติมสำหรับการนำทางด้วยแป้นพิมพ์

ทดสอบด้วย VoiceOver บน macOS (กด Cmd+F5 เพื่อเปิดหรือปิด) และ NVDA บน Windows (ดาวน์โหลดได้ฟรี) ไปยังช่องป้อนข้อมูลแล้วเริ่มพิมพ์ ตรวจสอบว่าโปรแกรมอ่านหน้าจอประกาศบทบาทกล่องเลือก จำนวนผลลัพธ์ที่พบ และตัวเลือกแต่ละรายการขณะที่คุณเลื่อนด้วยปุ่มลูกศร เปรียบเทียบพฤติกรรมกับตัวอย่างจากคู่มือแนวทางการเขียน WAI-ARIA

เมื่อคำแนะนำโหลดแบบไม่พร้อมกัน ให้เพิ่ม div ที่ซ่อนจากสายตาและมี aria-live="polite" กับ aria-atomic="true" อัปเดตเนื้อหาข้อความเมื่อการโหลดเสร็จสิ้น เช่น "พบผลลัพธ์ 5 รายการ" หรือ "ไม่พบผลลัพธ์" โปรแกรมอ่านหน้าจอจะประกาศข้อความนี้หลังจากอ่านเสียงปัจจุบันจบ เพื่อให้ผู้ใช้รับทราบข้อมูลโดยไม่ถูกรบกวน

คู่มือแนวทางการเขียน WAI-ARIA (APG) ที่ w3.org/WAI/ARIA/apg มีหน้ารูปแบบกล่องเลือกโดยเฉพาะ พร้อมตัวอย่างโค้ดที่ใช้งานได้และข้อกำหนดโดยละเอียดเกี่ยวกับการโต้ตอบด้วยแป้นพิมพ์ โปรดอ้างอิง APG เสมอเมื่อสร้างวิดเจ็ตโต้ตอบ เช่น ระบบเติมข้อความอัตโนมัติ กล่องโต้ตอบ หรือแท็บ เพื่อให้เป็นไปตามข้อกำหนดด้านการเข้าถึงอย่างครบถ้วน

กำหนด aria-label ให้ช่องป้อนข้อมูลหากไม่มีองค์ประกอบป้ายกำกับที่มองเห็นได้: aria-label="Search suggestions" อย่าใช้ placeholder เป็นป้ายกำกับเพียงอย่างเดียว เพราะข้อความตัวแทนจะหายไปเมื่อผู้ใช้เริ่มพิมพ์ และโปรแกรมอ่านหน้าจอทุกชนิดอาจไม่ได้ประกาศข้อความนี้อย่างสม่ำเสมอ องค์ประกอบ label ที่มองเห็นได้และมี htmlFor เป็นตัวเลือกที่ดีที่สุดเสมอ

แอตทริบิวต์ aria-activedescendant บนช่องป้อนข้อมูลของระบบเติมข้อความอัตโนมัติมีจุดประสงค์ใด

ใช้ role="combobox" บนส่วนครอบ ใช้ aria-autocomplete="list" บนช่องป้อนข้อมูล และใช้ aria-expanded, aria-controls กับ aria-activedescendant เพื่อเชื่อมช่องป้อนข้อมูลกับรายการคำแนะนำ ตัวเลือกแต่ละรายการต้องมี role="option", id ที่ไม่ซ้ำกัน และ aria-selected เพิ่มพื้นที่ aria-live สำหรับประกาศจำนวนผลลัพธ์แบบไม่พร้อมกัน