सरल उपयोग

सुलभ सामग्री के निर्माण के लिए बूटस्ट्रैप की विशेषताओं और सीमाओं का एक संक्षिप्त अवलोकन।

इस पृष्ठ पर

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

अवलोकन और सीमाएं

बूटस्ट्रैप के साथ निर्मित किसी भी परियोजना की समग्र पहुंच लेखक के मार्कअप, अतिरिक्त स्टाइल और उनके द्वारा शामिल की गई स्क्रिप्टिंग पर काफी हद तक निर्भर करती है। हालांकि, बशर्ते कि इन्हें सही तरीके से लागू किया गया हो, बूटस्ट्रैप के साथ वेबसाइट और एप्लिकेशन बनाना पूरी तरह से संभव होना चाहिए जो डब्ल्यूसीएजी 2.1 (ए/एए/एएए), धारा 508 , और समान पहुंच मानकों और आवश्यकताओं को पूरा करते हैं।

स्ट्रक्चरल मार्कअप

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

इंटरएक्टिव घटक

बूटस्ट्रैप के इंटरेक्टिव घटक- जैसे मोडल डायलॉग, ड्रॉपडाउन मेनू और कस्टम टूलटिप्स- को टच, माउस और कीबोर्ड उपयोगकर्ताओं के लिए काम करने के लिए डिज़ाइन किया गया है। प्रासंगिक WAI - ARIA भूमिकाओं और विशेषताओं के उपयोग के माध्यम से, इन घटकों को सहायक तकनीकों (जैसे स्क्रीन रीडर) का उपयोग करके समझने योग्य और संचालन योग्य भी होना चाहिए।

चूंकि बूटस्ट्रैप के घटकों को जानबूझकर काफी सामान्य बनाने के लिए डिज़ाइन किया गया है, इसलिए लेखकों को अपने घटक की सटीक प्रकृति और कार्यक्षमता को अधिक सटीक रूप से व्यक्त करने के लिए आगे ARIA भूमिकाओं और विशेषताओं, साथ ही जावास्क्रिप्ट व्यवहार को शामिल करने की आवश्यकता हो सकती है। यह आमतौर पर दस्तावेज़ीकरण में नोट किया गया है।

रंग विपरीत

रंगों के कुछ संयोजन जो वर्तमान मे�� बूटस्ट्रैप के डिफ़ॉल्ट पैलेट को बनाते हैं - बटन विविधताओं, अलर्ट विविधताओं, फॉर्म सत्यापन संकेतक जैसी चीजों के लिए पूरे ढांचे में उपयोग किए जाते हैं - अपर्याप्त रंग विपरीत हो सकते हैं (अनुशंसित डब्ल्यूसीएजी 2.1 टेक्स्ट रंग विपरीत अनुपात 4.5: 1 से नीचे) और WCAG 2.1 नॉन-टेक्स्ट कलर कंट्रास्ट अनुपात 3:1 ), खासकर जब एक हल्की पृष्ठभूमि के खिलाफ उपयोग किया जाता है। लेखकों को रंग के अपने विशिष्ट उपयोगों का परीक्षण करने और, जहां आवश्यक हो, पर्याप्त रंग विपरीत अनुपात सुनिश्चित करने के लिए इन डिफ़ॉल्ट रंगों को मैन्युअल रूप से संशोधित/विस्तारित करने के लिए प्रोत्साहित किया जाता है।

ऐसी सामग्री जिसे दृष्टि से छिपाया जाना चाहिए, लेकिन सहायक तकनीकों जैसे स्क्रीन रीडर के लिए सुलभ रहती है, को .visually-hiddenकक्षा का उपयोग करके स्टाइल किया जा सकता है। यह उन स्थितियों में उपयोगी हो सकता है जहां अतिरिक्त दृश्य जानकारी या संकेत (जैसे कि रंग के उपयोग के माध्यम से निरूपित अर्थ) को गैर-दृश्य उपयोगकर्ताओं को भी बताने की आवश्यकता होती है।

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

पारंपरिक "छोड़ें" लिंक जैसे नेत्रहीन छिपे हुए इंटरैक्टिव नियंत्रणों के लिए, .visually-hidden-focusableकक्षा का उपयोग करें। यह सुनिश्चित करेगा कि एक बार फ़ोकस करने के बाद नियंत्रण दृश्यमान हो जाए (देखे गए कीबोर्ड उपयोगकर्ताओं के लिए)। पिछले संस्करणों में समकक्ष .sr-onlyऔर .sr-only-focusableकक्षाओं की तुलना में देखें, बूटस्ट्रैप 5 .visually-hidden-focusableएक स्टैंडअलोन वर्ग है, और वर्ग के साथ संयोजन में उपयोग नहीं किया जाना चाहिए .visually-hidden।

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

कम गति

बूटस्ट्रैप में prefers-reduced-motionमीडिया सुविधा के लिए समर्थन शामिल है । ब्राउज़र/वातावरण में जो उपयोगकर्ता को कम गति के लिए अपनी वरीयता निर्दिष्ट करने की अनुमति देता है, बूटस्ट्रैप में अधिकांश सीएसएस संक्रमण प्रभाव (उदाहरण के लिए, जब एक मोडल संवाद खोला या बंद किया जाता है, या हिंडोला में स्लाइडिंग एनीमेशन) अक्षम हो जाएगा, और सार्थक एनिमेशन ( जैसे स्पिनर) धीमा हो जाएगा।

उन ब्राउज़रों पर जो समर्थन करते हैं prefers-reduced-motion, और जहां उपयोगकर्ता ने स्पष्ट रूप से संकेत नहीं दिया है कि वे कम गति (यानी जहां prefers-reduced-motion: no-preference) पसंद करेंगे, बूटस्ट्रैप scroll-behaviorसंपत्ति का उपयोग करके चिकनी स्क्रॉलिंग को सक्षम बनाता है।