ตารางจัดวางคือกับดัก

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

โปรแกรมอ่านหน้าจอถือว่าทุก table เป็นข้อมูล โดยจะแจ้งแถว คอลัมน์ และจำนวนเซลล์ของ การจัดวาง ทำให้ผู้ใช้จมอยู่กับโครงสร้างที่ไม่มีความหมาย

ตารางจัดวางมักกระจายเนื้อหาไว้ในเซลล์ตามลำดับที่สับสน ลำดับที่มองเห็นกับ ลำดับการอ่าน จึงไม่ตรงกัน ทำให้ผู้ใช้หลงทาง

การจัดวางสมัยใหม่ควรใช้ CSS ใช้ กล่องยืดหยุ่นหรือระบบกริดเพื่อจัดหน้าเว็บ และใช้ table เฉพาะกับข้อมูลแบบตารางจริงเท่านั้น

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

สำหรับแถวและคอลัมน์ร่วมกัน CSS ระบบกริดมอบระบบจัดวางที่แท้จริง และแยกลักษณะที่หน้าเว็บปรากฏออกจากความหมายของมาร์กอัป

เมื่อใช้ CSS จัดวาง HTML ของคุณสามารถใช้ จุดสังเกตจริง เช่น header, nav และ main ผู้ใช้โปรแกรมอ่านหน้าจอจะได้แผนผังที่มีความหมายแทนจำนวนเซลล์

หากไม่สามารถนำตารางจัดวางแบบเก่าออกได้จริง ให้เพิ่ม role=presentation ซึ่งจะลบความหมายของตาราง เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกไม่สนใจกริดนั้น

ให้ถือว่า role=presentation เป็นเพียงผ้าพันแผลชั่วคราว วิธีแก้ที่แท้จริงคือย้ายไปใช้ CSS ซึ่งกำจัดปัญหาแทนที่จะซ่อนปัญหาไว้

ไม่มีคำบรรยาย ไม่มี th และมีเซลล์ที่เก็บทั้งส่วนของหน้าแทนค่าข้อมูล ล้วนเป็นสัญญาณเตือน รูปแบบนี้แทบจะบ่งชี้เสมอว่าเป็น ตารางจัดวางที่ควรปรับโครงสร้างใหม่

ลองถามคำถามง่าย ๆ กับ table ทุกอันว่า แสดงข้อมูลที่มีแถวและคอลัมน์ของค่าที่เกี่ยวข้องกันหรือไม่ หากไม่ใช่ นั่นคือตาราง จัดวาง และควรแทนที่ด้วย CSS

อย่าจัดวางหน้าเว็บด้วย table ใช้กล่องยืดหยุ่นหรือระบบกริด สงวน table ไว้สำหรับข้อมูลจริง และใช้ role=presentation เป็นเพียงทางแก้ชั่วคราวกับโค้ดเก่าเท่านั้น