ઉપલ્બધતા

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

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

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

બુટસ્ટ્રેપ વડે બનેલ કોઈપણ પ્રોજેક્ટની એકંદર સુલભતા લેખકના માર્કઅપ, વધારાની સ્ટાઇલ અને સ્ક્રિપ્ટીંગ પર મોટા ભાગે આધાર રાખે છે. જો કે, જો આનો યોગ્ય રીતે અમલ કરવામાં આવ્યો હોય તો, WCAG 2.0 (A/AA/AAA), કલમ 508 અને સમાન સુલભતા ધોરણો અને જરૂરિયાતોને પૂર્ણ કરતી વેબસાઇટ્સ અને એપ્લિકેશન્સ બુટસ્ટ્રેપ સાથે બનાવવાનું સંપૂર્ણ રીતે શક્ય હોવું જોઈએ .

માળખાકીય માર્કઅપ

બુટસ્ટ્રેપની સ્ટાઇલ અને લેઆઉટને માર્કઅપ સ્ટ્રક્ચર્સની વિશાળ શ્રેણી પર લાગુ કરી શકાય છે. આ દસ્તાવેજીકરણનો ઉદ્દેશ્ય વિકાસકર્તાઓને બુટસ્ટ્રેપના ઉપયોગને દર્શાવવા માટે શ્રેષ્ઠ પ્રેક્ટિસ ઉદાહરણો પ્રદાન કરવાનો છે અને સંભવિત સુલભતાની ચિંતાઓને દૂર કરી શકાય તેવી રીતો સહિત યોગ્ય સિમેન્ટીક માર્કઅપ દર્શાવવાનો છે.

ઇન્ટરેક્ટિવ ઘટકો

બુટસ્ટ્રેપના ઇન્ટરેક્ટિવ ઘટકો-જેમ કે મોડલ ડાયલોગ્સ, ડ્રોપડાઉન મેનુ અને કસ્ટમ ટૂલટિપ્સ-ટચ, માઉસ અને કીબોર્ડ વપરાશકર્તાઓ માટે કામ કરવા માટે ડિઝાઇન કરવામાં આવ્યા છે. સંબંધિત WAI - ARIA ભૂમિકાઓ અને વિશેષતાઓના ઉપયોગ દ્વારા, આ ઘટકો સહાયક તકનીકો (જેમ કે સ્ક્રીન રીડર્સ) નો ઉપયોગ કરીને સમજી શકાય તેવા અને કાર્યક્ષમ હોવા જોઈએ.

કારણ કે બુટસ્ટ્રેપના ઘટકો હેતુપૂર્વક એકદમ સામાન્ય બનવા માટે રચાયેલ છે, લેખકોએ તેમના ઘટકની ચોક્કસ પ્રકૃતિ અને કાર્યક્ષમતાને વધુ સચોટ રીતે અભિવ્યક્ત કરવા માટે વધુ ARIA ભૂમિકાઓ અને વિશેષતાઓ, તેમજ JavaScript વર્તનનો સમાવેશ કરવાની જરૂર પડી શકે છે. આ સામાન્ય રીતે દસ્તાવેજીકરણમાં નોંધવામાં આવે છે.

રંગ વિરોધાભાસ

મોટા ભાગના રંગો કે જે હાલમાં બુટસ્ટ્રેપની ડિફોલ્ટ પેલેટ બનાવે છે - બટનની વિવિધતા, ચેતવણી વિવિધતાઓ, ફોર્મ માન્યતા સૂચકાંકો જેવી વસ્તુઓ માટે સમગ્ર ફ્રેમવર્કમાં ઉપયોગમાં લેવાય છે - જ્યારે તેની સામે ઉપયોગ થાય છે ત્યારે અપર્યાપ્ત રંગ કોન્ટ્રાસ્ટ તરફ દોરી જાય છે ( 4.5:1 ના ભલામણ કરેલ WCAG 2.0 કલર કોન્ટ્રાસ્ટ રેશિયોની નીચે ) પ્રકાશ પૃષ્ઠભૂમિ. પર્યાપ્ત રંગ કોન્ટ્રાસ્ટ રેશિયો સુનિશ્ચિત કરવા લેખકોએ આ ડિફોલ્ટ રંગોને મેન્યુઅલી સંશોધિત/વિસ્તૃત કરવાની જરૂર પડશે.

સામગ્રી જે દૃષ્ટિની રીતે છુપાયેલ હોવી જોઈએ, પરંતુ સ્ક્રીન રીડર્સ જેવી સહાયક તકનીકો માટે સુલભ રહે છે, તે .sr-onlyવર્ગનો ઉપયોગ કરીને સ્ટાઇલ કરી શકાય છે. આ એવી પરિસ્થિતિઓમાં ઉપયોગી થઈ શકે છે જ્યાં વધારાની વિઝ્યુઅલ માહિતી અથવા સંકેતો (જેમ કે રંગના ઉપયોગ દ્વારા દર્શાવવામાં આવેલ અર્થ) નોન-દ્રશ્ય વપરાશકર્તાઓને પણ પહોંચાડવાની જરૂર હોય છે.

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

દૃષ્ટિની રીતે છુપાયેલા ઇન્ટરેક્ટિવ નિયંત્રણો માટે, જેમ કે પરંપરાગત "છોડો" લિંક્સને વર્ગ .sr-onlyસાથે જોડી શકાય છે . .sr-only-focusableઆ સુનિશ્ચિત કરશે કે એકવાર ધ્યાન કેન્દ્રિત કર્યા પછી નિયંત્રણ દૃશ્યમાન બને છે (દ્રષ્ટા કીબોર્ડ વપરાશકર્તાઓ માટે).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

ઘટાડો ગતિ

prefers-reduced-motionબુટસ્ટ્રેપમાં મીડિયા લક્ષણ માટે આધારનો સમાવેશ થાય છે . બ્રાઉઝર્સ/પર્યાવરણમાં કે જે વપરાશકર્તાને ઓછી ગતિ માટે તેમની પસંદગીનો ઉલ્લેખ કરવાની મંજૂરી આપે છે, બુટસ્ટ્રેપમાં મોટાભાગની CSS સંક્રમણ અસરો (ઉદાહરણ તરીકે, જ્યારે મોડલ સંવાદ ખોલવામાં અથવા બંધ કરવામાં આવે છે, અથવા કેરોયુઝલમાં સ્લાઇડિંગ એનિમેશન) અક્ષમ કરવામાં આવશે.