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




css twitter-bootstrap (4)

कक्षा 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>

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

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

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


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

<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 भाग छुपा हुआ है):

  • चूक
  • स्टेटिक टॉप
  • फिक्स्ड टॉप

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

  • चूक
  • स्टेटिक टॉप
  • फिक्स्ड टॉप (वर्तमान)

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


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

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

यहां एक example स्टाइल इस्तेमाल किया गया है:

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

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

यह महत्वपूर्ण है, इसे हटा मत करो।

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

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


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

ऐसा लगता है कि यहां कुछ जानकारी गायब है, .sr-only इसके उद्देश्य को समझाने और स्क्रीन पाठकों के लिए होने के लिए .sr-only के उपयोग के बारे में। सबसे पहले और सबसे महत्वपूर्ण, हमेशा उपयोगकर्ताओं को दिमाग में रखना बहुत महत्वपूर्ण है। क्षति 508 अनुपालन का उद्देश्य है: https://www.section508.gov/ , और यह बहुत अच्छा है कि बूटस्ट्रैप इसे ध्यान में रखता है। हालांकि, .sr-only का उपयोग उन सभी .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;
    }

उपर्युक्त सीएसएस इस वर्ग के साथ लिपटे डेस्कटॉप और मोबाइल ब्राउज़र में सामग्री छुपाता है, लेकिन एक स्क्रीन रीडर द्वारा देखा जाता है जैसे जैव: 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; का उपयोग करता है width: 1px; height: 1px; width: 1px; height: 1px;display: none का उपयोग करके display: none और अपनी सीएसएस को height: 0 सेट करना height: 0 और width: 0 , तत्व डीओएम द्वारा नहीं देखा जाता है और इस प्रकार समस्याग्रस्त है। width: 1px; height: 1px; का उपयोग कर उपर्युक्त सीएसएस width: 1px; height: 1px; width: 1px; height: 1px; डेस्कटॉप और मोबाइल ब्राउज़र पर सामग्री को अदृश्य बनाने के लिए आप सब कुछ नहीं करते हैं ( overflow: hidden बिना overflow: hidden , आपकी सामग्री अभी भी स्क्रीन पर दिखाई देगी), और पाठकों को स्क्रीन करने के लिए दृश्यमान है। डेस्कटॉप और मोबाइल ब्राउज़र से सामग्री को छिपाना width: 1px से ऑफ़सेट जोड़कर किया जाता है width: 1px और height: 1px पहले उपयोग करके उल्लिखित:

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

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

View > Page Style > No Style

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







twitter-bootstrap-3