वेब पेज छिपाने के तरीके

वेब डेवलपर्स को कई कारणों से वेब पेज तत्वों को छिपाना पड़ता है। उदाहरण के लिए, एक बटन है जो एक डेस्कटॉप डिवाइस का उपयोग करते समय मोबाइल डिवाइस पर साइट को देखते हुए, और छिपा हुआ होना चाहिए। या, उदाहरण के लिए, एक निश्चित नेविगेशन तत्व है जिसे मोबाइल ब्राउज़र में छिपाया जाना चाहिए और डेस्कटॉप में प्रदर्शित किया जाना चाहिए। पृष्ठ पर अदृश्य होने वाले तत्व विभिन्न राज्यों में हो सकते हैं:

• एक तत्व पूरी तरह से अदृश्य है और, इसके अलावा, दस्तावेज़ स्ट्रीम से हटा दिया गया है।
• तत्व को आंखों के माध्यम से नहीं देखा जा सकता है, लेकिन यह दस्तावेज़ में मौजूद है और स्क्रीन रीडर जैसी सहायक तकनीकों के लिए उपलब्ध है।
• आइटम दिखाई देता है लेकिन स्क्रीन पाठकों से छिपा हुआ है।

लेख, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, HTML और CSS का उपयोग करके वेब पेजों के तत्वों को छिपाने के तरीकों के विश्लेषण के लिए समर्पित है। यहां, पृष्ठों पर डेटा छिपाने के लिए प्रौद्योगिकियों का उपयोग करने के लिए सामग्री, एनीमेशन और परिदृश्यों की पहुंच जैसे मुद्दों पर चर्चा की जाएगी।

HTML5 छिपी विशेषता

Hidden एक तार्किक HTML विशेषता है जो उन तत्वों को छुपाता है जिन्हें यह सौंपा गया है। जब ब्राउज़र पृष्ठ को लोड करता है, तो यह hidden विशेषता के साथ तत्वों को प्रदर्शित नहीं करेगा, सिवाय इसके कि जब तत्वों की दृश्यता सीएसएस का उपयोग करके मैन्युअल रूप से सक्षम हो। इस विशेषता का प्रभाव display: none को लागू करने के समान है display: none सीएसएस तत्व के लिए display: none नियम display: none है।

निम्नलिखित उदाहरण पर विचार करें:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

एक मार्कअप है जो शीर्षक, छवि और विवरण सेट करता है। छवि केवल तभी प्रदर्शित होनी चाहिए जब व्यूपोर्ट की चौड़ाई 400px से अधिक हो। मैंने <img> तत्व में hidden विशेषता को जोड़ा है।

सीएसएस में, मैंने तत्व को प्रदर्शित करने के लिए hidden विशेषता का उपयोग किया केवल अगर पृष्ठ दृश्य क्षेत्र सही आकार था।


वेब पेज स्निपेट

यहां सीएसएस कोड का उपयोग किया गया है:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ यहाँ CodePen पर इस पृष्ठ का एक उदाहरण दिया गया है

यहां आपके सामने एक प्रश्न हो सकता है कि केवल display: none उपयोग क्यों न करें display: none । अच्छा सवाल है। जब एक छवि चयनकर्ता को इसकी hidden विशेषता के माध्यम से बुलाया जाता है, तो हम यह सुनिश्चित कर सकते हैं कि भले ही किसी कारण से सीएसएस कोड लोड नहीं हुआ हो, तत्व छिपा हुआ होगा।

IddenHidden विशेषता और सामग्री पहुंच

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

सीएसएस प्रदर्शन संपत्ति

वेब पेज के प्रत्येक तत्व में डिफ़ॉल्ट रूप से एक निश्चित display प्रॉपर्टी वैल्यू होती है। यह inline-block , block , table आदि हो सकता है। display संपत्ति का उपयोग करके किसी तत्व को छिपाने के लिए, हम display: none उपयोग कर सकते हैं display: none निर्माण display: none । यदि कोई तत्व इस निर्माण का उपयोग करके छिपा हुआ है, तो इसके सभी वंशज इसके साथ छिपे होंगे।

कल्पना करें कि हम पिछले उदाहरण से छवि छिपाना चाहते हैं और निम्नलिखित सीएसएस कोड का उपयोग करने का निर्णय लिया है:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

इस दृष्टिकोण के साथ, छवि को दस्तावेज़ से पूरी तरह से बाहर रखा जाएगा (तथाकथित दस्तावेज़ प्रवाह से - "दस्तावेज़ प्रवाह"), यह स्क्रीन पाठकों के लिए दुर्गम होगा। शायद आप "दस्तावेज़ प्रवाह" की अवधारणा से बहुत अच्छी तरह परिचित नहीं हैं। इस अवधारणा से निपटने के लिए, निम्नलिखित आकृति पर एक नज़र डालें।


नीली किताब को ढेर से हटा दिया गया था।

"दस्तावेज़ प्रवाह" की तुलना यहाँ पुस्तकों के ढेर से की जाती है। यदि display: none संपत्ति नीले रंग की किताब पर लागू display: none होती है, तो इसका मतलब यह होगा कि इसे केवल स्टैक से हटा दिया गया था। साथ ही, जिस स्थान पर इस पुस्तक का उपयोग किया जाता था, वह अन्य पुस्तकों द्वारा कब्जा कर लिया जाएगा। HTML तत्वों को छिपाते समय भी ऐसा ही होता है। जिस स्थान पर एक छिपे हुए तत्व का कब्जा होगा, वह अन्य तत्वों द्वारा कब्जा कर लिया जाता है, इससे दस्तावेज़ में तत्वों की व्यवस्था प्रभावित होती है। हमारे उदाहरण में, इसने स्टैक में पुस्तकों की स्थिति को प्रभावित किया।

यहां पुस्तकों के साथ एक उदाहरण का एक एनिमेटेड संस्करण दिखाया गया है कि क्या होता है यदि उनमें से एक को स्टैक से हटा दिया जाता है।


यदि आप किसी पुस्तक को स्टैक से हटाते हैं, तो उसमें अन्य पुस्तकों की स्थिति बदल जाएगी

▍ क्या सीएसएस द्वारा लोड किए गए संसाधन छिपे हुए हैं?

इस प्रश्न का संक्षेप में उत्तर दें - फिर हाँ, ऐसे संसाधनों का लोडिंग किया जाता है। उदाहरण के लिए, यदि <img> तत्व सीएसएस द्वारा छिपा हुआ है, और हम इस तत्व को पृष्ठ के किसी बिंदु पर दिखाते हैं, तब तक छवि पहले ही लोड हो जाएगी। एक छवि के पृष्ठ पर उपस्थिति, यहां तक ​​कि सीएसएस द्वारा छिपाया गया है, इसे डाउनलोड करने के लिए एक HTTP अनुरोध का निष्पादन होगा।

यहां आप CSS द्वारा छिपी छवि के साथ काम करने का डेमो पा सकते हैं। यदि आप इस उदाहरण का पता लगाते हैं, तो क्रोम डेवलपर टूल को खोलकर और Network टैब को देखकर, आप वहां संबंधित अनुरोध देख सकते हैं।


एक अव्यक्त छवि वाले पृष्ठ की जांच करना

▍ तत्व शैली

यह उल्लेखनीय है कि HTML तत्व ऐसे हैं जिनकी display संपत्ति डिफ़ॉल्ट रूप से none लिए none सेट none है। उदाहरण के लिए, यह एक <style> तत्व है जिसे HTML पृष्ठ के मुख्य भाग में जोड़ा जा सकता है। इसकी display प्रॉपर्टी को block और दृश्यमान बनाया जा सकता है।
यहाँ पेज बॉडी के लिए HTML कोड दिया गया है:

 <body>    <style>       .title { color: #000; }    </style> </body> 

यहाँ सीएसएस है जिसके साथ हम style तत्व को दृश्यमान बनाते हैं:

 style {    display: block; } 

इस तरह की तकनीक उपयोगी हो सकती है यदि आप चाहते हैं कि style ब्लॉक दिखाई दे और, इसके अलावा, संपादन योग्य। इस तरह के ब्लॉक को संपादन योग्य बनाने के लिए, आप style टैग में विशेषता contenteditable=true जोड़ सकते हैं।

यहाँ है कि यह कैसा दिखता है।


दृश्यमान संपादन योग्य शैली ब्लॉक

→ यहाँ इस उदाहरण का एक डेमो है

▍CSS संपत्ति और सामग्री पहुंच को प्रदर्शित करता है

display: none का उपयोग करते समय display: none संपत्ति display: none , तत्व अदृश्य हो जाता है और, इसके अलावा, स्क्रीन पाठकों के लिए दुर्गम।

सीएसएस अपारदर्शिता संपत्ति

opacity सीएसएस संपत्ति को 0 सेट करके, आप तत्व और उसके भीतर निहित सभी तत्वों को छिपा सकते हैं। यह संपत्ति विरासत में नहीं मिली है। हालाँकि, यह गुण केवल उस तत्व को छिपाता है जो पृष्ठ को देख रहा है, और स्क्रीन पाठकों से नहीं। यहां यह कहने योग्य है कि एक तत्व जिसका opacity मूल्य 1 से भिन्न है, एक नया ओवरले संदर्भ बनाता है।

यहाँ एक उदाहरण है।


नीली किताब अदृश्य है, लेकिन यह जिस स्थान पर है वह अभी भी आरक्षित है

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

सीएसएस में, opacity संपत्ति का उपयोग इस तरह दिखता है:

 img {    opacity: 0; } 

यदि हम अपने पहले उदाहरण पर लौटते हैं और मानते हैं कि हम opacity संपत्ति का उपयोग करके छवि को छिपाना चाहते हैं, तो परिणाम नीचे दिखाया जाएगा।


छवि अस्पष्टता सीएसएस संपत्ति का उपयोग कर छिपी हुई है

जैसा कि आप देख सकते हैं, छवि अभी भी पृष्ठ पर मौजूद है, लेकिन इसका स्थान किसी भी चीज़ से नहीं लिया गया है। यह केवल पर्यवेक्षक से छिपा हुआ है, लेकिन पृष्ठ से गायब नहीं होता है। सामग्री के प्रकाशन के बाद, उन्होंने मुझे बताया कि संपत्ति pointer-events: none | auto pointer-events: none | auto का उपयोग opacity: 0 का उपयोग कर छिपे हुए तत्वों पर माउस की घटनाओं को अक्षम करने के लिए किया जा सकता है opacity: 0 संपत्ति। यह एक महत्वपूर्ण विचार है, क्योंकि उपयोगकर्ता एक छिपे हुए तत्व के साथ बातचीत करके (उस पर क्लिक करके, माउस के साथ उस पर मँडरा कर, पाठ का चयन करके) भ्रमित हो सकता है।

→ यहाँ opacity गुण का उपयोग करने का प्रदर्शन है

▍CSS अपारदर्शिता संपत्ति और सामग्री पहुंच

opacity: 0 साथ छिपा हुआ एक तत्व opacity: 0 स्क्रीन पाठकों के लिए सुलभ रहता है। कीबोर्ड का उपयोग करते हुए पृष्ठ के साथ काम करते समय ऐसा तत्व फ़ोकस प्राप्त कर सकता है।

सीएसएस दृश्यता संपत्ति

visibility: hidden का उपयोग करना visibility: hidden संपत्ति, आप तत्वों को दिखा या छिपा सकते हैं, इसे उसी तरह कर सकते हैं जैसे हमने opacity: 0 साथ किया था opacity: 0 । यह दस्तावेज़ के प्रवाह को प्रभावित नहीं करता है।


दृश्यता का उपयोग करते समय: छिपी हुई, पुस्तक गायब हो जाती है, लेकिन इसका स्थान अप्रकाशित रहता है

कृपया ध्यान दें कि नीली किताब गायब हो गई है, लेकिन इससे स्टैक में अन्य पुस्तकों की व्यवस्था प्रभावित नहीं हुई।

यह ध्यान दिया जाना चाहिए कि जब visibility: hidden उपयोग मूल तत्व के लिए किया जाता है, तो इसके सभी वंशज छिपे हुए हैं, लेकिन यदि visibility: visible संपत्ति किसी वंशज को सौंपी जाती है, तो यह वंशज दिखाई देगा।


पुस्तकों का ढेर छिपा है, लेकिन नीली किताब दिखाई दे रही है।

शीर्ष लेख, छवि और विवरण के साथ अपने सामान्य उदाहरण पर लौटते हैं। हम इसके HTML कोड को इस तरह से फिर से लिखते हैं:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

हम इसे निम्नलिखित सीएसएस कोड के साथ शैली देते हैं:

 article {    visibility: hidden; } img {    visibility: visible; } 

उसके बाद, आइए देखें कि कैसे एक पृष्ठ जिस पर समान शैलीकरण लागू नहीं किया गया है वह शैलीकृत पृष्ठ से भिन्न होगा।


नेस्टेड तत्व दिखाई देता है

यहां, visibility: hidden सीएसएस संपत्ति <article> तत्व को दी गई है। और अगर आप visibility: visible गुण को <img> तत्व से जोड़ते हैं, तो छवि दिखाई देगी। फिर, यहाँ बिंदु यह है कि विचाराधीन संपत्ति तत्व के वंशज पर लागू होती है, लेकिन वंश तत्व में इसे ओवरराइड किया जा सकता है।

→ यहाँ visibility संपत्ति के साथ काम करने का एक डेमो है

▍CSS संपत्ति दृश्यता और सामग्री पहुंच

जब आप visibility: hidden उपयोग करते हैं visibility: hidden संपत्ति, तत्व छिपा हुआ है। इसे एक्सेसिबिलिटी ट्री से भी हटा दिया जाता है और परिणामस्वरूप, स्क्रीन रीडर इसे नोटिस नहीं करते हैं।

तत्वों और स्थिति को छिपाना

पृष्ठ पर इसकी स्थिति पर कार्य करके किसी तत्व को छिपाने के लिए, आपको इसे पृष्ठ के दृश्य क्षेत्र के बाहर लाने और इसके आयाम (चौड़ाई और ऊंचाई) को 0 सेट करने की आवश्यकता है। तत्वों को छिपाने के लिए एक समान तकनीक का उपयोग करने के एक उदाहरण के रूप में, आप एक लिंक का हवाला दे सकते हैं जो आपको पृष्ठ की मुख्य सामग्री पर जल्दी से कूदने की अनुमति देता है। निम्नलिखित छवि पर विचार करें।


पृष्ठ दृश्यता के बाहर छिपा हुआ लिंक

पृष्ठ दृश्यता क्षेत्र के बाहर एक तत्व को रखने के लिए, आप निम्नलिखित सीएसएस कोड का उपयोग कर सकते हैं:

 .skip-link {    position: absolute;    top: -100%; } 

top: -100% मान top: -100% व्यूपोर्ट से किसी तत्व को उसकी ऊँचाई के 100% पर हटा top: -100% । नतीजतन, तत्व पूरी तरह से अदृश्य हो जाएगा। लेकिन यदि उपयोगकर्ता कीबोर्ड पर कुंजियों का उपयोग करके उसके पास पहुंचने के बाद ध्यान केंद्रित करता है, तो यह तत्व दिखाया जा सकता है:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ यहाँ तत्वों को छिपाने की इस पद्धति का प्रदर्शन है

▍CSS स्थिति संपत्ति और सामग्री पहुंच

देखने के क्षेत्र के बाहर प्रदर्शित एक तत्व स्क्रीन पाठकों के लिए उपलब्ध है; आप इसे कीबोर्ड का उपयोग करके भी प्राप्त कर सकते हैं। यह केवल पृष्ठ के साथ सामान्य काम के दौरान अदृश्य हो जाता है।

सीएसएस क्लिप-पथ संपत्ति

यदि clip-path CSS संपत्ति को एक तत्व पर लागू किया जाता है, तो यह आपको एक ऐसे क्षेत्र का वर्णन करने की अनुमति देता है जो यह निर्धारित करता है कि तत्व का कौन सा हिस्सा छिपा होना चाहिए और जो दिखाई देना चाहिए।


इमेज क्रॉपिंग एरिया

पिछले उदाहरण में, clip-path संपत्ति को इस तथ्य पर लागू किया जाता है कि तस्वीर के बाईं ओर अंधेरा कर दिया गया है। जब यह गुण लागू किया जाता है, तो छवि के काले टुकड़े गायब हो जाते हैं।

इस संपत्ति को कार्रवाई में देखने के लिए, हम क्लिपी टूल का उपयोग करते हैं। सीएसएस में निर्दिष्ट clip-path मूल्यों के साथ काम शुरू होता है और मुखौटा को बहुभुज के रूप में वर्णित करता है:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

क्लिप-पथ संपत्ति के साथ प्रयोग, फसल क्षेत्र को बहुभुज के रूप में निर्दिष्ट किया जाता है

यदि सभी polygon गुण 0 सेट हैं, तो छवि बस छिपी होगी। छवि का क्रॉपिंग क्षेत्र न केवल बहुभुज के रूप में, बल्कि एक सर्कल के रूप में भी सेट किया जा सकता है:

 img {    clip-path: circle(0 at 50% 50%); } 

यहाँ है कि यह कैसा दिखता है।


क्लिप-पथ संपत्ति के साथ प्रयोग, फसल क्षेत्र को एक सर्कल के रूप में सेट किया गया है

आप यहां इस संपत्ति के साथ प्रयोग कर सकते हैं।

.CSS क्लिप-पथ संपत्ति और सामग्री पहुंच

एक तत्व जिसके लिए clip-path गुण लागू किया गया है, केवल नेत्रहीन छिपा हुआ है। इसे कीबोर्ड का उपयोग करके पहुँचा जा सकता है, यह स्क्रीन पाठकों के लिए उपलब्ध है।

पाठ रंग और फ़ॉन्ट आकार के साथ जोड़तोड़

हालांकि अपने रंग या फ़ॉन्ट आकार को बदलकर पाठ को छिपाना तत्वों को छुपाने के लिए पहले की गई तकनीकों के रूप में व्यापक नहीं है, कुछ मामलों में यह काम में आ सकता है।

Et सेट रंग पारदर्शिता

यदि आप पाठ के लिए पारदर्शी रंग का उपयोग करते हैं, तो यह पाठ अदृश्य होगा। केवल आइकन का उपयोग करने वाले बटन बनाते समय यह उपयोगी हो सकता है।

Size फ़ॉन्ट आकार समायोजित करें

इसके अलावा, यदि आप फ़ॉन्ट का आकार 0 सेट करते हैं, तो यह टेक्स्ट को भी छिपा देगा।

निम्नलिखित उदाहरण पर विचार करें। यहां एक बटन है, जिसकी संरचना निम्नलिखित HTML कोड द्वारा परिभाषित की गई है:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

हमारा लक्ष्य इस बटन के पाठ को छिपाना है, लेकिन साथ ही साथ यह सहायक तकनीकों के लिए उपलब्ध है। ऐसा करने के लिए, मैंने निम्नलिखित सीएसएस कोड का उपयोग किया:

 .button span {    color: transparent;    font-size: 0; } 

अब पाठ छिपा है। यह ध्यान दिया जाना चाहिए कि यह तकनीक पाठ के रंग को बदलने के बिना काम करेगी। लेकिन मैंने, पाठ को छिपाने के लिए अलग-अलग विकल्प बनाने के लिए, यहां रंग बदल दिया।


1. बटन की सामग्री केंद्रित है। 2. पाठ को एक पारदर्शी रंग सौंपा गया है। 3. फ़ॉन्ट का आकार 0 पर सेट है

→ यहाँ इस उदाहरण के लिए एक डेमो है

HTML विशेषता aria- छिपा हुआ

जब aria-hidden विशेषता को एक तत्व में जोड़ा जाता है, तो यह तत्व एक्सेसिबिलिटी ट्री से हटा दिया जाता है। इससे उपयोगकर्ताओं को पेज का उपयोग करने के लिए स्क्रीन रीडर का उपयोग करना आसान हो जाता है। ध्यान दें कि इस विशेषता वाला एक तत्व पृष्ठ पर दिखाई देता है। यह केवल सहायक तकनीकों के लिए अदृश्य है।

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

इस उदाहरण में, एक आइकन और एक लेबल के साथ एक Menu बटन है। aria-hidden="true" विशेषता आपको स्क्रीन पाठकों से इस बटन को छिपाने की अनुमति देती है।

MDN सामग्री के अनुसार, यह विशेषता निम्नलिखित परिदृश्य में उपयोग की जाती है:

• आइकन और छवियों जैसे सजावटी तत्वों को छिपाना।
• डुप्लिकेट पाठ छिपाएँ।
• स्क्रीन से कम से कम आइटम या आइटम छिपाएँ।

▍Aria- छिपी विशेषता और सामग्री पहुंच

यह विशेषता विशेष रूप से सहायक प्रौद्योगिकियों से सामग्री को छिपाने के लिए बनाई गई थी। लेकिन तत्व पृष्ठ पर दिखाई देते हैं, आप कीबोर्ड का उपयोग करके उनके साथ बातचीत कर सकते हैं।

एनीमेशन और अन्तरक्रियाशीलता

इससे पहले कि हम उदाहरणों में मिलें, मैं तत्वों को छिपाने के पहले चर्चित तरीकों पर ध्यान देना चाहूंगा। हम उनकी तुलना करने और हमारी जरूरतों को पूरा करने के लिए चुनने के लिए ऐसा करेंगे। निम्न तालिका, जो यहां पाई जा सकती है , इस अद्भुत लेख पर आधारित है।

यदि आप एक छिपे हुए तत्व को एनिमेट करना चाहते हैं, उदाहरण के लिए, एक मोबाइल नेविगेशन बार, इस तत्व को इसकी उपलब्धता को ध्यान में रखते हुए बनाया जाना चाहिए। नीचे हम पहुंच के संदर्भ में तत्वों के साथ काम करने के असफल और सफल उदाहरणों पर विचार करेंगे। यह हमें उन गलतियों से बचने की अनुमति देगा जो सहायक प्रौद्योगिकियों का उपयोग करने वाले उपयोगकर्ताओं के लिए साइटों के साथ काम को जटिल करते हैं।

Wrong मेनू एनीमेशन: गलत दृष्टिकोण

हमारे पास एक मेनू है, जिसे खोलने पर, स्क्रीन के बाहर जाना चाहिए। ऐसा करने का सबसे आसान तरीका निम्नलिखित सीएसएस के साथ है:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

इस कोड के लिए धन्यवाद, मेनू .active वर्ग के आधार पर विस्तार और पतन करेगा, जिसे निम्नलिखित जावास्क्रिप्ट कोड का उपयोग करके जोड़ा जाएगा:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

यहाँ इस तरह के मेनू के साथ काम करना कैसा दिखता है।


कार्रवाई में मेनू छोड़कर

ऐसा लग सकता है कि हमने इस मेनू को बनाकर अच्छे परिणाम प्राप्त किए हैं, लेकिन यहां एक बड़ी गलती की गई है। opacity: 0 का उपयोग opacity: 0 संपत्ति एक्सेसिबिलिटी ट्री से नेविगेशन तत्वों को नहीं हटाएगी। यहां तक ​​कि अगर पृष्ठ पर मेनू दिखाई नहीं देता है, तो इसे कीबोर्ड का उपयोग करके पहुंचा जा सकता है, स्क्रीन रीडर इसके साथ काम कर सकते हैं। ऐसे टूल का उपयोग करने वाले उपयोगकर्ताओं को भ्रमित न करने के लिए, मेनू को इन टूल से भी छिपाया जाना चाहिए।

यहां Chrome टूल की Accessibility टैब टूल का उपयोग करके बनाए गए प्रश्न में पृष्ठ के लिए एक्सेसिबिलिटी ट्री है।


खराब तरीके से डिज़ाइन किए गए छिपे हुए मेनू का एक्सेसिबिलिटी ट्री

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

1. यह सुनिश्चित करना आवश्यक है कि कीबोर्ड का उपयोग करके छिपे हुए मेनू आइटम तक नहीं पहुंचा जा सकता है।
2. यह आवश्यक है कि स्क्रीन रीडर छिपे हुए मेनू को न देखें और संबंधित सामग्री को न पढ़ें।

निम्न छवि दिखाती है कि मैक ओएस से वॉयसओवर के लिए पृष्ठ कैसे दिखाई देता है। यह नोटिस करना आसान है कि यह टूल मेनू को पूरी तरह से देखता है, भले ही यह मेनू स्क्रीन पर न हो।


स्क्रीन रीडर देखता है कि उसे क्या नहीं देखना चाहिए

→ यहाँ इस उदाहरण का एक कार्यशील संस्करण है

उपरोक्त त्रुटियों को ठीक करते हैं।

▍ मेनू एनीमेशन: बग फिक्स

मेनू को बेहतर बनाने और त्रुटियों को ठीक करने के लिए, आपको visibility: hidden का उपयोग करने की आवश्यकता है visibility: hidden सीएसएस संपत्ति। यह आपको पृष्ठ से मेनू को छिपाने और इसके साथ काम करने के लिए स्क्रीन से पढ़ने के साधनों को रोकने की अनुमति देगा। यहाँ समस्या को ठीक करने के लिए CSS कोड है:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

इस कोड को लागू करने के बाद, न्यूनतम मेनू स्क्रीन से और सहायक तकनीकों के "देखने के क्षेत्र" से गायब हो जाएगा। VoiceOver के साथ फिर से पृष्ठ का अन्वेषण करें।


स्क्रीन रीडर अतिरिक्त कुछ भी नहीं देखता है

→ यहाँ एक परियोजना एक उदाहरण प्रस्तुत करती है

कस्टम चेकबॉक्स तत्व

चेकबॉक्स तत्व

मानक झंडे, <input> प्रकार के checkbox तत्व, कॉन्फ़िगर करना मुश्किल है। अगर हमें उन्हें कॉन्फ़िगर करने की आवश्यकता है, तो इसका मतलब है कि हमें इस तरह के एक तत्व के अपने कार्यान्वयन को बनाने की आवश्यकता होगी। इसके मूल HTML कोड पर एक नज़र डालें:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

चेकबॉक्स को कॉन्फ़िगर करने के लिए, आपको सहायक तकनीकों की आवश्यकताओं को ध्यान में रखते हुए तत्व को छिपाने में सक्षम होना चाहिए। ऐसा करने के लिए, आपको position संपत्ति, साथ ही अन्य गुणों का उपयोग करने की आवश्यकता है। यहां एक CSS क्लास है जिसे sr-only या visually-hidden , जो केवल तत्व को नेत्रहीन रूप से छुपाता है, लेकिन इसे स्क्रीन रीडर और कीबोर्ड नेविगेशन के लिए सुलभ छोड़ देता है।

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

इस तरह के एक वर्ग के उपयोग के लिए धन्यवाद, हमारे स्वयं के डिजाइन का checkbox तत्व एक्सेसिबिलिटी नहीं खोता है। इस तरह के एक तत्व के बारे में अधिक विस्तृत कहानी यहां दी गई है । और यहां एक समान तत्व के साथ काम करने का प्रदर्शन है।

स्क्रीन पाठकों से सामग्री छिपाएँ

▍

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

परिणाम

- . , , .

प्रिय पाठकों! - ?