แอคคอร์เดียนด้วยปุ่มและ aria-expanded

หีบเพลง คือชุดหัวข้อที่ขยายและยุบเพื่อแสดงเนื้อหา แต่ละส่วนสามารถเปิดได้อย่างอิสระ ซึ่งต่างจากแท็บ

ทำให้หัวข้อหีบเพลงทุกหัวข้อเป็น ปุ่มจริง ปุ่มสามารถรับโฟกัส ทำงานด้วย Enter และ Space และโปรแกรมอ่านหน้าจอประกาศให้ทราบได้โดยไม่ต้องทำอะไรเพิ่ม

โปรดระวังการใช้ div ที่คลิกได้เป็นหัวข้อ เพราะไม่สามารถรับโฟกัส ไม่ตอบสนองต่อแป้นพิมพ์ และไม่บอกเทคโนโลยีสิ่งอำนวยความสะดวกว่ามีหน้าที่อะไร

เพิ่ม aria-expanded ให้ปุ่ม เพื่อให้โปรแกรมอ่านหน้าจอประกาศว่ายุบหรือขยายอยู่ สถานะเดียวนี้เองที่ทำให้หีบเพลงเข้าถึงได้

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

ใช้ aria-controls กับปุ่ม โดยกำหนดค่าเป็น id ของแผงที่ปุ่มเปิด ผู้ใช้จะได้ทราบว่าหัวข้อนี้แสดงเนื้อหาใด

เมื่อปิดส่วนใด ให้กำหนดแอตทริบิวต์ hidden ให้แผงของส่วนนั้น การทำเช่นนี้จะนำแผงออกจากหน้าและจากต้นไม้การเข้าถึงจนกว่าจะเปิดอีกครั้ง

วางแต่ละปุ่มไว้ภายในหัวข้อจริง เช่น h3 จากนั้นผู้ใช้โปรแกรมอ่านหน้าจอจะข้ามจากส่วนหนึ่งไปยังอีกส่วนหนึ่งได้ด้วยการนำทางตามหัวข้อ

ส่วนแสดงและซ่อนเพียงส่วนเดียวคือ การเปิดเผยเนื้อหา ไม่ใช่ชุดแท็บ ต้องใช้เพียงปุ่มที่มี aria-expanded โดยไม่ต้องใช้บทบาท tablist หรือ tab

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

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

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