GORAGOD.com

การพัฒนาเว็บไซต์ที่มีความเข้าถึงได้สำหรับทุกคนเป็นสิ่งสำคัญอย่างยิ่งในยุคปัจจุบัน เว็บแอคเซสซิบิลิตี้ (Web Accessibility) ช่วยให้ผู้ใช้ทุกคนสามารถเข้าถึงข้อมูลและฟังก์ชันต่าง ๆ บนเว็บไซต์ได้อย่างรวดเร็วและสะดวกสบาย โดยเฉพาะอย่างยิ่งในการสร้างและใช้งานตาราง ซึ่งเป็นเครื่องมือที่สำคัญในการแสดงข้อมูลต่าง ๆ ในรูปแบบที่เป็นระเบียบ และนับเป็นเทคนิคที่ดีในการสร้างเว็บไซต์ที่มีความเข้าถึงได้สำหรับทุกคน

ด้านล่างนี้เป็นเคล็ดลับในการใช้งานตารางที่รองรับเว็บแอคเซสซิบิลิตี้อย่างเต็มรูปแบบ

1. ใช้ <caption> เพื่อกำหนดหัวข้อของตาราง ซึ่ง caption จะใช้ในการอธิบายว่าเนื่้อหาของตารางเกี่ยวข้องกับอะไร
2. ใช้ <thead> <tbody> และ <tfoot> เพื่อแยกส่วนของตาราง ซึ่งการแบ่งตารางเป็นส่วนๆอย่างถูกต้อง ช่วยให้ผู้ใช้สามารถนำไปใช้งานได้อย่างมีระเบียบและง่ายต่อการเข้าถึงข้อมูล
3. ใช้ <th> สำหรับส่วนที่เป็นหัวข้อทั้งของคอลัมน์และแถว จะช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจว่าข้อมูลในคอลัมน์หรือแถวนั้นๆ เป็นเรื่องอะไร
4. ใช้ scope attribute ใน <th> เพื่อกำหนดขอบเขตของหัวข้อ
   • scope="col" สำหรับหัวข้อของคอลัมน์
   • scope="row" สำหรับหัวข้อของแถว
5. ใช้ headers attribute ใน <td> เพื่อเชื่อมโยงข้อมูลกับหัวข้อ การใช้ headers ช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจว่าข้อมูลนั้นเกี่ยวข้องกับหัวข้อใด
6. ใช้ scope="rowgroup" และ scope="colgroup" เมื่อมีการจัดกลุ่มแถวหรือคอลัมน์ เพื่อเพิ่มความเข้าใจในการอ่านและใช้งานข้อมูลที่ถูกจัดกลุ่ม
7. ใช้ summary attribute ใน <table> ช่วยให้ผู้ใช้ที่ใช้อุปกรณ์ช่วยเหลือเข้าใจโครงสร้างของตารางโดยรวม
8. การใช้สีและการเรียงลำดับข้อมูล
   • ไม่ควรใช้สีเพื่อแสดงความหมายหรือข้อมูลสำคัญ เพราะผู้ที่มีความบกพร่องทางการมองเห็น ไม่สามารถเห็นสีได้ หรือ อาจไม่สามารถแยกความแตกต่างของสีได้
   • จัดระเบียบและลำดับข้อมูลให้เหมาะสมจะทำให้เข้าใจเนื้อหาของตารางได้ง่าย

ตัวอย่างตารางที่รองรับ Web Accessibility

<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>

1. ในตัวอย่างนี้มีการกำหนด summary ซึ่งใช้เพื่ออธิบายเนื้อหาหรือการใช้งานของตารางให้ผู้ใช้ที่มีความจำเป็นในการใช้งานอุปกรณ์ช่วยเหลือเข้าใจเนื้อหาของตารางได้ง่ายขึ้น
2. มีการกำหนดหัวเรื่องของตาราง <cation> ซึ่งเป็น "ข้อมูลสมาชิก" เพื่อให้ผู้ใช้ทราบว่าตารางนี้เกี่ยวกับอะไร
3. <thead> ใช้สำหรับกำหนดส่วนหัวของตาราง เพื่อเก็บข้อมูลที่เป็นหัวเรื่องของตาราง
4. กำหนดหัวคอลัมน์ <th> โดยใช้ attribute scope="col" เพื่อระบุว่าเป็นหัวคอลัมน์
5. ใช้ <tbody> สำหรับกำหนดส่วนหลักของตารางซึ่งเก็บข้อมูลที่จะแสดง
6. ใช้ <tr> สำหรับกำหนดแถวของตาราง
7. ใช้ <td> สำหรับกำหนดข้อมูลภายในแต่ละเซลล์ของตาราง
8. ใช้ headers attribute เพื่อเชื่อมโยงข้อมูลในเซลล์กับหัวข้อของคอลัมน์ที่เกี่ยวข้อง เพื่อให้เห็นความสัมพันธ์ของข้อมูลนั้นกับหัวข้อ

เมื่อมีการอ่านตารางด้วยอุปกรณ์อ่านหน้าจอ เช่น screen reader หรืออุปกรณ์ช่วยเหลืออื่น ๆ ผู้ใช้จะได้รับข้อมูลจากตารางได้อย่างครบถ้วนและเข้าใจง่ายดังนี้

1. อุปกรณ์อ่านหน้าจอจะอ่านหัวข้อของตารางให้ผู้ใช้ได้ยิน ซึ่งในตัวอย่างนี้คือ "ข้อมูลสมาชิก" ซึ่งช่วยให้ผู้ใช้ทราบว่าตารางนี้เกี่ยวกับข้อมูลสมาชิกภายในชุมชน
2. อุปกรณ์อ่านหน้าจอจะอ่านชื่อคอลัมน์สั่วนหัวของตาราง เช่น "ลำดับ", "ชื่อ", "อายุ", และ "ที่อยู่" เพื่อให้ผู้ใช้ทราบว่าข้อมูลที่แสดงในแต่ละคอลัมน์คืออะไร
3. อุปกรณ์อ่านหน้าจอจะอ่านข้อมูลที่อยู่ในแต่ละเซลล์ของตาราง ซึ่งในตัวอย่างนี้เป็นข้อมูลเกี่ยวกับสมาชิกภายในชุมชน เช่น "ลำดับ 1, ชื่อ John Doe, อายุ 25, ที่อยู่ 123 ถนนสุขุมวิท กรุงเทพมหานคร. เป็นต้น

ซึ่งจะเห็นได้ว่าการใช้งานตารางที่รองรับ Web Accessibility อย่างถูกต้องจะช่วยให้ผู้ใช้งานที่มีความบกพร่อง สามารถเข้าถึงตารางและทำความเข้าใจเกี่ยวกับข้อมูลในตารางได้อย่างถูกต้อง