เมนู แถบเมนู และปุ่มเมนู

เมนู ARIA คือรายการคำสั่งในรูปแบบแอป เช่น เมนู File หรือ Edit ในซอฟต์แวร์เดสก์ท็อป ไม่ใช่การนำทางหลักของเว็บไซต์ 🍔

ลิงก์ของหน้าควรอยู่ใน nav พร้อมจุดยึดปกติ ใช้บทบาทเมนูเฉพาะกับชุดคำสั่งจริงเท่านั้น มิฉะนั้นจะทำให้ผู้ใช้โปรแกรมอ่านหน้าจอสับสน

รูปแบบนี้ใช้ role="menu" กับคอนเทนเนอร์ ใช้ role="menuitem" กับคำสั่งแต่ละรายการ และใช้ role="menubar" กับแถบแนวนอนที่แสดงอยู่เสมอ

ปุ่มเมนู คือปุ่มจริงที่เปิดเมนู ให้เพิ่ม aria-haspopup="true" เพื่อให้ผู้ใช้ทราบว่าจะมีป๊อปอัปปรากฏ

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

เมื่อเมนูเปิด ให้ย้าย โฟกัส เข้าไปในเมนูและวางไว้ที่รายการเมนูแรก ปุ่มจะไม่ถือโฟกัสอีกต่อไปขณะที่เมนูทำงาน

ภายในเมนูแนวตั้ง ลูกศรขึ้นและลูกศรลง ใช้เลื่อนระหว่างรายการ ในแถบเมนู ลูกศรซ้ายและลูกศรขวาใช้เลื่อนไปตามแถบระดับบนสุด

ในแต่ละครั้งจะมีรายการเมนูเพียงรายการเดียวที่อยู่ในลำดับการกดแท็บ ด้วย roving tabindex รายการที่มีโฟกัสจะมี tabindex 0 ส่วนรายการที่เหลือมีค่า -1

Enter หรือ Space จะเรียกใช้คำสั่งที่มีโฟกัสและปิดเมนู เมนูควรปิดตัวเองหลังเลือกคำสั่ง

Escape ปิดเมนูโดยไม่ดำเนินการใด ๆ และส่งโฟกัสกลับไปยังปุ่มเมนู เพื่อให้ผู้ใช้กลับมายังจุดเดิมที่เริ่มต้น

เมนูย่อยแบบเลื่อนออกใช้ aria-haspopup กับ menuitem หลัก ลูกศรขวาใช้เปิดเมนูย่อย ส่วนลูกศรซ้ายใช้ปิดและย้อนกลับ

เมนูมีไว้สำหรับคำสั่ง ไม่ใช่ลิงก์ไปยังหน้าอื่น ให้เปิดเมนูด้วยปุ่ม haspopup เลื่อนโฟกัสเข้าไป นำทางด้วยปุ่มลูกศรและ roving tabindex และให้ปุ่ม Escape นำโฟกัสกลับ ✅