प्रवेशयोग्यता

बूटस्ट्रॅपची वैशिष्ट्ये आणि प्रवेशयोग्य सामग्रीच्या निर्मितीसाठी मर्यादांचे संक्षिप्त विहंगावलोकन.

या पृष्ठावर

बूटस्ट्रॅप रेडीमेड शैली, मांडणी साधने आणि परस्परसंवादी घटकांची वापरण्यास-सोपी फ्रेमवर्क प्रदान करते, ज्यामुळे विकसकांना दृष्यदृष्ट्या आकर्षक, कार्यात्मकदृष्ट्या समृद्ध आणि बॉक्सच्या बाहेर प्रवेश करण्यायोग्य वेबसाइट आणि अनुप्रयोग तयार करण्याची परवानगी मिळते.

विहंगावलोकन आणि मर्यादा

बूटस्ट्रॅपसह तयार केलेल्या कोणत्याही प्रकल्पाची एकूण प्रवेशयोग्यता लेखकाच्या मार्कअप, अतिरिक्त शैली आणि त्यांनी समाविष्ट केलेल्या स्क्रिप्टिंगवर मोठ्या प्रमाणात अवलंबून असते. तथापि, जर ते योग्यरित्या लागू केले गेले असतील तर, WCAG 2.1 (A/AA/AAA), कलम 508 आणि तत्सम प्रवेशयोग्यता मानके आणि आवश्यकता पूर्ण करणार्‍या बूटस्ट्रॅपसह वेबसाइट आणि अनुप्रयोग तयार करणे पूर्णपणे शक्य असावे .

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

बूटस्ट्रॅपची शैली आणि मांडणी मार्कअप संरचनांच्या विस्तृत श्रेणीवर लागू केली जाऊ शकते. या दस्तऐवजीकरणाचा उद्देश विकासकांना बूटस्ट्रॅपचा वापर दाखवण्यासाठी सर्वोत्तम सराव उदाहरणे प्रदान करणे आणि संभाव्य प्रवेशयोग्यतेच्या समस्यांचे निराकरण करण्याच्या मार्गांसह, योग्य अर्थविषयक मार्कअप स्पष्ट करणे हे आहे.

परस्परसंवादी घटक

बूटस्ट्रॅपचे परस्परसंवादी घटक—जसे की मोडल संवाद, ड्रॉपडाउन मेनू आणि सानुकूल टूलटिप्स—हे स्पर्श, माउस आणि कीबोर्ड वापरकर्त्यांसाठी कार्य करण्यासाठी डिझाइन केलेले आहेत. संबंधित WAI - ARIA भूमिका आणि विशेषतांच्या वापराद्वारे, हे घटक सहाय्यक तंत्रज्ञान (जसे की स्क्रीन रीडर) वापरून समजण्यायोग्य आणि ऑपरेट करण्यायोग्य असावेत.

बूटस्ट्रॅपचे घटक हेतुपुरस्सर सामान्य असण्यासाठी डिझाइन केलेले असल्यामुळे, लेखकांना त्यांच्या घटकाचे नेमके स्वरूप आणि कार्यक्षमता अधिक अचूकपणे व्यक्त करण्यासाठी पुढील ARIA भूमिका आणि गुणधर्म तसेच JavaScript वर्तन समाविष्ट करणे आवश्यक असू शकते. हे सहसा दस्तऐवजीकरणात नोंदवले जाते.

रंग कॉन्ट्रास्ट

रंगांचे काही संयोजन जे सध्या बूटस्ट्रॅपचे डीफॉल्ट पॅलेट बनवतात — संपूर्ण फ्रेमवर्कमध्ये वापरले जातात जसे की बटण भिन्नता, अॅलर्ट भिन्नता, फॉर्म प्रमाणीकरण निर्देशक — अपुरा रंग कॉन्ट्रास्ट होऊ शकतात ( 4.5:1 च्या शिफारस केलेल्या WCAG 2.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वर्ग वापरा. हे सुनिश्चित करेल की एकदा लक्ष केंद्रित केल्यावर नियंत्रण दृश्यमान होईल (दृष्टी असलेल्या कीबोर्ड वापरकर्त्यांसाठी). लक्ष द्या, मागील आवृत्त्यांमधील समतुल्य आणि वर्गांच्या तुलनेत , बूटस्ट्रॅप 5 हा एक स्वतंत्र वर्ग आहे आणि वर्गाच्या संयोजनात वापरला जाऊ नये ..sr-only.sr-only-focusable.visually-hidden-focusable.visually-hidden

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

कमी गती

prefers-reduced-motionबूटस्ट्रॅपमध्ये मीडिया वैशिष्ट्यासाठी समर्थन समाविष्ट आहे . ब्राउझर/वातावरणांमध्ये जे वापरकर्त्याला कमी गतीसाठी त्यांचे प्राधान्य निर्दिष्ट करण्यास अनुमती देतात, बूटस्ट्रॅपमधील बहुतेक CSS संक्रमण प्रभाव (उदाहरणार्थ, जेव्हा एखादा मोडल संवाद उघडला किंवा बंद केला जातो, किंवा कॅरोसेलमध्ये स्लाइडिंग अॅनिमेशन) अक्षम केले जातील आणि अर्थपूर्ण अॅनिमेशन ( जसे की फिरकीपटू) गती कमी केली जाईल.

समर्थन करणार्‍या ब्राउझरवर prefers-reduced-motion, आणि जेथे वापरकर्त्याने स्पष्टपणे सूचित केले नाही की ते कमी गतीला प्राधान्य देतील (म्हणजे जेथे ), बूटस्ट्रॅप गुणधर्म prefers-reduced-motion: no-preferenceवापरून गुळगुळीत स्क्रोलिंग सक्षम करते .scroll-behavior