অ্যাক্সেসযোগ্যতা

অ্যাক্সেসযোগ্য বিষয়বস্তু তৈরির জন্য বুটস্ট্র্যাপের বৈশিষ্ট্য এবং সীমাবদ্ধতার একটি সংক্ষিপ্ত বিবরণ।

এই পৃষ্ঠায়

বুটস্ট্র্যাপ রেডিমেড স্টাইল, লেআউট টুলস এবং ইন্টারেক্টিভ উপাদানগুলির একটি সহজে ব্যবহারযোগ্য ফ্রেমওয়ার্ক প্রদান করে, যা ডেভেলপারদের এমন ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করতে দেয় যা দৃশ্যত আকর্ষণীয়, কার্যকরীভাবে সমৃদ্ধ এবং বাক্সের বাইরে অ্যাক্সেসযোগ্য।

ওভারভিউ এবং সীমাবদ্ধতা

বুটস্ট্র্যাপ দিয়ে তৈরি যেকোন প্রজেক্টের সামগ্রিক অ্যাক্সেসিবিলিটি নির্ভর করে লেখকের মার্কআপ, অতিরিক্ত স্টাইলিং এবং স্ক্রিপ্টিংয়ের উপর। যাইহোক, যদি এইগুলি সঠিকভাবে প্রয়োগ করা হয়েছে, তবে বুটস্ট্র্যাপের সাহায্যে ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করা সম্পূর্ণরূপে সম্ভব হওয়া উচিত যা WCAG 2.1 (A/AA/AAA), সেকশন 508 এবং অনুরূপ অ্যাক্সেসিবিলিটি মান এবং প্রয়োজনীয়তা পূরণ করে।

স্ট্রাকচারাল মার্কআপ

বুটস্ট্র্যাপের স্টাইলিং এবং লেআউট বিস্তৃত মার্কআপ স্ট্রাকচারে প্রয়োগ করা যেতে পারে। এই ডকুমেন্টেশনের লক্ষ্য হল ডেভেলপারদেরকে বুটস্ট্র্যাপের ব্যবহার প্রদর্শনের জন্য সর্বোত্তম অনুশীলনের উদাহরণ প্রদান করা এবং উপযুক্ত শব্দার্থিক মার্কআপ চিত্রিত করা, যেখানে সম্ভাব্য অ্যাক্সেসিবিলিটি উদ্বেগগুলি সমাধান করা যেতে পারে।

ইন্টারেক্টিভ উপাদান

বুটস্ট্র্যাপের ইন্টারেক্টিভ কম্পোনেন্ট- যেমন মডেল ডায়ালগ, ড্রপডাউন মেনু এবং কাস্টম টুলটিপস- টাচ, মাউস এবং কীবোর্ড ব্যবহারকারীদের জন্য কাজ করার জন্য ডিজাইন করা হয়েছে। প্রাসঙ্গিক WAI - ARIA ভূমিকা এবং গুণাবলী ব্যবহারের মাধ্যমে , এই উপাদানগুলিও সহায়ক প্রযুক্তি (যেমন স্ক্রিন রিডার) ব্যবহার করে বোধগম্য এবং কার্যকর হতে হবে।

যেহেতু বুটস্ট্র্যাপের উপাদানগুলি উদ্দেশ্যমূলকভাবে মোটামুটি জেনেরিক হওয়ার জন্য ডিজাইন করা হয়েছে, লেখকদের তাদের উপাদানের সুনির্দিষ্ট প্রকৃতি এবং কার্যকারিতা আরও সঠিকভাবে জানাতে আরও ARIA ভূমিকা এবং বৈশিষ্ট্যগুলির পাশাপাশি জাভাস্ক্রিপ্ট আচরণ অন্তর্ভুক্ত করতে হবে। এটি সাধারণত ডকুমেন্টেশনে উল্লেখ করা হয়।

রঙের বৈসাদৃশ্য

রঙের কিছু সংমিশ্রণ যা বর্তমানে বুটস্ট্র্যাপের ডিফল্ট প্যালেট তৈরি করে — বোতামের বৈচিত্র্য, সতর্কতা বৈচিত্র্য, ফর্ম যাচাইকরণ সূচকগুলির মতো জিনিসগুলির জন্য ফ্রেমওয়ার্ক জুড়ে ব্যবহৃত হয় — অপর্যাপ্ত রঙের বৈসাদৃশ্য হতে পারে (প্রস্তাবিত 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সম্পত্তি ব্যবহার করে মসৃণ স্ক্রোলিং সক্ষম করে।