ઉપલ્બધતા

સુલભ સામગ્રીના નિર્માણ માટે બુટસ્ટ્રેપની વિશેષતાઓ અને મર્યાદાઓની સંક્ષિપ્ત ઝાંખી.

આ પૃષ્ઠ પર

બુટસ્ટ્રેપ તૈયાર શૈલીઓ, લેઆઉટ ટૂલ્સ અને ઇન્ટરેક્ટિવ ઘટકોનું ઉપયોગમાં સરળ માળખું પ્રદાન કરે છે, જે વિકાસકર્તાઓને દૃષ્ટિની આકર્ષક, કાર્યાત્મક રીતે સમૃદ્ધ અને બોક્સની બહાર સુલભ હોય તેવી વેબસાઇટ્સ અને એપ્લિકેશન્સ બનાવવાની મંજૂરી આપે છે.

વિહંગાવલોકન અને મર્યાદાઓ

બુટસ્ટ્રેપ વડે બનેલ કોઈપણ પ્રોજેક્ટની એકંદર સુલભતા લેખકના માર્કઅપ, વધારાની સ્ટાઇલ અને સ્ક્રિપ્ટીંગ પર મોટા ભાગે આધાર રાખે છે. જો કે, જો આનો યોગ્ય રીતે અમલ કરવામાં આવ્યો હોય તો, 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