HTML तालिकाहरूले तालिका डेटा (संबंधित डेटाको पङ्क्तिहरू र स्तम्भहरू) प्रस्तुत गर्छन् — लेआउटको लागि होइन। एक सुलभ तालिकाले उचित संरचना प्रयोग गर्छ ताकि स्क्रीन रीडरहरूले प्रत्येक कक्षसँग हेडरहरू घोषणा गर्न सक्छन्।
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> साथ scope — हेडर कक्षहरू चिन्ह लगाउँछ। स्तम्भ हेडरहरूको लागि scope="col", पङ्क्ति हेडरहरूको लागि scope="row"। स्क्रीन रीडरहरूले त्यसपछी "North, Revenue: $12,000" घोषणा गर्छन् संदर्भ बिना कक्षहरू पढेको सट्टा।<caption> — सम्पूर्ण तालिकाको लागि एक शीर्षक, <table> को पहिलो सन्तान; प्रयोगकर्ताहरूलाई अभिमुख गर्न पढिन्छ।<thead>/<tbody>/<tfoot> — हेडर, बडी, र सारांश पङ्क्तिहरूलाई समूहबद्ध गर्नुहोस्; नेभिगेसनमा मद्दत गर्छ र प्रिन्ट गर्दा हेडरलाई दोहोर्याउन दिन्छ।<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
लेआउट तालिकाहरूले स्क्रीन रीडरहरूलाई भ्रमित गर्छन् (तिनीहरूले डेटा-तालिका शब्दार्थ घोषणा गर्छन्) र लचकदार छैनन्। पृष्ठ लेआउटको लागि CSS Grid/Flexbox प्रयोग गर्नुहोस्।
उचित तालिका शब्दार्थ (<th scope>, <caption>, सेक्शनिङ) वो हो जसले डेटा तालिकाहरूलाई स्क्रीन रीडर प्रयोगकर्ताहरूको लागि उपयोगी बनाउँछ — तिनीहरूले प्रत्येक मान यसको पङ्क्ति र स्तम्भ हेडरहरूसँग जोड्छन्।
<table> लाई कडाईसँग असल तालिका डेटाको लागि आरक्षण गर्नुहोस्।