HTML टेबल टैबुलर डेटा (संबंधित डेटा की पंक्तियाँ और स्तंभ) प्रस्तुत करते हैं — लेआउट नहीं। एक सुलभ टेबल सही संरचना का उपयोग करती है ताकि स्क्रीन रीडर प्रत्येक सेल के साथ हेडर की घोषणा कर सकें।
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
scope के साथ <th> — हेडर सेल को चिह्नित करता है। कॉलम हेडर के लिए 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> को कड़ाई से सच्चे टैबुलर डेटा के लिए आरक्षित रखें।