ข้อความช่วยเหลือและช่องที่จำเป็นต้องกรอกซึ่งประกาศให้ทราบ

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

ใส่ข้อความช่วยเหลือไว้ในองค์ประกอบหนึ่ง แล้วให้ aria-describedby ของอินพุตชี้ไปยัง id ขององค์ประกอบนั้น คำบอกใบ้จะถูกอ่านต่อจากป้ายกำกับ

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

aria-describedbyสามารถระบุ id หลายรายการโดยคั่นด้วยช่องว่างได้ จึงรวมคำบอกใบ้และข้อความข้อผิดพลาดไว้กับช่องเดียวกัน

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

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

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

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

สำหรับตัวควบคุมแบบกำหนดเองที่ไม่มีการตรวจสอบแบบดั้งเดิม aria-required ที่มีค่า true จะสื่อสถานะเดียวกันไปยังโปรแกรมอ่านหน้าจอ

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

แสดงคำบอกใบ้บนหน้าจอ ไม่ใช่แสดงเฉพาะแก่โปรแกรมอ่านหน้าจอ ทุกคนจะได้รับประโยชน์จากการเห็น กฎก่อนทำผิดพลาด

คุณจะเชื่อมข้อความช่วยเหลือเข้ากับช่องสำหรับโปรแกรมอ่านหน้าจอได้อย่างไร

เชื่อมคำบอกใบ้ด้วย aria-describedby และระบุช่องที่ต้องกรอกด้วย required ตอนนี้ผู้ใช้ทุกคนจะได้ยินชื่อ คำช่วยเหลือ และกฎต่าง ๆ ✅