HTML Academy · पाठ

तालिका अभिगम्यता: scope, summary, caption

स्क्रीन रीडर सहायता के लिए caption और scope एट्रिब्यूट जोड़ें।

पाठ 4, कुल 4 में से14 चरण

तालिका अभिगम्यता: scope, summary, caption, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

तालिका की सुगम्यता क्यों महत्वपूर्ण है

स्क्रीन रीडर का उपयोग करने वाले लोग डेटा तालिकाओं में कक्ष-दर-कक्ष नेविगेट करते हैं — उन्हें पढ़े जाने वाले प्रत्येक डेटा-कक्ष के लिए शीर्षलेख का संदर्भ चाहिए।

उचित मार्कअप के बिना, स्क्रीन रीडर स्तंभ या पंक्ति के संदर्भ के बिना केवल कच्चे मान पढ़ते हैं
सुगम तालिकाएँ सभी के लिए डेटा को समझने योग्य बनाती हैं

caption तत्व

<caption> तालिका के लिए दिखाई देने वाला शीर्षक देता है:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

caption की शैली

CSS से caption की शैली और स्थिति निर्धारित करें:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

th पर scope विशेषता

scope विशेषता स्क्रीन रीडर को बताती है कि कोई शीर्षलेख किन कक्षों पर लागू होता है:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

scope के मान

scope विशेषता के मान:

col — शीर्षलेख उसी स्तंभ के कक्षों पर लागू होता है
row — शीर्षलेख उसी पंक्ति के कक्षों पर लागू होता है
colgroup — शीर्षलेख किसी स्तंभ-समूह के कक्षों पर लागू होता है
rowgroup — शीर्षलेख किसी पंक्ति-समूह के कक्षों पर लागू होता है (tbody/thead)

जटिल शीर्षलेखों के लिए scope

फैले हुए शीर्षलेखों में colgroup या rowgroup scope का उपयोग करें:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

td पर headers विशेषता

बहुत जटिल तालिकाओं के लिए, कक्षों को उनके शीर्षलेखों से स्पष्ट रूप से जोड़ने हेतु headers का उपयोग करें:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

scope बनाम headers का उपयोग कब करें

दिशा-निर्देश:

एक-पंक्ति वाले शीर्षलेखों की सरल तालिकाएँ → scope="col" और scope="row" का उपयोग करें
जटिल, फैले हुए शीर्षलेख → ID संदर्भों वाली headers विशेषता का उपयोग करें
WCAG 1.3.1 के अनुसार तालिका के शीर्षलेखों को उनके डेटा-कक्षों से प्रोग्राम के माध्यम से संबद्ध करना आवश्यक है

तालिका पर aria-label

जब caption को दृश्य रूप से दिखाना उचित न हो, तो aria-label का उपयोग करें:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

तालिका की सुगम्यता का परीक्षण

अपनी तालिका की सुगम्यता की जाँच कैसे करें:

स्क्रीन रीडर के Tables पैनल का उपयोग करें (VoiceOver, NVDA)
axe DevTools ब्राउज़र एक्सटेंशन स्थापित करें
अपने पृष्ठ के URL पर pa11y CLI चलाएँ
W3C मार्कअप वैलिडेटर गायब caption का पता लगाता है

summary विशेषता (अब अप्रचलित)

जटिल तालिकाओं में स्क्रीन रीडर के लिए summary विशेषता का उपयोग किया जाता था — अब यह HTML5 में अप्रचलित है:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

सुगम तालिका की जाँच-सूची

डेटा तालिकाओं के लिए सुगम्यता जाँच-सूची:

तालिका को लेबल करने के लिए <caption> का उपयोग करें
सभी शीर्षलेख-कक्षों के लिए <th> का उपयोग करें
सभी <th> तत्वों में scope जोड़ें
संरचना के लिए <thead>, <tbody>, <tfoot> का उपयोग करें
जटिल तालिकाओं के लिए id + headers का उपयोग करें

त्वरित जाँच

पूरे स्तंभ के शीर्षलेख वाले th के लिए आपको scope का कौन-सा मान उपयोग करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: तालिका की सुगम्यता

सुगम तालिका की आवश्यक बातें:

<caption> — दिखाई देने वाला तालिका-शीर्षक, जिसे स्क्रीन रीडर बोलकर बताते हैं
scope="col" — स्तंभ शीर्षलेख
scope="row" — पंक्ति शीर्षलेख
scope="colgroup/rowgroup" — फैले हुए शीर्षलेख
id + headers — जटिल, बहु-स्तरीय शीर्षलेखों के लिए
axe, pa11y या VoiceOver से परीक्षण करें

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “तालिका अभिगम्यता: scope, summary, caption” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “तालिका अभिगम्यता: scope, summary, caption” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“तालिका अभिगम्यता: scope, summary, caption” में मैं क्या सीखूँगा?

स्क्रीन रीडर सहायता के लिए caption और scope एट्रिब्यूट जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“तालिका अभिगम्यता: scope, summary, caption” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

table, tr, td और th
thead, tbody, tfoot संरचना
स्पैनिंग के लिए colspan और rowspan
तालिका अभिगम्यता: scope, summary, caption

← HTML Academy पर वापस जाएँ