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

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

bootstrap's documentation के अनुसार

, वर्ग स्क्रीन रीडर्स गाया पेज के लेआउट से केवल इरादा जानकारी को छिपाने के लिए किया जाता है:

यहाँ मेरी उदाहरण है।

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

Is it important or can I remove it? Works fine without.

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

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

यहाँ एक example स्टाइल का इस्तेमाल किया है।

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

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

• Web Accessibility Initiative (WAI)

• MDN Accessibility documentation

Answer 2

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

If you want your site to interact even more with screen readers, use W3C standardized ARIA attributes and I definitely recommend to visit the Google online course , which will take only up to 1-2h or at least watch a Google's 40min video .

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

Answer 3

मैं navbar example में यह पाया, और यह सरल बनाया।

<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 हिस्सा छिपा हुआ है):

• डिफ़ॉल्ट
• स्टेटिक शीर्ष
• शीर्ष फिक्स्ड

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

• डिफ़ॉल्ट
• स्टेटिक शीर्ष
• फिक्स्ड शीर्ष (वर्तमान)

इस तकनीक लोगों को अंधा अपनी वेबसाइट पर सरलता से नेविगेट करने वाले के परिणामस्वरूप।

Answer 4

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

<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> 

Glyphicon, अन्य सभी उपकरणों पर प्रदर्शित किया जाएगा शब्द में त्रुटि।

Answer 5

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

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

लेकिन .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; 
    } 

उपरोक्त CSS डेस्कटॉप और मोबाइल ब्राउज़रों इस वर्ग के साथ लिपटे में सामग्री को छुपाता है, लेकिन जबड़े की तरह एक स्क्रीन रीडर द्वारा देखा जाता है: 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 की ऊंचाई है, तत्व नहीं डोम द्वारा देखा जाता है। यही कारण है कि उपर्युक्त सीएसएस 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; 

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

View > Page Style > No Style 

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

Answer 6

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

मुख्य सामग्री पर जाएं-केवल .sr तत्व फिर से दिखाने के लिए .sr-केवल-फ़ोकस करने योग्य के साथ जब यह ध्यान केंद्रित है कम्बाइन