केवल बूटस्ट्रैप 3 में sr क्या है?

Question

वर्ग किसके sr-onlyलिए प्रयोग किया जाता है? क्या यह महत्वपूर्ण है या क्या मैं इसे हटा सकता हूं? बिना ठीक काम करता है।

यहाँ मेरा उदाहरण है:

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

Answer 1

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

यदि आपके पास हर इनपुट के लिए एक लेबल शामिल नहीं है, तो स्क्रीन रीडर्स को आपके फॉर्म से परेशानी होगी। इन इनलाइन रूपों के लिए, आप .sr-only वर्ग का उपयोग करके लेबल छिपा सकते हैं।

यहाँ एक उदाहरण स्टाइल का उपयोग किया गया है:

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

क्या यह महत्वपूर्ण है या क्या मैं इसे हटा सकता हूं? बिना ठीक काम करता है।

यह महत्वपूर्ण है, इसे हटाएं नहीं।

आपको हमेशा पहुँच उद्देश्यों के लिए स्क्रीन रीडर पर विचार करना चाहिए। कक्षा का उपयोग वैसे भी तत्व को छिपाएगा, इसलिए आपको दृश्य अंतर नहीं देखना चाहिए।

यदि आप पहुंच के बारे में पढ़ने में रुचि रखते हैं:

• वेब अभिगम्यता पहल (WAI)

• MDN पहुँच दस्तावेज़

Comments

अनुशंसित पढ़ें: स्क्रीन रीडर उपयोगकर्ताओं के लिए अदृश्य सामग्री बस

— katranci

@katranci आपके द्वारा संदर्भित लेख में कुछ बिंदुओं को याद कर रहा है, उदाहरण के लिए rtl सामग्री के साथ समस्याएँ। यहां जवाब बेहतर लग रहा है।

— क्रिस्टोफ

@Christophe मैं अभी भी अवधारणा को समझने के लिए उस लेख की सिफारिश करूंगा। भले ही यह rtl सामग्री के साथ समस्याओं की व्याख्या नहीं करता है, लेकिन यह अलग-अलग तकनीकों को सूचीबद्ध करता है जिसमें शामिल हैंclipping

— katranci

ईमानदार होने के लिए, भाषा बहुत भ्रामक है the class is used to hide information used for screen readers:? क्या यह स्क्रीन पाठकों से छिपा है? या यह केवल ब्राउज़र में प्रदर्शित नहीं होता है? यह स्पष्ट है कि यदि दस्तावेज़ कुछ कहता है जैसे "sr-only class इंगित करता है कि तत्व केवल स्क्रीन-रीडर्स के लिए है, और ब्राउज़र में प्रदर्शित नहीं है"।

— Stack0verflow

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

— ली

Answer 2

जैसा कि जोश ने कहा, वर्ग का उपयोग स्क्रीन पाठकों के लिए उपयोग की जाने वाली जानकारी को छिपाने के लिए किया जाता है। लेकिन न केवल लेबल को छिपाने के लिए, आप देखे गए उपयोगकर्ता से आंतरिक लिंक "मुख्य सामग्री पर जाएं" को छिपाने के लिए विचार कर सकते हैं, जो नेत्रहीन उपयोगकर्ताओं के लिए वांछनीय है यदि आपके पास मुख्य सामग्री से पहले एक जटिल नेविगेशन या विज्ञापन हैं।

यदि आप चाहते हैं कि आपकी साइट स्क्रीन पाठकों के साथ अधिक से अधिक सहभागिता करे, तो W3C मानकीकृत ARIA विशेषताओं का उपयोग करें और मैं निश्चित रूप से Google ऑनलाइन पाठ्यक्रम पर जाने की सलाह देता हूं , जो केवल 1-2h तक ले जाएगा या कम से कम Google का 40min वीडियो देखेगा ।

विश्व स्वास्थ्य संगठन के अनुसार, 285 मिलियन लोगों में दृष्टि दोष है। इसलिए वेबसाइट को सुलभ बनाना महत्वपूर्ण है।

अद्यतन 2019:

डेवलपर्स के रूप में हमें सुलभ सामग्री बनानी चाहिए जो केवल सभी आउट-ऑफ-द-बॉक्स के लिए काम करती है और विशेष रूप से स्क्रीन पाठकों को लक्षित नहीं करती है। यह हमेशा संभव नहीं है लेकिन ARIA और "स्क्रीन रीडर केवल" समायोजन का उपयोग करके सावधान रहें । यदि आप इसे पूरी तरह से नहीं समझते हैं तो इसे न करें। गलत कार्यान्वयन जो भी हो उसका उपयोग न करने की तुलना में बहुत बुरा हो सकता है। ARIA खराब उदाहरणों पर पहुंच-डेवलपर-मार्गदर्शिका पढ़ें । वहां आपको पूरी तरह से सुलभ घटक / विजेट मिलेंगे, जिन्हें किसी भी "स्क्रीन रीडर केवल" हस्तक्षेप की आवश्यकता नहीं है।

Comments

पूरी तरह से अधिक WHO जानकारी : "दुनिया भर में 285 मिलियन लोगों को नेत्रहीन होने का अनुमान है: 39 मिलियन अंधे हैं और 246 की दृष्टि कम है। दुनिया के लगभग 90% नेत्रहीन लोग कम आय वाली सेटिंग्स में रहते हैं। अंधेपन से पीड़ित 82% लोग हैं। 50 वर्ष और उससे अधिक आयु के। ”

— काटो माइनर

Answer 3

मैंने इसे नौसिखिया उदाहरण में पाया , और इसे सरल बनाया।

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

आप देखते हैं कि किसे चुना गया है ( sr-onlyभाग छिपा हुआ है):

• चूक
• स्थैतिक शीर्ष
• निश्चित शीर्ष

यदि आप स्क्रीन रीडर का उपयोग करते हैं, तो आप सुन सकते हैं:

• चूक
• स्थैतिक शीर्ष
• निश्चित शीर्ष (वर्तमान)

इस तकनीक के परिणामस्वरूप नेत्रहीन लोग आपकी वेबसाइट पर आसान नेविगेट करने वाले थे।

Comments

एक अंधे लोगों ने उस वर्तमान पाठ को कैसे पढ़ा? क्या उनके लिए विशेष प्रकार की स्क्रीन उपलब्ध है?

— संतोष

वे एक स्क्रीन रीडर का उपयोग करते हैं, जैसा कि इस उत्तर में वर्णित है। यह एक ऐसा कार्यक्रम है जो स्क्रीन सामग्री को पढ़ता है, इसलिए "आप सुनते हैं कि स्क्रीन रीडर का उपयोग करने पर किसे चुना जाता है :"।

— आयरनसेन

स्क्रीन रीडर का अनुभव प्राप्त करने के लिए आप Chrome एक्सटेंशन ChromeVox का उपयोग कर सकते हैं। यह उतना ही सरल है

— je३:१vo पर हिरोवेज गोलसिक

Answer 4

.sr-onlyएक वर्ग नाम है जो विशेष रूप से स्क्रीन पाठकों के लिए उपयोग किया जाता है। आप किसी भी वर्ग के नाम का उपयोग कर सकते हैं, लेकिन .sr-onlyआमतौर पर इसका उपयोग किया जाता है। यदि आप मन में अनुपालन के साथ विकसित होने की परवाह नहीं करते हैं, तो इसे हटाया जा सकता है। इसे हटाए जाने पर यह किसी भी तरह से UI को प्रभावित नहीं करेगा क्योंकि इस वर्ग के लिए सीएसएस डेस्कटॉप और मोबाइल डिवाइस ब्राउज़रों के लिए दिखाई नहीं देता है।

ऐसा लगता है कि .sr-onlyइसके उद्देश्य को समझाने और स्क्रीन पाठकों के लिए उपयोग करने के बारे में कुछ जानकारी यहाँ गायब है । सबसे पहले और सबसे महत्वपूर्ण है, हमेशा बिगड़ा हुआ उपयोगकर्ताओं को ध्यान में रखना बहुत महत्वपूर्ण है। हानि 508 अनुपालन का उद्देश्य है: https://www.section508.gov/ , और यह बहुत अच्छा है कि बूटस्ट्रैप इसे ध्यान में रखता है। हालाँकि, .sr-only508 अनुपालन के लिए सभी का ध्यान रखने की आवश्यकता नहीं है। आपके पास रंग का उपयोग, फोंट का आकार, नेविगेशन के माध्यम से पहुंच, विवरणकर्ता, आरिया का उपयोग और बहुत कुछ है।

लेकिन जैसा कि .sr-only- सीएसएस वास्तव में क्या करता है? सीएसएस के कई अलग-अलग प्रकार हैं जिनके लिए उपयोग किया जाता है .sr-only। मेरे द्वारा उपयोग किए जाने वाले कुछ में से एक नीचे है:

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

उपरोक्त सीएसएस इस वर्ग के साथ लिपटे डेस्कटॉप और मोबाइल ब्राउज़रों में सामग्री छुपाता है, लेकिन JAWS जैसे एक स्क्रीन रीडर द्वारा देखा जाता है: http://www.freedomscientific.com/Products/Blindness/JAWS । उदाहरण मार्कअप निम्नानुसार है:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

इसके अतिरिक्त, यदि DOM तत्व की चौड़ाई और ऊंचाई 0 है, तो DOM द्वारा तत्व को नहीं देखा जाता है। यही कारण है कि ऊपर सीएसएस का उपयोग करता है width: 1px; height: 1px;। का उपयोग करके display: noneऔर करने के लिए अपने सीएसएस की स्थापना height: 0और width: 0, तत्व डोम द्वारा नहीं देखा है और इस तरह समस्याग्रस्त है है। उपरोक्त सीएसएस का उपयोग width: 1px; height: 1px;आप सभी डेस्कटॉप और मोबाइल ब्राउज़रों के लिए सामग्री को अदृश्य बनाने के लिए नहीं करते हैं (बिना overflow: hidden, आपकी सामग्री अभी भी स्क्रीन पर दिखाई देगी), और स्क्रीन पाठकों को दिखाई देती है। डेस्कटॉप और मोबाइल ब्राउज़रों से सामग्री को छिपाना एक ऑफसेट को जोड़कर width: 1pxऔर height: 1pxपहले उपयोग करके बताया गया है:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

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

View > Page Style > No Style

मुझे आशा है कि मेरे द्वारा यहां दी गई जानकारी अन्य प्रतिक्रियाओं के अलावा किसी और को उपयोग करने के लिए है।

Answer 5

यह सुनिश्चित करता है कि वस्तु केवल पाठकों और इसी तरह के उपकरणों के लिए प्रदर्शित (या होनी चाहिए)। यह विशेषता aria- छिपे = "सच" के साथ अन्य तत्व के संदर्भ में अधिक समझ देता है ।

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ग्लिफ़िकॉन को अन्य सभी उपकरणों पर प्रदर्शित किया जाएगा, शब्द त्रुटि: पाठ पाठकों पर।

Comments

मेरी धारणा है कि aria- लेबल = "त्रुटि" एक ही काम करेगा लेकिन सरल होगा?

— केविन

Answer 6

.sr-onlyवर्ग को छोड़कर सभी उपकरणों के लिए एक तत्व छुपाताscreen readers:

मुख्य सामग्री को छोड़ें। केवल -sr के साथ .sr-only-focusable तत्व को फिर से दिखाने के लिए जब वह केंद्रित हो