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