मार्कअप के साथ एचटीएमएल टेबल एक्सेसिबिलिटी कैसे सुधारें

वेब एक्सेसिबिलिटी वेब एप्लिकेशन को इस तरह से डिजाइन करने को संदर्भित करता है कि इसका उपयोग दृश्य विकलांग लोगों द्वारा आसानी से किया जा सकता है। इनमें से कुछ उपयोगकर्ता भरोसा करते हैं स्क्रीन रीडर वेब पृष्ठों में सामग्री को पढ़ने के लिए। स्क्रीन के पाठक पृष्ठ पर मौजूद कोड की व्याख्या करें तथा उपयोगकर्ता को इसकी सामग्री पढ़ें.

वेबपृष्ठों में संरचित तरीके से डेटा प्रदर्शित करने के लिए व्यापक रूप से उपयोग किया जाने वाला HTML तत्व है। इसका डिजाइन सरल लोगों से लेकर जटिल वाले, पंक्ति हेडर, मर्ज किए गए हेडर आदि के साथ पूरा होता है.

यदि एक टेबल को एक्सेसिबिलिटी को ध्यान में रखकर नहीं बनाया गया है, तो स्क्रीन रीडर्स के लिए यूजर्स के लिए कॉम्प्लेक्स टेबल में डेटा ट्रांसलेट करना मुश्किल होगा। इसलिए, सुलभता के लिए जटिल HTML तालिकाओं को अधिक आसानी से समझने योग्य बनाने के लिए, हमें करना चाहिए सुनिश्चित करें कि हेडर, कॉलम समूह, पंक्ति समूह आदि स्पष्ट रूप से परिभाषित हैं. हम नीचे देखेंगे कि यह कैसा है मार्कअप में हासिल किया.

स्कोप विशेषता

यहां तक कि एक साधारण तालिका के लिए भी

मार्कअप के साथ गुंजाइश = "col" सहायक तकनीक की पहचान करने में मदद करता है कि एक ही कॉलम में अनुसरण करने वाली कोशिकाएं छात्रों के नाम हैं.

इसी तरह, कोशिकाओं को पसंद करते हैं

युक्त गुंजाइश = "colgroup" उपयोगकर्ताओं को यह पहचानने में मदद करता है कि उन कोशिकाओं में जो स्तंभ समूह में फैले हुए हैं, उनका डेटा उस विशेष विषय के साथ जुड़ा हुआ है.

फिर वहाँ है

मार्कअप के साथ गुंजाइश = "पंक्ति" यह परिभाषित करता है कि कोशिकाएं एक ही पंक्ति में इसका अनुसरण करती हैं, जिसमें शामिल हैं “ग्रेड” उस विशेष छात्र के नाम के बारे में जानकारी.

पंक्ति समूह

अब हम एक और उदाहरण पर चलते हैं, इस उदाहरण में लगभग एक ही तालिका होगी, इसके अलावा हम पंक्ति और स्तंभ शीर्षों को स्वैप करेंगे, इसलिए हम पंक्ति समूहों के साथ काम कर पाएंगे.

टैग जो स्पष्ट रूप से हेडर को परिभाषित करता है, आप इसके साथ इसकी पहुंच में सुधार कर सकते हैं क्षेत्र कोशिकाओं में समान प्रकार के डेटा से उत्पन्न होने वाले किसी भी भ्रम को विशेषता और न दे.

  कर्मचारी का नाम  कर्मचारी कोड  परियोजना क्रमांक  कर्मचारी पदनाम  
  जॉन डो  32456  456,789  निदेशक  
  मरियम लुथर  78,902  456,789  उप निदेशक

गुंजाइश विशेषता क्या करती है? W3C के अनुसार:

दूसरे शब्दों में, यह हमें डेटा कोशिकाओं को उनके संबंधित हेडर कोशिकाओं के साथ जोड़ने में मदद करता है.

कृपया ध्यान दें कि उपरोक्त उदाहरण में आप स्विच कर सकते हैं

के लिये

. जब तक इसके क्षेत्र मूल्य है col, इसकी व्याख्या इसी कॉलम के हेडर के रूप में की जाएगी.

क्षेत्र विशेषता में इन चार मूल्यों में से कोई भी हो सकता है; col, पंक्ति, rowgroup, colgroup कॉलम के हेडर, पंक्ति के हेडर, कॉलम के हेडर के समूह और पंक्तियों के हेडर के समूह को संदर्भित करने के लिए.

जटिल टेबल्स

अब हम एक अधिक जटिल तालिका पर चलते हैं.

ऊपर एक तालिका है जो एक कक्षा में छात्रों को और उनके ग्रेड को तीन विषयों के लिए व्यावहारिक और सिद्धांत में सूचीबद्ध करती है.

यहाँ इसके लिए HTML कोड दिया गया है। तालिका का उपयोग किया है रोस्पेन तथा कॉल्सपन डेटा कोशिकाओं के लिए विलय हेडर बनाने के लिए.

  छात्र का नाम  जीवविज्ञान  रसायन विज्ञान  भौतिक विज्ञान  
  व्यावहारिक  सिद्धांत  व्यावहारिक  सिद्धांत  व्यावहारिक  सिद्धांत  
  जॉन डो  ए  ए+  बी  ए  ए  ए-  
  मरियम लुथर  ए  ए  सी  सी+  ए  ए-

उपरोक्त तालिका में, प्रत्येक डेटा सेल, जो तालिका कोशिकाओं में से प्रत्येक है ग्रेड प्रदर्शित करना, जानकारी के तीन टुकड़ों के साथ जुड़ा हुआ है:

यह ग्रेड किस छात्र का है?
यह ग्रेड किस विषय से संबंधित है?
क्या यह ग्रेड प्रैक्टिकल या थ्योरी सेक्शन के लिए है?

उन तीन सूचनाओं को तीन अलग-अलग प्रकार के हेडर सेल में परिभाषित किया गया है संरचनात्मक और नेत्रहीन:

छात्र का नाम
विषय नाम
प्रैक्टिकल या सिद्धांत

चलो पहुँच क्षमता के लिए एक ही परिभाषित करते हैं.

      छात्र का नाम  जीवविज्ञान  रसायन विज्ञान  भौतिक विज्ञान  
  व्यावहारिक  सिद्धांत  व्यावहारिक  सिद्धांत  व्यावहारिक  सिद्धांत  
  जॉन डो  ए  ए+  बी  ए  ए  ए-  
  मरियम लुथर  ए  ए  सी  सी+  ए  ए-

उपरोक्त मार्कअप में हमने जोड़ा है क्षेत्र ऐसी कोशिकाएं जिनमें डेटा कोशिकाओं के बारे में जानकारी होती है.

स्तंभ समूह

जीव विज्ञान, रसायन विज्ञान और भौतिकी कोशिकाओं को दो स्तंभों (थ्योरी और प्रैक्टिकल) के एक समूह के साथ जोड़ा जाना है। बस जोड़ रहे हैं कोलस्पैन = "2" स्तंभ समूह नहीं बनाता है, यह केवल इंगित करता है कि विशेष सेल दो कोशिकाओं के स्थान पर कब्जा करने के लिए है.

कॉलम समूह बनाने के लिए आपको उपयोग करना होगा colgroup और फिर जोड़ें अवधि यह इंगित करने के लिए विशेषता कि कॉलम समूह में कितने कॉलम शामिल हैं.

छात्र का नाम

जीवविज्ञान

जॉन डो

विषय		जॉन डो	मरियम लुथर
जीवविज्ञान	व्यावहारिक	ए	ए
जीवविज्ञान	सिद्धांत	ए+	ए
रसायन विज्ञान	व्यावहारिक	बी	सी
रसायन विज्ञान	सिद्धांत	ए	सी+
भौतिक विज्ञान	व्यावहारिक	ए	ए
भौतिक विज्ञान	सिद्धांत	ए-	ए-

अब जब हमारे पास काम करने के लिए हमारा नमूना है, तो हम पंक्ति समूहों को बनाकर शुरू करें जैसे हमने पिछले उदाहरण में कॉलम समूहों के लिए किया था.

हालाँकि, एक टैग का उपयोग करके पंक्ति समूह नहीं बनाए जा सकते हैं colgroup क्योंकि यहां नहीं है rowgroup तत्त्व.

HTML पंक्तियों को आम तौर पर उपयोग करके समूहीकृत किया जाता है , तथा तत्वों। एक एकल HTML

तत्व एक हो सकता है , एक और कई . हम कई का उपयोग करेंगे tbody पंक्ति समूहों को बनाने के लिए, और शीर्ष लेख कक्षों में संबंधित गुंजाइश जोड़ने के लिए हमारी तालिका में.

विषय		जॉन डो	मरियम लुथर
जीवविज्ञान	व्यावहारिक	ए	ए
जीवविज्ञान	सिद्धांत	ए+	ए
रसायन विज्ञान	व्यावहारिक	बी	सी
रसायन विज्ञान	सिद्धांत	ए	सी+
भौतिक विज्ञान	व्यावहारिक	ए	ए
भौतिक विज्ञान	सिद्धांत	ए-	ए-

हमने पंक्तियों को जोड़ा है “व्यावहारिक” तथा “सिद्धांत” सभी में tbody प्रत्येक में दो पंक्तियों के साथ पंक्ति समूह बनाना। हमने भी जोड़ा है गुंजाइश = "rowgroup" उन दो पंक्तियों के बारे में शीर्षकों की जानकारी रखने वाली कोशिकाएं (जो इस मामले में ग्रेड के विषय का नाम है).

अब पढ़ें: CSS के साथ समान कॉलम ऊंचाई