অ্যাক্সেসিবিলিটি ট্রি সম্পর্কে প্রাথমিক তথ্য
মনে করুন, আপনি শুধুমাত্র স্ক্রিন রিডার ব্যবহারকারীদের জন্য একটি ইউজার ইন্টারফেস তৈরি করছেন। এখানে, আপনাকে কোনও ভিজ্যুয়াল UI তৈরি করতে হবে না, তবে স্ক্রিন রিডার ব্যবহার করার জন্য পর্যাপ্ত তথ্য প্রদান করতে হবে।
আপনি যা তৈরি করবেন তা হল এক ধরনের API যা পৃষ্ঠার গঠন বর্ণনা করে, DOM API-এর মতো, তবে আপনি কম তথ্য এবং কম নোড দিয়েও কাজ চালাতে পারেন, কারণ সেই তথ্যের অনেকটাই শুধুমাত্র ভিজ্যুয়াল প্রেজেন্টেশনের জন্য উপযোগী। এটি দেখতে কিছুটা এইরকম হতে পারে।
ব্রাউজার আসলে স্ক্রিন রিডারে যা দেখায়, এটি মূলত তাই। ব্রাউজার DOM ট্রি নিয়ে সেটিকে এমন একটি ফর্মে পরিবর্তন করে যা সহায়ক প্রযুক্তির ক্ষেত্রে উপযোগী। আমরা এই পরিবর্তিত ট্রিকে অ্যাক্সেসিবিলিটি ট্রি হিসেবে উল্লেখ করি।
আপনি অ্যাক্সেসিবিলিটি ট্রিকে ৯০-এর দশকের পুরনো ওয়েব পেজের মতো দেখতে পারেন: কয়েকটি ছবি, অনেক লিঙ্ক, হয়ত একটি ফিল্ড ও বোতাম।
এই ক্ষেত্রে, কোনও পৃষ্ঠার উপর থেকে নিচ পর্যন্ত ভিজ্যুয়াল স্ক্যান করলে, স্ক্রিন রিডার ব্যবহারকারী কেমন অভিজ্ঞতা পান তা আপনি বুঝতে পারবেন। ইন্টারফেসটি আছে, তবে এটি সহজ এবং সরাসরি, অনেকটা অ্যাক্সেসিবিলিটি ট্রি ইন্টারফেসের মতো।
বেশিরভাগ সহায়ক প্রযুক্তি অ্যাক্সেসিবিলিটি ট্রি-এর সাথে ইন্টার্যাক্ট করে। ফ্লো এইভাবে কাজ করে।
- কোনও অ্যাপ্লিকেশন (ব্রাউজার বা অন্য অ্যাপ) API-এর মাধ্যমে সহায়ক প্রযুক্তিকে UI-এর সিম্যান্টিক ভার্সন দেখায়।
- সহায়ক প্রযুক্তি API-এর মাধ্যমে পড়া তথ্য ব্যবহার করে ব্যবহারকারীর জন্য বিকল্প ইউজার ইন্টারফেস প্রেজেন্টেশন তৈরি করতে পারে। যেমন, স্ক্রিন রিডার এমন একটি ইন্টারফেস তৈরি করে যেখানে ব্যবহারকারী অ্যাপের একটি স্পোকেন রিপ্রেজেন্টেশন শুনতে পান।
- এছাড়াও, সহায়ক প্রযুক্তি ব্যবহারকারীকে অন্য কোনও উপায়ে অ্যাপের সাথে ইন্টার্যাক্ট করার অনুমতি দিতে পারে। যেমন, বেশিরভাগ স্ক্রিন রিডার হুক প্রদান করে যাতে ব্যবহারকারী সহজেই মাউস ক্লিক বা আঙুল দিয়ে ট্যাপ করার মতো অ্যাকশন সিমুলেট করতে পারেন।
- সহায়ক প্রযুক্তি, অ্যাক্সেসিবিলিটি API-এর মাধ্যমে ব্যবহারকারীর উদ্দেশ্য (যেমন "ক্লিক করুন") অ্যাপে রিলে করে। তারপর, আসল UI-এর প্রসঙ্গে অ্যাকশনটি যথাযথভাবে ব্যাখ্যা করার দায়িত্ব অ্যাপের উপর বর্তায়।
ওয়েব ব্রাউজারের ক্ষেত্রে, প্রতিটি দিকে একটি অতিরিক্ত ধাপ আছে, কারণ ব্রাউজার আসলে ওয়েব অ্যাপের জন্য একটি প্ল্যাটফর্ম যা এর মধ্যে রান করে। তাই ব্রাউজারকে ওয়েব অ্যাপটিকে একটি অ্যাক্সেসিবিলিটি ট্রিতে অনুবাদ করতে হবে এবং নিশ্চিত করতে হবে যে সহায়ক প্রযুক্তি থেকে আসা ব্যবহারকারীর অ্যাকশনের উপর ভিত্তি করে জাভাস্ক্রিপ্টে উপযুক্ত ইভেন্টগুলি ট্রিগার করা হয়েছে।
তবে, এটি ব্রাউজারের দায়িত্ব। ওয়েব ডেভেলপার হিসেবে আমাদের কাজ হল এই প্রক্রিয়া সম্পর্কে সচেতন থাকা এবং এমন ওয়েব পেজ তৈরি করা যা এই প্রক্রিয়ার সুবিধা নিয়ে আমাদের ব্যবহারকারীদের জন্য একটি অ্যাক্সেসযোগ্য অভিজ্ঞতা তৈরি করে।
আমরা এটি করি আমাদের পৃষ্ঠার শব্দার্থ সঠিকভাবে প্রকাশ করার মাধ্যমে: পৃষ্ঠার গুরুত্বপূর্ণ উপাদানগুলির সঠিক অ্যাক্সেসযোগ্য ভূমিকা, অবস্থা এবং বৈশিষ্ট্য রয়েছে এবং আমরা অ্যাক্সেসযোগ্য নাম এবং বিবরণ নির্দিষ্ট করেছি কিনা তা নিশ্চিত করা। ব্রাউজার তখন কাস্টমাইজ করা অভিজ্ঞতা তৈরি করতে সহায়ক প্রযুক্তিকে সেই তথ্য অ্যাক্সেস করতে দিতে পারে।
নেটিভ HTML-এ সেম্যান্টিক্স
ব্রাউজার DOM ট্রিকে অ্যাক্সেসিবিলিটি ট্রিতে পরিবর্তন করতে পারে কারণ DOM-এর বেশিরভাগ অংশের অন্তর্নিহিত শব্দার্থিক অর্থ আছে। অর্থাৎ, DOM নেটিভ HTML এলিমেন্ট ব্যবহার করে যা ব্রাউজার শনাক্ত করতে পারে এবং বিভিন্ন প্ল্যাটফর্মে প্রত্যাশিতভাবে কাজ করে। লিঙ্ক বা বোতামের মতো নেটিভ HTML এলিমেন্টের অ্যাক্সেসিবিলিটি অটোমেটিক ম্যানেজ করা হয়। আমরা HTML লিখে সেই বিল্ট-ইন অ্যাক্সেসিবিলিটির সুবিধা নিতে পারি যা আমাদের পৃষ্ঠার এলিমেন্টের সিম্যান্টিক্স প্রকাশ করে।
তবে, কখনও কখনও আমরা এমন এলিমেন্ট ব্যবহার করি যা নেটিভ এলিমেন্টের মতো দেখতে হলেও আসলে তা নয়। যেমন, এই "বোতাম" আসলে কোনও বোতামই নয়।
এটি HTML-এ যেকোনও উপায়ে তৈরি করা যেতে পারে; একটি উপায় নিচে দেখানো হল।
<div class="button-ish">Give me tacos</div>
আমরা যখন কোনও আসল বোতাম এলিমেন্ট ব্যবহার করি না, তখন স্ক্রিন রিডারের পক্ষে এটি জানার কোনও উপায় থাকে না যে এটি কীসের উপর ল্যান্ড করেছে। এছাড়াও, শুধুমাত্র কীবোর্ড ব্যবহারকারীদের জন্য এটি ব্যবহারযোগ্য করতে আমাদের tabindex যোগ করার অতিরিক্ত কাজ করতে হবে কারণ, এটি এখন যেভাবে কোড করা হয়েছে, এটি শুধুমাত্র মাউসের মাধ্যমে ব্যবহার করা যেতে পারে।
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>
চেকবক্সটি সঠিকভাবে লেবেল করা হলে, স্ক্রিন রিডার রিপোর্ট করতে পারে যে এলিমেন্টটির ভূমিকা চেকবক্সের মতো, এটি চেক করা অবস্থায় আছে এবং এর নাম "প্রোমোশনাল অফার পেতে চান?"।
