डेटा के लिए तालिकाएँ

उचित तालिका संरचना

<thead>, <tbody>, <th>, <td> को सही तरीके से उपयोग करें। <caption> या aria-label शामिल करें। Headers स्क्रीन रीडर को cells map करने में मदद करते हैं।

<table>
  <caption>Q1 Sales by Region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$50K</td>
      <td>12%</td>
    </tr>
  </tbody>
</table>

Scope attribute

Column headers के लिए scope="col" का उपयोग करें, row headers के लिए scope="row"। यह स्क्रीन रीडर को डेटा cells को उनके headers से map करने में मदद करता है।

Complex tables

Complex tables के लिए, table के ऊपर डेटा description पर विचार करें या डेटा को alternative format में provide करें (downloadable CSV)।