উত্তর:
এইচটিএমএল 5 এআরআইএ বৈশিষ্ট্যটি আপনি যা খুঁজছেন তা। এটি আপনার কোডে এমনকি বুটস্ট্র্যাপ ছাড়াই ব্যবহার করা যেতে পারে।
অ্যাক্সেসযোগ্য সমৃদ্ধ ইন্টারনেট অ্যাপ্লিকেশন (এআরআইএ) প্রতিবন্ধী ব্যক্তিদের জন্য ওয়েব সামগ্রী এবং ওয়েব অ্যাপ্লিকেশনগুলিকে (বিশেষত এজ্যাক্স এবং জাভাস্ক্রিপ্ট দ্বারা বিকাশিত) আরও অ্যাক্সেসযোগ্য করার উপায়গুলি সংজ্ঞায়িত করে।
আপনার প্রশ্নের সুনির্দিষ্ট হওয়ার জন্য, এখানে আপনার বৈশিষ্ট্যগুলিকে এআরআইএ অ্যাট্রিবিউট স্টেটস এবং মডেল হিসাবে ডাকা হয়
aria-labelledby: বর্তমান উপাদানটিকে লেবেল করে এমন উপাদান (বা উপাদান) সনাক্ত করে।
aria-hidden (state): ইঙ্গিত দেয় যে উপাদানটি এবং এর বংশধরেরা লেখকের দ্বারা প্রয়োগ করা হিসাবে কোনও ব্যবহারকারীর কাছে দৃশ্যমান বা উপলব্ধিযোগ্য নয়।
এই বৈশিষ্ট্যগুলির প্রাথমিক গ্রাহকরা অন্ধ লোকদের জন্য পর্দার পাঠকদের মতো ব্যবহারকারী এজেন্ট। সুতরাং একটি বুটস্ট্র্যাপ মডেল ক্ষেত্রে ক্ষেত্রে, মডেল এর divআছে role="dialog"। যখন স্ক্রিন রিডারটি লক্ষ্য করে যে divকোনওটি দৃশ্যমান হয়ে ওঠে যার মধ্যে এই ভূমিকা রয়েছে, এটি তার জন্য লেবেলটি কথা বলবেdiv ।
সেখানে উপায়ে কিছু (এবং Gmail- কে সঙ্গে কয়েকটি নতুন বেশী) লেবেল প্রচুর আছে, কিন্তু কিছু ক্ষেত্রে এটি ব্যবহার ছাড়া একটি লেবেল (শব্দার্থিক) নামে একটি বিদ্যমান উপাদান ব্যবহার করতে উপযুক্ত <label>HTML ট্যাগটি। এইচটিএমএল মডেলগুলির সাথে লেবেলটি সাধারণত একটি <h>শিরোনাম হয়। সুতরাং বুটস্ট্র্যাপ মডেল ক্ষেত্রে, আপনি যুক্ত করুন aria-labelledby=[IDofModalHeader]এবং মডেলটি উপস্থিত হওয়ার পরে স্ক্রিন রিডার সেই শিরোনামটি বলবে।
সাধারণত স্ক্রিন রিডারটি স্পষ্টভাবে লক্ষ্য করা যায় যখনই ডিওএম উপাদানগুলি দৃশ্যমান বা অদৃশ্য হয়ে যায়, তাই aria-hiddenসম্পত্তি প্রায়শই অপ্রয়োজনীয় হয় এবং সম্ভবত বেশিরভাগ ক্ষেত্রে এড়িয়ে যেতে পারে।
aria-hidden="true"গ্লাইফিকন আইকনগুলির মতো আলংকারিক আইটেমগুলি পর্দার পাঠকদের কাছ থেকে আড়াল করবে, যার অর্থবহ উচ্চারণ নেই যাতে বিভ্রান্তি না ঘটে। ভাল অনুশীলনের বিষয় হিসাবে এটি করা একটি দুর্দান্ত জিনিস।
এআরআইএ কার্যকারিতা পরিবর্তন করে না, এটি কেবল উপস্থাপিত ভূমিকা / বৈশিষ্ট্যগুলি স্ক্রিন রিডার ব্যবহারকারীদের জন্য পরিবর্তন করে। ওয়েবএআইএম এর ওয়েভ টুলবার পৃষ্ঠায় এআরআইএর ভূমিকা চিহ্নিত করে।
দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে আরিয়া ব্যবহার করা হয়। দৃষ্টি প্রতিবন্ধী ব্যবহারকারীরা JAWS, এনভিডিএ, এর মতো স্ক্রিন রিডার সফ্টওয়্যার ব্যবহার করে অ্যাপ্লিকেশন নেভিগেট করে .. কোডটিতে লিখিত সামগ্রী যুক্ত করতে আরিয়া ব্যবহার করা যেতে পারে যা স্ক্রিন পাঠক ব্যবহারকারীদের ভূমিকা, রাজ্য, লেবেল এবং নিয়ন্ত্রণের উদ্দেশ্য বুঝতে সহায়তা করে
আরিয়া চাক্ষুষভাবে কিছুই পরিবর্তন করে না। (ডিজাইনারদেরও আরিয়া ভয় পান)।
Aria-গোপন:
স্ক্রিন রিডার (জেডাব্লুএস, এনভিডিএ, ...) ব্যবহার করে অ্যাপ্লিকেশন মাধ্যমে নেভিগেট করে দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য সামগ্রী আড়াল করতে আরিয়া-লুকানো বৈশিষ্ট্য ব্যবহার করা হয়।
সত্য, মিথ্যা মান সহ আরিয়া-লুকানো বৈশিষ্ট্য ব্যবহৃত হয়।
ব্যবহারবিধি:
<i class = "fa fa-books" aria-hidden = "true"></i><i>অ্যাপ্লিকেশনটিতে কোনও দৃশ্য পরিবর্তন না করে স্ক্রিন রিডার ব্যবহারকারীদের কাছে সামগ্রী আড়াল করে আরিয়া-লুকানো = "সত্য" ব্যবহার করা।
Aria লেবেল
স্ক্রিন রিডার ব্যবহারকারীদের কাছে আরিয়া-লেবেল বৈশিষ্ট্যটি লেবেল যোগাযোগ করতে ব্যবহৃত হয়। সাধারণত অনুসন্ধান ইনপুট ক্ষেত্রে ভিজ্যুয়াল লেবেল থাকে না (ডিজাইনারদের ধন্যবাদ)। স্ক্রিন রিডার ব্যবহারকারীদের কাছে নিয়ন্ত্রণের লেবেল যোগাযোগ করতে আরিয়া-লেবেল ব্যবহার করা যেতে পারে
ব্যবহারবিধি:
<input type = "edit" aria-label = "search" placeholder = "search">আবেদনের কোনও দৃশ্য পরিবর্তন নেই। তবে স্ক্রিন পাঠকরা নিয়ন্ত্রণের উদ্দেশ্য বুঝতে পারেন
Aria-labelledby
এরিয়া-লেবেল এবং আরিয়া-লেবেলদ্বি উভয়ই লেবেলটি যোগাযোগ করতে ব্যবহৃত হয়। তবে পৃষ্ঠাটিতে ইতিমধ্যে উপস্থিত যে কোনও লেবেলকে রেফারেন্স করতে আরিয়া-লেবেল্ডবাই ব্যবহার করা যেতে পারে, তবে এরিয়া-লেবেলটি সেই লেবেলটি যোগাযোগ করার জন্য ব্যবহৃত হয় যা আমি দর্শনীয়ভাবে প্রদর্শন করি নি
পন্থা 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">স্ক্রিন রিডার ব্যবহারকারীদের জন্য দুটি লেবেল একত্রিত করতে আরিয়া-লেবেল্ডবি ব্যবহার করা যেতে পারে
পদ্ধতির 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">