പ്രവേശനക്ഷമത

ആക്‌സസ് ചെയ്യാവുന്ന ഉള്ളടക്കം സൃഷ്ടിക്കുന്നതിനുള്ള ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സവിശേഷതകളെയും പരിമിതികളെയും കുറിച്ചുള്ള ഒരു ഹ്രസ്വ അവലോകനം.

ഈ പേജിൽ

ബൂട്ട്സ്ട്രാപ്പ്, റെഡിമെയ്ഡ് ശൈലികൾ, ലേഔട്ട് ടൂളുകൾ, ഇന്ററാക്റ്റീവ് ഘടകങ്ങൾ എന്നിവയുടെ എളുപ്പത്തിൽ ഉപയോഗിക്കാവുന്ന ചട്ടക്കൂട് നൽകുന്നു, ദൃശ്യപരമായി ആകർഷകവും പ്രവർത്തനപരമായി സമ്പന്നവും ബോക്സിൽ നിന്ന് ആക്സസ് ചെയ്യാവുന്നതുമായ വെബ്സൈറ്റുകളും ആപ്ലിക്കേഷനുകളും സൃഷ്ടിക്കാൻ ഡവലപ്പർമാരെ അനുവദിക്കുന്നു.

അവലോകനവും പരിമിതികളും

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മിച്ച ഏതൊരു പ്രോജക്റ്റിന്റെയും മൊത്തത്തിലുള്ള പ്രവേശനക്ഷമത, രചയിതാവിന്റെ മാർക്ക്അപ്പ്, അധിക സ്റ്റൈലിംഗ്, അവർ ഉൾപ്പെടുത്തിയ സ്‌ക്രിപ്റ്റിംഗ് എന്നിവയെ ആശ്രയിച്ചിരിക്കുന്നു. എന്നിരുന്നാലും, ഇവ ശരിയായി നടപ്പിലാക്കിയിട്ടുണ്ടെങ്കിൽ, WCAG 2.1 (A/AA/AAA), സെക്ഷൻ 508 , കൂടാതെ സമാനമായ പ്രവേശനക്ഷമത മാനദണ്ഡങ്ങളും ആവശ്യകതകളും നിറവേറ്റുന്ന വെബ്‌സൈറ്റുകളും ആപ്ലിക്കേഷനുകളും ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് സൃഷ്‌ടിക്കുന്നത് തികച്ചും സാധ്യമായിരിക്കണം.

ഘടനാപരമായ മാർക്ക്അപ്പ്

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സ്‌റ്റൈലിങ്ങും ലേഔട്ടും വിപുലമായ ശ്രേണിയിലുള്ള മാർക്ക്അപ്പ് ഘടനകളിൽ പ്രയോഗിക്കാവുന്നതാണ്. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉപയോഗം തന്നെ പ്രകടമാക്കുന്നതിനും ഉചിതമായ സെമാന്റിക് മാർക്ക്അപ്പ് ചിത്രീകരിക്കുന്നതിനുമുള്ള മികച്ച പ്രാക്ടീസ് ഉദാഹരണങ്ങൾ ഡവലപ്പർമാർക്ക് നൽകാൻ ഈ ഡോക്യുമെന്റേഷൻ ലക്ഷ്യമിടുന്നു, സാധ്യതയുള്ള പ്രവേശനക്ഷമത ആശങ്കകൾ പരിഹരിക്കാൻ കഴിയുന്ന വഴികൾ ഉൾപ്പെടെ.

സംവേദനാത്മക ഘടകങ്ങൾ

മോഡൽ ഡയലോഗുകൾ, ഡ്രോപ്പ്ഡൗൺ മെനുകൾ, ഇഷ്‌ടാനുസൃത ടൂൾടിപ്പുകൾ എന്നിവ പോലുള്ള ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സംവേദനാത്മക ഘടകങ്ങൾ ടച്ച്, മൗസ്, കീബോർഡ് ഉപയോക്താക്കൾക്കായി പ്രവർത്തിക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. പ്രസക്തമായ WAI - ARIA റോളുകളും ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കുന്നതിലൂടെ, സഹായ സാങ്കേതികവിദ്യകൾ (സ്ക്രീൻ റീഡറുകൾ പോലുള്ളവ) ഉപയോഗിച്ച് ഈ ഘടകങ്ങൾ മനസ്സിലാക്കാവുന്നതും പ്രവർത്തനക്ഷമവുമായിരിക്കണം.

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഘടകങ്ങൾ തികച്ചും സാമാന്യമായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നതിനാൽ, അവയുടെ ഘടകത്തിന്റെ കൃത്യമായ സ്വഭാവവും പ്രവർത്തനവും കൂടുതൽ കൃത്യമായി അറിയിക്കുന്നതിന് രചയിതാക്കൾക്ക് കൂടുതൽ ARIA റോളുകളും ആട്രിബ്യൂട്ടുകളും കൂടാതെ JavaScript സ്വഭാവവും ഉൾപ്പെടുത്തേണ്ടി വന്നേക്കാം. ഇത് സാധാരണയായി ഡോക്യുമെന്റേഷനിൽ രേഖപ്പെടുത്തിയിട്ടുണ്ട്.

വർണ്ണ വൈരുദ്ധ്യം

നിലവിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് പാലറ്റ് നിർമ്മിക്കുന്ന നിറങ്ങളുടെ ചില കോമ്പിനേഷനുകൾ—ബട്ടൺ വ്യതിയാനങ്ങൾ, അലേർട്ട് വ്യതിയാനങ്ങൾ, ഫോം മൂല്യനിർണ്ണയ സൂചകങ്ങൾ തുടങ്ങിയ കാര്യങ്ങൾക്കായി ഫ്രെയിംവർക്കിലുടനീളം ഉപയോഗിക്കുന്നത്— അപര്യാപ്തമായ വർണ്ണ കോൺട്രാസ്റ്റിലേക്ക് നയിച്ചേക്കാം (ശുപാർശ ചെയ്ത WCAG 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, ബൂട്ട്‌സ്‌ട്രാപ്പ് 5- കൾ ഒരു ഒറ്റപ്പെട്ട ക്ലാസാണ്, ക്ലാസുമായി സംയോജിച്ച് ഉപയോഗിക്കാൻ പാടില്ല ..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