จัดกลุ่มช่องด้วย fieldset และ legend

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

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

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

ในตัวอย่างนี้ องค์ประกอบ ชุดฟิลด์ครอบตัวเลือกไว้ และคำอธิบายชุดใช้ตั้งคำถาม ปุ่มตัวเลือกแต่ละปุ่มยังคงมีป้ายกำกับของตนเอง

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

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

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

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

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

เส้นขอบเริ่มต้นอาจดูเก่า แต่คุณสามารถปรับรูปแบบใหม่ได้อย่างอิสระด้วย CSS ความหมายเชิงโครงสร้างยังคงเดิมไม่ว่าจะมีรูปลักษณ์อย่างไร

หากไม่สามารถใช้ชุดฟิลด์จริงได้ ให้ใช้บทบาท กลุ่มร่วมกับ aria-labelledby เพื่อจำลองการทำงานดังกล่าว แต่ควรเลือกใช้องค์ประกอบดั้งเดิมเมื่อทำได้

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