Table Caption & Scope

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

Table တွေမှာ <caption> နဲ့ scope ထည့်ပေးရင် accessibility ပိုကောင်းပါတယ်။ Screen reader က column/row relationship ကိုပိုနားလည်နိုင်ပါတယ်။

Data table ကိုလှအောင်မလုပ်ခင် အဓိပ္ပာယ်တည့်အောင်အရင်လုပ်ပါ။ UX ရဲ့အခြေခံက “လှတာထက် နားလည်ရတာ” ပါ။

html

<table border="1">
  <caption>Monthly Sales Report</caption>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Sales</th>
  </tr>
  <tr>
    <th scope="row">January</th>
    <td>$5,000</td>
  </tr>
</table>

You should see

Caption ပါတဲ့ accessible table တစ်ခုပေါ်လာပါမယ်။