একটি accessible এবং usable web form তৈরিতে করণীয়

প্রথম প্রকাশ: Wednesday, January 6, 2016 

BDLance E-Learing পেইজে

----------------------------

 Web form ডায়নামিক ওয়েব সাইটের একটি গুরুত্বপূর্ণ অংশ । এই ফর্মের মাধ্যমে একজন ব্যবহারকারী ওয়েব সাইটটিতে রেজিস্ট্রেশন করা, এডমিনকে মেসেজ/ইমেইল দেয়া, ই-মেইল সাবস্ক্রাইব করা ইত্যাদি কাজ করতে পারেন । এর মাধ্যমে ব্যবহারকারী ও ওয়েব সাইটের মধ্যে একটি আন্ত:ক্রিয়া সংগঠিত হয় । তাই যেনতেন ভাবে ফরম তৈরি করলেই কাজ শেষ হয়ে যায় না । ফর্মটিকে করতে হয় অধিকতর accessible এবং usable । সেজন্য নিতে হবে নিচের পদক্ষেপগুলো গুরুত্বের সাথে ।

1.   প্রতিটি input এ যথাযথভাবে label দিতে হবে । ডিজাইনে লেবেল না থাকলেও লেবেল ব্যবহার করে সেটাকে css দিয়ে হাইড করে দেয়া যেতে পারে । লেবেল দিলে ইনপুট ফিল্ড semantic হয় । অর্থাৎ ব্রাউজারগুলো অন্যান্য semantic element (যেমন- header, section, main, article) এর মত ইনপুট গুলোকেও চিনতে পারে । সবচেয়ে বড় বিষয়, screen reader software যেমন- NVDA, VoiceOver, JAWS ইত্যাদি সফটওয়ারগুলো লেবেলের লেখা পড়তে পারে । ফলে ফর্মটি হয় অন্ধ, বধির, কানে কম শোনা প্রতিবন্ধিদের জন্য accessible এবং usable । এছাড়া লেবেলের উপর ক্লিক করলেই সংশ্লিষ্ট ইনপুট সিলেক্ট হয়ে যায় বলে ছোট ছোট ইনপুট যেমন চেকবক্স, রেডিও বাটন ইত্যাদি সিলেক্ট করতে বিশেষ ‍সুবিধা পাওয়া যায় । লেবেলে ইনপুট সম্পর্কিত প্রয়োজনীয় তথ্য প্রদর্শন করা যায় যেমন- ইনপুটটি অত্যাবশ্যক কিনা, কি ধরনের ফরম্যাটে তথ্য দিতে হবে ইত্যাদি । ফলে ফর্মটি হয় অধিকতর ব্যবহার বান্ধব (user friendly)।

2.   ফর্মে দৃশ্যত:(visually) কোন label না থাকলে কিংবা লুক্কায়িত (hidden) label দিতে না চাইলে Input এ aria-label=”name(required)” এভাবে দেয়া যেতে পারে screen readers ব্যাবহারকারীদের সুবিধার্থে ।

3.   Check box, radio button ইত্যাদি গ্রুপ আকারে থাকা ইনপুট ফিল্ডগুলোকে fieldset এর মধ্যে রাখতে হবে । fieldset এর মধ্যে legend দেয়া যেতে পারে ।

4.   Date, phone number ইত্যাদি ইনপুটের ফরম্যাট যথাযথভাবে উল্লেখ করে দিতে হবে । যাতে একজন ব্যবহারকারী খুব সহজেই বুঝতে পারে কোন ফরম্যাটে ইনপুট তথ্য দিতে হবে ।

5.   কোন কোন ইনপুট ফিল্ড অবশ্যই পূরণ করতে হবে (required field) সে সম্পর্কিত তথ্য বোধগম্য এবং সহজেই নজরে পড়ে এমনভাবে উপস্থাপন করতে হবে ।প্রথম নজরেই যেন ব্যবহারকারী বুঝতে পারে যে, কোন কোন ফিল্ড তাকে অবশ্যই পূরণ করতে হবে । এ কাজটা label এর মধ্যে লাল রংয়ের * চিহ্ন দিয়ে অথবা required শব্দটি লিখে করা যেতে পারে । required দিয়ে করাটাই সবচেয়ে ভালো কেননা লেবেলের মধ্যের লেখাকে screen reader software গুলো পড়তে পারে । তাছাড়া * চিহ্নটিকে NVDA ডিফল্টভাবে ‍star উচ্চারণ করতে পারে না যদিও VoiceOver/JAWS করতে পারে ।এছাড়াও * টিকে গ্রাফিক আকারে দিয়ে alternet text দিয়ে দেয়া যায় । তবে এক্ষেত্রে সমস্যা হলো OS X Lion সফটওয়ার atlternet text পড়তে পারেনা । অনেকে লেবেলের মধ্যে ইনপুটের নামটিকে লাল রংয় দিয়ে নির্দেশ করেন । এটা করা একদম ঠিক নয় । কারণ screen reader গুলো শুধু লেখাটিকে পড়বে । এটা যে অত্যাবশ্যক সেটা বলবে না যদি required লেখাটি না থাকে ।

6.   যেসব বর্ণনামূলক তথ্য label এর মধ্যে দেয়া সম্ভব নয় সেগুলো প্রয়োজনে আলাদা একটি span দিয়ে তার মধ্যে দেয়া যেতে পারে । এর মধ্যে থাকতে পারে ইনপুটে কোন কোন অক্ষর/চিহ্ন কোন ফরম্যাটে ব্যবহার করতে হবে ইত্যাদি ।

7.   Place Holder Text ব্যবহার করতে হবে । এতে থাকতে পারে ইনপুট ফিল্ডটি অত্যাবশ্যক কিনা এবং ইনপুট তথ্যের যথাযথ ফরম্যাট ।

8.   একটি আকর্ষণীয় ও কার্যকর ক্লায়েন্ট সাইড ভ্যালিডেইশন করতে হবে । HTML5 দিয়ে ইনলাইন ভ্যালিডেশন করা যেতে পারে যেখানে প্রতিটি অক্ষর টাইপ করার সাথে সাথে ব্যবহারকারী বুঝে যাবে যে সে সঠিক ইনপুট দিচ্ছে কিনা ।

9.   Form Validation এর Error Message একটি অতি গুরুত্বপূর্ণ বিষয় । সহজে বোধগম্য error message দিয়ে ব্যবহারকারীকে বলে দিতে হবে সে কোন জায়গায় ভুল করেছে এবং সঠিক ইনপুট কিভাবে দিতে হবে ।

10. CSS দিয়ে পুরো ফর্মের UI Desing কে আকর্ষণীয় এবং অধিকতর কার্যকরভাবে উপস্থাপন করতে হবে । ইনলাইন ভ্যালিডেইশন, অত্যাবশ্যকীয় ইনপুট ফিল্ড, এরর মেসেজ ইত্যাদি এমনভাবে ডিজাইন করতে হবে যেন ব্যবহারকারী প্রত্যেকটা টাইপের সাথে সাথে ফর্মের রূপ পরিবর্তন(কালার, বর্ডার) দেখেই ‍বুঝতে পারেন তিনি সঠিক ইনপুট দিচ্ছেন নাকি বেঠিক দিচ্ছেন । এবং কোন ধরনের ইনপুট দিতে হবে ।

11.  HTML5 দিয়ে ইনলাইন ভ্যালিডেশন করে ক্রসব্রাউজারের জন্য JavaScript দিয়ে ফলব্যাক ভ্যালিডেইশন করা উচিৎ ।

12. WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Application) দিয়ে ফর্মটিকে Accessible এবং Usable করতে হবে । অন্ধ, বধির, কানে কম শোনা প্রতিবন্ধীরা Screen Reader Software ব্যবহার করে ফর্মটিকে যেন কার্যকরভাবে ব্যবহার করতে পারে সেদিকে বিশেষ নজর দিতে হবে ।

সর্বোপরি, একটা কথা বিশেষভাবে মনে রাখতে হবে—একটি ওয়েব ফর্মের সফলতা বা বিফলতা নির্ভর  করে ফর্মটিকে যাঁরা ব্যবহার (user) করবেন তাঁদের উপর । ব্যবহারকারী যদি ফর্মটিকে ব্যবহার করে আনন্দ পান, সন্তুষ্ট থাকেন তবেই ফর্মটি তথা ডিভেলপার হিসেবে আপনি সফল । আর ব্যবহারকারী তখনই সন্তুষ্ট হবেন যখন তিনি কোনরূপ হয়রাণি ছাড়াই কম সময়ের মধ্যে ফর্মটিকে পূরণ করে সফলভাবে প্রেরণ (send) করতে পারবেন ।

** screen reader হলো এমন সব সফটওয়ার (NVDA, VoiceOver, JAWS, Window-Eyes, Orca (on Linux) etc.) যে গুলো কোন ওয়েব পেইজকে পড়ে শোনাতে পারে । সাধারণত অন্ধ, দৃষ্টি ক্ষতিগ্রস্ত(visually impaired), বধির এবং কানে কম শোনেন এমন লোকেরা এসব সফটওয়ার ব্যবহার করেন ।