สถานะและคุณสมบัติ: ขยาย เลือกแล้ว ปิดใช้งาน

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

สถานะเปลี่ยนไปตามการโต้ตอบของผู้ใช้ เช่น expanded ที่สลับค่า ส่วนคุณสมบัติมักคงเดิม เช่น ธง required ของตัวควบคุม

aria-expanded บอกผู้ใช้ว่าบริเวณของตัวควบคุมเปิดอยู่หรือไม่ คุณต้องสลับค่านี้ใน JavaScript ทุกครั้งที่สถานะเปลี่ยน

aria-checked รายงานว่าเช็กบ็อกซ์หรือสวิตช์แบบกำหนดเองเปิดอยู่หรือไม่ ส่วนเช็กบ็อกซ์โดยธรรมชาติจะประกาศข้อมูลนี้ให้อยู่แล้ว

สำหรับตัวควบคุมแบบฟอร์มจริง แอตทริบิวต์ HTML disabled จะนำตัวควบคุมออกจากการโฟกัสและประกาศว่าไม่พร้อมใช้งานโดยอัตโนมัติ

aria-disabled ประกาศว่าตัวควบคุมแบบกำหนดเองถูกปิดใช้งาน แต่ไม่ได้ป้องกันการคลิก คุณยังต้องหยุดการทำงานนั้นในโค้ด

aria-selected ระบุรายการที่เลือกใน tablist, listbox หรือกริด เพื่อให้ผู้ใช้ทราบว่าตัวเลือกใดกำลังใช้งานอยู่

ปุ่มสลับใช้ aria-pressed เพื่อรายงานว่าเปิดหรือปิด เช่น ปุ่มตัวหนาที่สว่างค้างไว้ขณะที่ข้อความเป็นตัวหนา

ข้อผิดพลาดอันดับหนึ่งคือ สถานะเก่า หากภาพบนหน้าจอเปลี่ยน แต่ aria-expanded ยังคงเป็น false ผู้ใช้โปรแกรมอ่านหน้าจอจะได้ยินข้อมูลผิด

สถานะบางอย่างมีตัวเลขประกอบ แถบเลื่อนจะแสดงตำแหน่งด้วย aria-valuenow และใช้ aria-valuemin กับ aria-valuemax เพื่อระบุช่วง

คุณสมบัติของแบบฟอร์มที่มีประโยชน์สองอย่าง: aria-required ระบุช่องที่ต้องกรอก ส่วน aria-invalid ประกาศช่องที่ไม่ผ่านการตรวจสอบ

คุณสร้างปุ่มแอคคอร์เดียนแบบกำหนดเอง แอตทริบิวต์ใดรายงานว่าแผงของปุ่มเปิดอยู่หรือไม่

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