सामग्री को सही तरीके से छिपाएँ
यह जानना कि कब और कैसे सामग्री को छिपाया जाए, स्क्रीन रीडर उपयोगकर्ताओं और अन्य सहायक तकनीकों के लिए बहुत महत्वपूर्ण है। इस पृष्ठ में सभी उपयोगकर्ताओं और केवल स्क्रीन रीडर उपयोगकर्ताओं के लिए सामग्री को छिपाने के मुख्य तरीकों की व्याख्या की गई है।
सामग्री को अदृश्य (दृश्य रूप से छिपा) बनाना
यदि पृष्ठ पर कोई तत्व:
- एक इंटरैक्टिव तत्व है, लेकिन उसे दृश्य रूप से छिपाने की आवश्यकता है ताकि उसे थीमिंग के लिए स्टाइल किया जा सके (जैसे लिंक, चेकबॉक्स, टॉगल या फ़ॉर्म नियंत्रण),
- एक शीर्षक या लेबल है जिसका उद्देश्य स्पष्ट है (और इसलिए दृश्य उपयोगकर्ताओं को दिखाने की आवश्यकता नहीं है; उदाहरण के लिए, अनुभाग शीर्षक या फ़ॉर्म फ़ील्ड लेबल),
- दृश्य उपयोगकर्ताओं को नहीं दिखना चाहिए, लेकिन स्क्रीन रीडर उपयोगकर्ताओं को सुलभ रहना चाहिए,
... तो आपको इसे अदृश्य (दृश्य रूप से छिपा) बनाना चाहिए।
आप ऐसा कर सकते हैं:
तत्व को visually-hidden वर्ग देकर,
Drupal 8 में, एंटिटी सबटाइप के डिस्प्ले मैनेजमेंट पृष्ठ पर फ़ील्ड लेबल के लिए “- Visually Hidden -” विकल्प चुनें (उदाहरण: “Tags” फ़ील्ड in Article content type),
CSS का उपयोग करके उसे पृष्ठ के दृश्य क्षेत्र के बाहर रखना, या
निम्नलिखित CSS का उपयोग करें:
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal;
उदाहरण:
त्रुटि, चेतावनी और स्थिति संदेशों के शीर्षक को छिपाना।
कारण:
अधिकांश थीम स्थिति संदेशों को रंगीन बॉर्डर वाले दृश्यमान क्षेत्र में दिखाती हैं, ताकि दृश्य उपयोगकर्ताओं का ध्यान आकर्षित हो। लेकिन WCAG 2.0 अनुभाग 1.3.3 के अनुसार, जानकारी केवल दृश्य विशेषताओं पर निर्भर नहीं होनी चाहिए।
स्क्रीन रीडर उपयोगकर्ता पृष्ठ पर शीर्षकों का उपयोग करके नेविगेट करते हैं। इसलिए, स्थिति संदेशों में शीर्षक जोड़ना उपयोगी होता है।
सामग्री को तब तक अदृश्य रखना जब तक कोई उपयोगकर्ता कीबोर्ड से नेविगेट न करे
यदि पृष्ठ पर कोई तत्व:
- “मुख्य सामग्री पर जाएं” लिंक जैसा नेविगेशन सहायक है,
- ऐसे तत्व का विकल्प है जिसे केवल माउस से उपयोग किया जा सकता है, या
- दृश्य उपयोगकर्ताओं को नहीं दिखना चाहिए जब तक वे कीबोर्ड से नेविगेट न करें,
... तो आपको इसे तब तक छिपाना चाहिए जब तक उपयोगकर्ता कीबोर्ड से इसे फोकस न करें।
आप ऐसा कर सकते हैं:
- तत्व को visually-hidden और focusable दोनों वर्ग देकर, या
- निम्नलिखित CSS का उपयोग करके:
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
उदाहरण:
प्रत्येक पृष्ठ के शीर्ष पर “मुख्य सामग्री पर जाएं” लिंक।
कारण:
कीबोर्ड और स्क्रीन रीडर उपयोगकर्ता जल्दी से पृष्ठ की मुख्य सामग्री तक पहुँचना चाहते हैं।
WCAG 2.0 अनुभाग 2.4.1 के अनुसार, बार-बार आने वाली सामग्री को छोड़ने का तरीका प्रदान करना आवश्यक है।
सभी उपयोगकर्ताओं के लिए सामग्री को पूरी तरह छिपाना
यदि पृष्ठ पर कोई तत्व:
- JavaScript घटना द्वारा दृश्यमान होने तक छिपा रहना चाहिए,
- वर्तमान संदर्भ में किसी भी उपयोगकर्ता के लिए प्रासंगिक नहीं है,
- JavaScript द्वारा पढ़े/लिखे जाने वाले मान रखता है, लेकिन सीधे प्रदर्शित नहीं होना चाहिए, या
- सामान्य रूप से किसी उपयोगकर्ता को नहीं दिखना चाहिए,
... तो इसे सभी उपयोगकर्ताओं के लिए पूरी तरह छिपा देना चाहिए।
आप ऐसा कर सकते हैं:
- तत्व को hidden वर्ग देकर (Drupal 8),
- एंटिटी सबटाइप के डिस्प्ले मैनेजमेंट पृष्ठ पर फ़ील्ड के लिए “- Hidden -” विकल्प चुनकर,
- लेबल के लिए “- Hidden -” विकल्प सेट करके, या
- CSS में display: none; का उपयोग करके।
उदाहरण:
JavaScript चलने से पहले रंग मॉड्यूल के प्रीव्यू क्षेत्र को छिपाना।
/* color.css (Drupal 7 और 8) */
#preview {
display: none;
}
कारण:
यदि JavaScript सक्षम नहीं है, तो पूर्वावलोकन आवश्यक नहीं है।
गलत उपयोग
“display:none” का एक सामान्य दुरुपयोग फ़ॉर्म लेबल या शीर्षक को केवल दिखावट बदलने के लिए हटाना है। लेकिन इससे स्क्रीन रीडर उपयोगकर्ताओं के लिए तत्व अनुपयोगी हो जाता है।
यदि आप किसी इनपुट लेबल को “display:none” के साथ हटा देते हैं, तो स्क्रीन रीडर उपयोगकर्ता को केवल “आवश्यक टेक्स्ट फ़ील्ड” सुनाई देगा — लेकिन यह नहीं समझ पाएगा कि यह फ़ील्ड किसके लिए है। इस स्थिति में “दृश्य रूप से छिपा” तरीका अधिक उपयुक्त है।
स्क्रीन रीडर से सामग्री छिपाना
यदि पृष्ठ पर कोई तत्व:
- स्वयं में भ्रम पैदा कर सकता है, या
- केवल दृश्य उपयोगकर्ताओं के लिए प्रासंगिक है,
... तो आपको इसे स्क्रीन रीडर उपयोगकर्ताओं से छिपाना चाहिए।
आप ऐसा कर सकते हैं:
- तत्व में aria-hidden="true" विशेषता जोड़कर।
उदाहरण:
खोज फ़िल्टर हटाने के नियंत्रण में केवल दृश्य उपयोगकर्ताओं के लिए “x” दिखाया जाता है और स्क्रीन रीडर उपयोगकर्ताओं के लिए एक सुलभ छिपा संदेश प्रदान किया जाता है:
Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span> </a>
कारण:
पहले से ही सुलभ वैकल्पिक टेक्स्ट प्रदान किया गया है। “x” को अकेले सुनना भ्रमित कर सकता है।
गलत उपयोग
किसी तत्व को स्क्रीन रीडर से अदृश्य बनाने का मतलब है कि वह सहायक तकनीक उपयोगकर्ताओं के लिए अप्राप्य है। WCAG 2.0 अनुभाग 1.1 के अनुसार, आपको हमेशा एक सुलभ वैकल्पिक सामग्री प्रदान करनी चाहिए, अन्यथा कुछ उपयोगकर्ता इसे एक्सेस नहीं कर पाएंगे।