การใช้งานตารางที่รองรับ Web Accessibility
ด้านล่างนี้เป็นเคล็ดลับในการใช้งานตารางที่รองรับเว็บแอคเซสซิบิลิตี้อย่างเต็มรูปแบบ
- ใช้ <caption> เพื่อกำหนดหัวข้อของตาราง ซึ่ง caption จะใช้ในการอธิบายว่าเนื่้อหาของตารางเกี่ยวข้องกับอะไร
- ใช้ <thead> <tbody> และ <tfoot> เพื่อแยกส่วนของตาราง ซึ่งการแบ่งตารางเป็นส่วนๆอย่างถูกต้อง ช่วยให้ผู้ใช้สามารถนำไปใช้งานได้อย่างมีระเบียบและง่ายต่อการเข้าถึงข้อมูล
- ใช้ <th> สำหรับส่วนที่เป็นหัวข้อทั้งของคอลัมน์และแถว จะช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจว่าข้อมูลในคอลัมน์หรือแถวนั้นๆ เป็นเรื่องอะไร
- ใช้ scope attribute ใน <th> เพื่อกำหนดขอบเขตของหัวข้อ
- scope="col" สำหรับหัวข้อของคอลัมน์
- scope="row" สำหรับหัวข้อของแถว
- ใช้ headers attribute ใน <td> เพื่อเชื่อมโยงข้อมูลกับหัวข้อ การใช้ headers ช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจว่าข้อมูลนั้นเกี่ยวข้องกับหัวข้อใด
- ใช้ scope="rowgroup" และ scope="colgroup" เมื่อมีการจัดกลุ่มแถวหรือคอลัมน์ เพื่อเพิ่มความเข้าใจในการอ่านและใช้งานข้อมูลที่ถูกจัดกลุ่ม
- ใช้ summary attribute ใน <table> ช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจโครงสร้างของตารางโดยรวม
- การใช้สีและการเรียงลำดับข้อมูล
- ไม่ควรใช้สีเพื่อแสดงความหมายหรือข้อมูลสำคัญ เพราะผู้ที่มีความบกพร่องทางการมองเห็น ไม่สามารถเห็นสีได้ หรือ อาจไม่สามารถแยกความแตกต่างของสีได้
- จัดระเบียบและลำดับข้อมูลให้เหมาะสมจะทำให้เข้าใจเนื้อหาของตารางได้ง่าย
<table summary="ตารางแสดงข้อมูลสมาชิกภายในชุมชน">
<caption>ข้อมูลสมาชิก</caption>
<thead>
<tr>
<th scope="col">ลำดับ</th>
<th scope="col">ชื่อ</th>
<th scope="col">อายุ</th>
<th scope="col">ที่อยู่</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="ลำดับ">1</td>
<td headers="ชื่อ">John Doe</td>
<td headers="อายุ">25</td>
<td headers="ที่อยู่">123 ถนนสุขุมวิท, กรุงเทพมหานคร</td>
</tr>
<tr>
<td headers="ลำดับ">2</td>
<td headers="ชื่อ">Jane Smith</td>
<td headers="อายุ">30</td>
<td headers="ที่อยู่">456 ถนนเพชรบุรี, กรุงเทพมหานคร</td>
</tr>
</tbody>
</table>
- ในตัวอย่างนี้มีการกำหนด summary ซึ่งใช้เพื่ออธิบายเนื้อหาหรือการใช้งานของตารางให้ผู้ใช้ที่มีความจำเป็นในการใช้งานอุปกรณ์ช่วยเหลือเข้าใจเนื้อหาของตารางได้ง่ายขึ้น
- มีการกำหนดหัวเรื่องของตาราง <cation> ซึ่งเป็น "ข้อมูลสมาชิก" เพื่อให้ผู้ใช้ทราบว่าตารางนี้เกี่ยวกับอะไร
- <thead> ใช้สำหรับกำหนดส่วนหัวของตาราง เพื่อเก็บข้อมูลที่เป็นหัวเรื่องของตาราง
- กำหนดหัวคอลัมน์ <th> โดยใช้ attribute scope="col" เพื่อระบุว่าเป็นหัวคอลัมน์
- ใช้ <tbody> สำหรับกำหนดส่วนหลักของตารางซึ่งเก็บข้อมูลที่จะแสดง
- ใช้ <tr> สำหรับกำหนดแถวของตาราง
- ใช้ <td> สำหรับกำหนดข้อมูลภายในแต่ละเซลล์ของตาราง
- ใช้ headers attribute เพื่อเชื่อมโยงข้อมูลในเซลล์กับหัวข้อของคอลัมน์ที่เกี่ยวข้อง เพื่อให้เห็นความสัมพันธ์ของข้อมูลนั้นกับหัวข้อ
- อุปกรณ์อ่านหน้าจอจะอ่านหัวข้อของตารางให้ผู้ใช้ได้ยิน ซึ่งในตัวอย่างนี้คือ "ข้อมูลสมาชิก" ซึ่งช่วยให้ผู้ใช้ทราบว่าตารางนี้เกี่ยวกับข้อมูลสมาชิกภายในชุมชน
- อุปกรณ์อ่านหน้าจอจะอ่านชื่อคอลัมน์สั่วนหัวของตาราง เช่น "ลำดับ", "ชื่อ", "อายุ", และ "ที่อยู่" เพื่อให้ผู้ใช้ทราบว่าข้อมูลที่แสดงในแต่ละคอลัมน์คืออะไร
- อุปกรณ์อ่านหน้าจอจะอ่านข้อมูลที่อยู่ในแต่ละเซลล์ของตาราง ซึ่งในตัวอย่างนี้เป็นข้อมูลเกี่ยวกับสมาชิกภายในชุมชน เช่น "ลำดับ 1, ชื่อ John Doe, อายุ 25, ที่อยู่ 123 ถนนสุขุมวิท กรุงเทพมหานคร. เป็นต้น