অ্যাক্সেসিবিলিটি ট্রির পরিচিতি
কল্পনা করুন যে আপনি শুধুমাত্র স্ক্রিন রিডার ব্যবহারকারীদের জন্য একটি ইউজার ইন্টারফেস তৈরি করছেন। এখানে, আপনাকে কোনও ভিজ্যুয়াল UI তৈরি করতে হবে না, তবে স্ক্রিন রিডার ব্যবহারের জন্য যথেষ্ট তথ্য প্রদান করুন৷
আপনি যা তৈরি করবেন তা হল এক ধরনের API যা পৃষ্ঠার গঠন বর্ণনা করে, DOM API-এর মতো, কিন্তু আপনি কম তথ্য এবং কম নোড দিয়ে দূরে যেতে পারেন, কারণ সেই তথ্যের অনেকগুলি শুধুমাত্র ভিজ্যুয়াল উপস্থাপনার জন্য উপযোগী। এটা এই মত কিছু দেখতে পারে.
এটি মূলত ব্রাউজার আসলে স্ক্রিন রিডারের কাছে উপস্থাপন করে। ব্রাউজারটি DOM ট্রি নেয় এবং এটিকে একটি ফর্মে পরিবর্তন করে যা সহায়ক প্রযুক্তির জন্য উপযোগী। আমরা এই পরিবর্তিত গাছটিকে অ্যাক্সেসিবিলিটি ট্রি হিসাবে উল্লেখ করি।
আপনি অ্যাক্সেসিবিলিটি ট্রিটিকে 90 এর দশকের একটি পুরানো ওয়েব পৃষ্ঠার মতো দেখতে দেখতে পারেন: কয়েকটি ছবি, প্রচুর লিঙ্ক, সম্ভবত একটি ক্ষেত্র এবং একটি বোতাম৷
এই ক্ষেত্রের মতো একটি পৃষ্ঠা দৃশ্যত স্ক্যান করা আপনাকে একটি স্ক্রিন রিডার ব্যবহারকারীর মতো অভিজ্ঞতা দেয়। ইন্টারফেস আছে, কিন্তু এটি সহজ এবং সরাসরি, অনেকটা একটি অ্যাক্সেসিবিলিটি ট্রি ইন্টারফেসের মতো।
অ্যাক্সেসিবিলিটি ট্রি হল যা সবচেয়ে সহায়ক প্রযুক্তির সাথে যোগাযোগ করে। প্রবাহ এই মত কিছু যায়.
- একটি অ্যাপ্লিকেশন (ব্রাউজার বা অন্যান্য অ্যাপ) একটি API এর মাধ্যমে সহায়ক প্রযুক্তিতে তার UI এর একটি শব্দার্থিক সংস্করণ প্রকাশ করে।
- সহায়ক প্রযুক্তি ব্যবহারকারীর জন্য একটি বিকল্প ব্যবহারকারী ইন্টারফেস উপস্থাপনা তৈরি করতে API এর মাধ্যমে পড়া তথ্য ব্যবহার করতে পারে। উদাহরণস্বরূপ, একটি স্ক্রিন রিডার একটি ইন্টারফেস তৈরি করে যেখানে ব্যবহারকারী অ্যাপটির একটি উচ্চারিত উপস্থাপনা শুনতে পান।
- সহায়ক প্রযুক্তি ব্যবহারকারীকে অ্যাপের সাথে অন্যভাবে ইন্টারঅ্যাক্ট করার অনুমতি দিতে পারে। উদাহরণস্বরূপ, বেশিরভাগ স্ক্রিন রিডার হুক প্রদান করে যাতে ব্যবহারকারী সহজেই একটি মাউস ক্লিক বা আঙুলের ট্যাপ অনুকরণ করতে পারে।
- সহায়ক প্রযুক্তি ব্যবহারকারীর অভিপ্রায়কে (যেমন "ক্লিক") অ্যাকসেসিবিলিটি API-এর মাধ্যমে অ্যাপে ফিরিয়ে দেয়। তারপরে আসল UI এর প্রসঙ্গে অ্যাকশনটিকে যথাযথভাবে ব্যাখ্যা করার দায়িত্ব অ্যাপটির রয়েছে।
ওয়েব ব্রাউজারগুলির জন্য, প্রতিটি দিকে একটি অতিরিক্ত পদক্ষেপ রয়েছে, কারণ ব্রাউজারটি আসলে ওয়েব অ্যাপগুলির জন্য একটি প্ল্যাটফর্ম যা এর ভিতরে চলে৷ তাই ব্রাউজারটিকে ওয়েব অ্যাপটিকে একটি অ্যাক্সেসিবিলিটি ট্রিতে অনুবাদ করতে হবে এবং অবশ্যই নিশ্চিত করতে হবে যে সহায়ক প্রযুক্তি থেকে আসা ব্যবহারকারীর ক্রিয়াগুলির উপর ভিত্তি করে উপযুক্ত ইভেন্টগুলি জাভাস্ক্রিপ্টে ফায়ার করা হয়েছে৷
কিন্তু সে সব ব্রাউজারের দায়িত্ব। ওয়েব ডেভেলপার হিসেবে আমাদের কাজ শুধু সচেতন হওয়া যে এটি চলছে, এবং আমাদের ব্যবহারকারীদের জন্য একটি অ্যাক্সেসযোগ্য অভিজ্ঞতা তৈরি করতে এই প্রক্রিয়াটির সুবিধা গ্রহণ করে এমন ওয়েব পৃষ্ঠাগুলি বিকাশ করা।
আমরা আমাদের পৃষ্ঠাগুলির শব্দার্থকে সঠিকভাবে প্রকাশ করি তা নিশ্চিত করার মাধ্যমে আমরা এটি করি: নিশ্চিত করুন যে পৃষ্ঠার গুরুত্বপূর্ণ উপাদানগুলির সঠিক অ্যাক্সেসযোগ্য ভূমিকা, রাজ্য এবং বৈশিষ্ট্য রয়েছে এবং আমরা অ্যাক্সেসযোগ্য নাম এবং বিবরণ নির্দিষ্ট করি৷ ব্রাউজার তখন একটি কাস্টমাইজড অভিজ্ঞতা তৈরি করতে সহায়ক প্রযুক্তিকে সেই তথ্য অ্যাক্সেস করতে দিতে পারে।
নেটিভ HTML এ শব্দার্থবিদ্যা
একটি ব্রাউজার DOM ট্রিকে একটি অ্যাক্সেসিবিলিটি ট্রিতে রূপান্তরিত করতে পারে কারণ DOM-এর বেশিরভাগই অন্তর্নিহিত শব্দার্থিক অর্থ রয়েছে। অর্থাৎ, DOM নেটিভ HTML উপাদান ব্যবহার করে যা ব্রাউজার দ্বারা স্বীকৃত এবং বিভিন্ন প্ল্যাটফর্মে অনুমানযোগ্যভাবে কাজ করে। নেটিভ HTML উপাদান যেমন লিঙ্ক বা বোতামগুলির জন্য অ্যাক্সেসযোগ্যতা এইভাবে স্বয়ংক্রিয়ভাবে পরিচালনা করা হয়। আমরা এইচটিএমএল লিখে সেই অন্তর্নির্মিত অ্যাক্সেসযোগ্যতার সুবিধা নিতে পারি যা আমাদের পৃষ্ঠার উপাদানগুলির শব্দার্থকে প্রকাশ করে।
যাইহোক, কখনও কখনও আমরা এমন উপাদান ব্যবহার করি যা দেখতে নেটিভ উপাদানগুলির মতো কিন্তু নয়। উদাহরণস্বরূপ, এই "বোতাম" মোটেও একটি বোতাম নয়।
এটি এইচটিএমএল-এ যেকোন উপায়ে তৈরি করা যেতে পারে; একটি উপায় নীচে দেখানো হয়েছে।
<div class="button-ish">Give me tacos</div>
যখন আমরা একটি প্রকৃত বোতাম উপাদান ব্যবহার করি না, তখন স্ক্রিন রিডারের কাছে এটি কী ঘটেছে তা জানার কোন উপায় থাকে না। এছাড়াও, শুধুমাত্র কীবোর্ড ব্যবহারকারীদের জন্য এটি ব্যবহারযোগ্য করার জন্য আমাদের ট্যাবিনডেক্স যোগ করার অতিরিক্ত কাজ করতে হবে কারণ, এটি এখন কোড করা হয়েছে, এটি শুধুমাত্র একটি মাউস দিয়ে ব্যবহার করা যেতে পারে।
আমরা div এর পরিবর্তে একটি নিয়মিত button উপাদান ব্যবহার করে সহজেই এটি ঠিক করতে পারি। একটি নেটিভ উপাদান ব্যবহার করে আমাদের জন্য কীবোর্ড ইন্টারঅ্যাকশনের যত্ন নেওয়ার সুবিধাও রয়েছে। এবং মনে রাখবেন যে আপনি একটি নেটিভ উপাদান ব্যবহার করার কারণে আপনার স্পিফি ভিজ্যুয়াল প্রভাবগুলি হারাতে হবে না; আপনি নেটিভ উপাদানগুলিকে আপনার পছন্দ মতো দেখতে এবং এখনও অন্তর্নিহিত শব্দার্থ এবং আচরণ বজায় রাখতে স্টাইল করতে পারেন।
এর আগে আমরা উল্লেখ করেছি যে স্ক্রিন রিডাররা একটি উপাদানের ভূমিকা, নাম, রাষ্ট্র এবং মান ঘোষণা করবে। সঠিক শব্দার্থিক উপাদান ব্যবহার করে, ভূমিকা, রাষ্ট্র এবং মান কভার করা হয়, তবে আমাদের অবশ্যই নিশ্চিত করতে হবে যে আমরা একটি উপাদানের নাম আবিষ্কারযোগ্য করে তুলি।
বিস্তৃতভাবে, দুটি ধরণের নাম রয়েছে:
- দৃশ্যমান লেবেল , যা সমস্ত ব্যবহারকারীদের দ্বারা একটি উপাদানের সাথে অর্থ যুক্ত করতে ব্যবহৃত হয়, এবং৷
- টেক্সট বিকল্প , যা শুধুমাত্র তখনই ব্যবহার করা হয় যখন কোন ভিজ্যুয়াল লেবেলের প্রয়োজন হয় না।
পাঠ্য-স্তরের উপাদানগুলির জন্য, আমাদের কিছু করার দরকার নেই, কারণ সংজ্ঞা অনুসারে এতে কিছু পাঠ্য সামগ্রী থাকবে। যাইহোক, ইনপুট বা কন্ট্রোল এলিমেন্টের জন্য এবং ছবির মত ভিজ্যুয়াল কন্টেন্টের জন্য, আমাদের নিশ্চিত করতে হবে যে আমরা একটি নাম নির্দিষ্ট করি। প্রকৃতপক্ষে, যেকোনো নন-টেক্সট কন্টেন্টের জন্য টেক্সট বিকল্প প্রদান করা হল WebAIM চেকলিস্টের প্রথম আইটেম ।
এটি করার একটি উপায় হল তাদের সুপারিশ অনুসরণ করা যে "ফর্ম ইনপুটগুলিতে পাঠ্য লেবেল যুক্ত রয়েছে।" একটি ফর্ম উপাদানের সাথে একটি লেবেল সংযুক্ত করার দুটি উপায় আছে, যেমন একটি চেকবক্স৷ যেকোন একটি পদ্ধতির কারণে লেবেল টেক্সট চেকবক্সের জন্য একটি ক্লিক টার্গেটে পরিণত হয়, যা মাউস বা টাচস্ক্রিন ব্যবহারকারীদের জন্যও সহায়ক। একটি উপাদানের সাথে একটি লেবেল সংযুক্ত করতে, হয়
- একটি লেবেল উপাদানের ভিতরে ইনপুট উপাদান রাখুন
<label>
<input type="checkbox">Receive promotional offers?
</label>
বা
- অ্যাট্রিবিউটের
forলেবেল ব্যবহার করুন এবং উপাদানেরidউল্লেখ করুন
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
যখন চেকবক্সটি সঠিকভাবে লেবেল করা হয়, তখন স্ক্রিন রিডার রিপোর্ট করতে পারে যে উপাদানটিতে চেকবক্সের একটি ভূমিকা রয়েছে, একটি চেক করা অবস্থায় রয়েছে এবং "প্রচারমূলক অফারগুলি পান?" নামকরণ করা হয়েছে৷
